wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

CSSの段組みでfloatプロパティは使わない方がいいの?

アドセンスの追尾広告を実装すべく、いろいろとあーでもない、こーでもない、と奮闘して疲れ切ったわにちゃんです、こんにちは!

レスポンシブWebデザインにおいて、Googleさんに許可されたサイトのみ、PCのみ追尾広告1つだけOKという話なんですが、解像度ってどこからがPCなん?っていう疑問が生じたため、前回以下のエントリーを書きました。

アドセンスサポートに確認してみると、要するに、アンカー広告と追尾広告が同時に表示されなければOK、ということみたいです。

タブレットでも縦向きではアンカー広告が表示されますよね?

しかし、横向きではアンカー広告は一切表示されません。

私のiPadの解像度では、CSSでは768x1024と解釈されていて、横幅768ピクセルの場合は画面上部にアンカー広告が表示されます。しかし、横向きではされない、というと、1024ピクセル以上では追尾広告を表示しても問題ない、という結論に達します。

レスポンシブWebデザインでレガシーなHTMLサイトを運営している運営者の方ってどれぐらいいらっしゃるんですかね? ほとんどWordPress一択みたいな、ある意味宗教染みたノリになってるんですけど。

で、実装してみたけど追尾しない。あれ???

現在、うちのサイトでは、CSSの段組みレイアウトでfloatプロパティを使ってます。

いろいろググってみると、floatプロパティで段組みしている場合は、追尾しない場合が多いという情報にたどり着きました。

解決策として、floatプロパティ以外を使う、ということになります。有力なのがdisplay:flex を使って段組み。しかし、IEとかではバグが生じる場合がある曲者。

うちんとこのサイトでIEユーザーが少なくないんですけどねぇ。。。

f:id:wanichan:20190818110029p:plain

アナリティクス調べでは、IEのほとんどがIE11。あとはごく少数派なので無視していいかもです。

てか、ChromeとIEが拮抗しているという、なんなんですかねこれ。Edgeってdisplay:flex 使えるんでしたっけ??

てか、私、IEなんてめったに起動しませんがな。E-tax申請しか使わないという。Edgeは一応標準ブラウザなんだけど、いつもChrome使ってまっせ。

で、試しにfloatの代わりにふつうにflexで段組みしようとしたら、左寄せになってダメだこりゃ、になったので、センタリングってどうなん?って調べたらありました!

shared-blog.kddi-web.com

でも、こんなんでしばらく奮闘してたら未完成コンテンツがそのままになってしまうんで、まずはコンテンツのてこ入れを優先するのが吉ですね。