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

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



ランディングページを作ると、いろんな見出しを使いたくなります。かつ見出し周りの位置を微妙に調整が必要になったりします。本来であれば計画的に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の追記が必要なのかも。

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









いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : 計画性の無い人にお勧め、見出し周りのマージンなどスペース調整に子孫セレクタを使ってみよう
計画性の無い人にお勧め、見出し周りのマージンなどスペース調整に子孫セレクタを使ってみよう
ランディングページを作ると、いろんな見出しを使いたくなります。かつ見出し周りの位置を微妙に調整が必要になったりします。本来であれば計画的にhタグやdivタグをCSSで考えるべきですが、計画性無く作る場合は、見出しのマージン等の調整当に子孫セレクタを使ってみたらとても便利でした。
http://3.bp.blogspot.com/-wqI9ADGOpgo/ViwLPNCKybI/AAAAAAAAffo/XaE607iaLx8/s640/AME8563_hitomoyou-thumb-1000xauto-19593.jpg
http://3.bp.blogspot.com/-wqI9ADGOpgo/ViwLPNCKybI/AAAAAAAAffo/XaE607iaLx8/s72-c/AME8563_hitomoyou-thumb-1000xauto-19593.jpg
ふりむけばコウホウ
http://www.furimuke.com/2015/10/blog-post.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/10/blog-post.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy