読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSで繰り返しブロックの余白設定に使えるセレクタ「+」】

f:id:wp-lesson:20170203234222p:plain
こんなページがあったとします。
 

==============
ヘッダー
==============
<section>ブロックA</section>
============== ←ここ
<section>ブロックB</section>
============== ←ここ
<section>ブロックC</section>
============== ←ここ
<section>ブロックD</section>
==============

「ここ」の3箇所だけCSSで余白を空けたい場合、
3通りの考え方があると思います。
 
<方針1>
A~D全部に上側の余白を設定し、Aのみ解除する。
 
section { margin-top: 30px; }
section:first-child { margin-top: 0; }
 
<方針2>
A~Dのうち最初のブロック以外に余白を設定する。
 
section:not(:first-child) { margin-top: 30px; }
 
<方針3>
同じブロックが連続した場合のみ余白を設定する。
 
section+section { margin-top: 30px; }
 
【解説】
どれも結果は同じです。
 
1は疑似クラス「:first-child」を利用して、
最初のブロックのみ余白の設定を解除しています。
 
2は1と同じことを疑似クラスの「:not」を使って
コンパクトに記述したものです。
 
「:first-child ではないもの」という意味ですね。
 
3は隣接セレクタ「+」を使って、
直前のsectionタグに続く次のsectionタグだけに
余白を設定するという考え方で、
最初のブロックだけはこのルールに該当しないので、
2つ目以降のブロックにだけ余白が設定されます。
 
 
CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy