CSSでレイアウト

疑似クラスや隣接セレクタを使い分ける

残りのコンテンツも作ってみました。CSSは以下の通り。

隣接セレクタ

大体いままでの応用でレイアウトはできるのですが、今回のポイントは.contents div+section隣接セレクタをつかっています。ソースを見ていただければ分ると思いますが要素を入れる幅は980pxです。

その中に(230px+20px)×4=1000pxになりますので20pxあまります。

それを隣接セレクタでdivと隣り合うsectionのみmargin-left:0;を指定し最初のsectionのmargin-left:20px;を解除しています。

前回は:first-child疑似クラスで似たようなことをやりましたが今回は:first-child疑似クラスは使えません。:first-child疑似クラスは子要素の最初の要素にしか指定できないからです。 今回の場合ですとsectionを囲っているarticleの最初の子要素はdivになります。

その他のプロパティ

border

border:と記述すれば上下左右全てに適応
border-top:
border-right:
border-bottom:
border-left:
のように個別に指定する事も出来る値は
border:1px(線の太さ) solid(線の形状、直線) #ddd(線の色);

デモページ

Sponsored Links