おすすめ記事ピックアップ
ランディングページを作ると、いろんな見出しを使いたくなります。かつ見出し周りの位置を微妙に調整が必要になったりします。本来であれば計画的に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の追記が必要なのかも。
子孫セレクタって、なかなかわからなくなりますね!
これらを子孫セレクタってゆうのかも怪しくなってきました。子セレクタとかも認識がまじっていそう。