計画性の無い人にお勧め、見出し周りのマージンなどスペース調整に子孫セレクタを使ってみよう

おすすめ記事ピックアップ

ランディングページを作ると、いろんな見出しを使いたくなります。かつ見出し周りの位置を微妙に調整が必要になったりします。本来であれば計画的にhタグやdivタグをCSSで考えるべきですが、計画性無く作る場合は、見出しのマージン等の調整当に子孫セレクタを使ってみたらとても便利でした。

多分厳密には良くない使い方なんでしょう。また子孫セレクタは、後につけた設定が追加上書きされる感じなので、元の設定の影響を受けたりします。

説明するのは、微妙に面倒なので、こんな使い方をしてみたら便利だったというお話しです。

作ったCSSコード

h1{margin: 0;}h2{margin: 0;}h3{margin: 0;}h4{margin: 0;}h5{margin: 0;}
h1.top10{margin:10px 0 0 0;}h2.top10{margin:10px 0 0 0;}h3.top10{margin:10px 0 0 0;}h4.top10{margin:10px 0 0 0;}h5.top10{margin:10px 0 0 0;}
h1.top20{margin:20px 0 0 0;}h2.top20{margin:20px 0 0 0;}h3.top20{margin:20px 0 0 0;}h4.top20{margin:20px 0 0 0;}h5.top20{margin:20px 0 0 0;}
h1.bottom10{margin:0 0 10px 0;}h2.bottom10{margin:0 0 10px 0;}h3.bottom10{margin:0 0 10px 0;}h4.bottom10{margin:0 0 10px 0;}h5.bottom10{margin:0 0 10px 0;}
h1.bottom20{margin:0 0 20px 0;}h2.bottom20{margin:0 0 20px 0;}h3.bottom20{margin:0 0 20px 0;}h4.bottom20{margin:0 0 20px 0;}h5.bottom20{margin:0 0 20px 0;}
h1.top-10{margin:-10px 0 0 0;}h2.top-10{margin:-10px 0 0 0;}h3.top-10{margin:-10px 0 0 0;}h4.top-10{margin:-10px 0 0 0;}h5.top-10{margin:-10px 0 0 0;}
h1.top-20{margin:-20px 0 0 0;}h2.top-20{margin:-20px 0 0 0;}h3.top-20{margin:-20px 0 0 0;}h4.top-20{margin:-20px 0 0 0;}h5.top-20{margin:-20px 0 0 0;}
h1.top-30{margin:-30px 0 0 0;}h2.top-30{margin:-30px 0 0 0;}h3.top-30{margin:-30px 0 0 0;}h4.top-30{margin:-30px 0 0 0;}h5.top-30{margin:-30px 0 0 0;}
h1.top-40{margin:-40px 0 0 0;}h2.top-40{margin:-40px 0 0 0;}h3.top-40{margin:-40px 0 0 0;}h4.top-40{margin:-40px 0 0 0;}h5.top-40{margin:-40px 0 0 0;}
h1.bottom-10{margin:0 0 -10px 0;}h2.bottom-10{margin:0 0 -10px 0;}h3.bottom-10{margin:0 0 -10px 0;}h4.bottom-10{margin:0 0 -10px 0;}h5.bottom-10{margin:0 0 -10px 0;}
h1.bottom-20{margin:0 0 -20px 0;}h2.bottom-20{margin:0 0 -20px 0;}h3.bottom-20{margin:0 0 -20px 0;}h4.bottom-20{margin:0 0 -20px 0;}h5.bottom-20{margin:0 0 -20px 0;}

というCSSを作りました。h1からh5まで、マージンの上下を足したり引いたりするCSSです。
例えばh2にclassでbottom20と書けば、h2のボトムにマージン20が追加されます。おお便利！

<h2 class="bottom20">h2見出し</h2>

bottom-20と書けば、マージンがマイナス20になります。大便利！

<h2 class="bottom-20">h2見出し</h2>

ちなみに、cssが追加されるだけなので、大元のh2に例えばマージン30が設定されていれば、そのマージンが20になるだけなので、逆にマージンが減ってしまいます。なのでまあ邪道な使い方だと思います。

でも大元のh2をシンプルに記述しておいて、ランディングページ等の一部見出しの、その部分だけの上下調整を調整したい時など、classにtop10とか、bottom-20とか追加するだけで、微調整できるのは、本当便利でした。計画的にcssを作れって話ですが、作れない人もます。

追記まちがった！

上記にh2.classの記述をしていますが、h2等のclassではないタグは、上記のようにわざわざ子孫セレクタにしなくても、記述することができます。つまり、普通にcssを書いて、h2のclassとして使えます。上記のような設定をせずに、bottom20等のcssを書けば良いだけです。

さらに落とし穴！

通常のclassに対して、別のclassを子孫セレクタしようとするとできません。その時は、cssをあらかじめ設定する必要があります。良く考えればそうですよね。やっと理解できました。

うんとつまり

外部CSSにbottom20というclassを書いたとします。underlineやcontentというclassもあったとします。

<h2 class="bottom20">←　使えます！
<h2 class="underline bottom20">←　使えます？（確認中）
<div class="content bottom20">←　使えません！

underlineやcontentにbottom20の子孫セレクタを使えるようにするには、

.underline.bottom20{margin:0 0 20px 0;}
.content.bottom20{margin:0 0 20px 0;}

といったcssコードが必要ってこと（認識間違っているかも、後で確認しよう「<h2 class="underline bottom20">」はそのままで動いた気がする。h2等のでは、複数のクラスの設定ができるのかも）クラスにクラスを設定するときは、子孫セレクタとしてcssの追記が必要なのかも。

子孫セレクタって、なかなかわからなくなりますね！
これらを子孫セレクタってゆうのかも怪しくなってきました。子セレクタとかも認識がまじっていそう。