広告の画像を横に並べて表示しようとスタイルシートを書いていたのですが、DIV タグに class 属性を付けずに手を抜こうとしたところ、後になってどのように CSS セレクタを記述したらいいのかものすごい悩んだ、というしょうもない話です。クラス名とか関数名とか、いっつも悩むんですよ。

HTML は次のようになっています。

ネスト(入れ子)構造になっている DIV タグに対し、どのように CSS セレクタを記述すればいいのかという問題であると言い換えることができます。

準備

CSS でなにもカスタマイズしていない状態がこちらです。

まずは横に並べるために float を設定します。

横に並んではくれたのですが、下の H2 タグが上に飛び出てきてしまっています。

これは、横並びになっている広告を囲んでいる親要素の DIV タグに高さがないことが原因です。

こうなります。

この横並びになった DIV タグを中央に表示したい。

あまりに便利だから、いつも子孫セレクタでスタイル指定しちゃう

CSS の知識に乏しい当ブログ管理人は、スタイル指定に困るととりあえず子孫セレクタで記述をするという、プログラマにあるまじき癖があります。広告の大きさは定番の 300X250 です。

　横並びになった DIV タグを中央揃えで表示するには、float 設定の子要素を持っている親要素の width を指定し、margin を 0 auto に設定することです。

　親要素の幅なんですが、子要素の幅すべてをきちんと設定してやる必要があります。今回で言えば、300px の画像が二枚なので 600px です。margin、padding、枠線などがある場合は、それらの幅もきちんと計算する必要があります。これで表示してみると、

訳がわからない状態になりました。Google Chrome の「要素の検証」で確認するとわかるのですが、広告ひとつひとつのそれぞれの幅が 600px になってしまっています。

今日調べるまで知らなかったんですが、子孫セレクタって子要素だけでなく、孫要素やそれ以下のすべての要素にスタイル指定してしまうものだったんですね。よく考えずに子孫セレクタを使ってはいけないという戒めです。

子セレクタで指定してあげる

このように修正してあげます。

このように指定してあげれば、直下の子要素のみにスタイルが適用されるようになり、ちゃんと中央に表示されるようになります。

広告同士の間に空白などをいれて調整します。

真ん中の余白に合わせて width の値を調整するのを忘れないようにしてください。

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

posted with カエレバ

こもりまさあき,赤間 公太郎 エムディエヌコーポレーション 2016-02-02

Amazon

楽天市場