疑似クラスや隣接セレクタを使い分ける
残りのコンテンツも作ってみました。CSSは以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.contents{ width:980px; margin:0 auto; overflow:hidden; margin-bottom:40px; } .contents div{ background:#fafafa; border:1px solid #ddd; padding:20px; margin-bottom:40px; } .contents div h1{ border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:10px; } .contents div p{ text-align:left; line-height:170%; } .contents section{ width:230px; float:left; margin-left:20px; text-align:left; } .contents div+section{ margin-left:0; } .contents section a{ font-size:16px; font-weight:bold; text-decoration:none; margin-bottom:10px; color:#333; } .contents section a:hover, .contents section a:active{ color:#ccc; } .contents section p{ line-height:150%; } footer{ width:100%; background:#666; text-align:center; padding:10px 0; color:#fff; font-size:12px; } |
隣接セレクタ
大体いままでの応用でレイアウトはできるのですが、今回のポイントは.contents div+section隣接セレクタをつかっています。ソースを見ていただければ分ると思いますが要素を入れる幅は980pxです。
|
1 2 3 4 |
.contents{ width:980px; 〜 } |
その中に（230px+20px）×4=1000pxになりますので20pxあまります。
|
1 2 3 4 5 6 |
.contents section{ width:230px; float:left; margin-left:20px; text-align:left; } |
それを隣接セレクタでdivと隣り合うsectionのみmargin-left:0;を指定し最初のsectionのmargin-left:20px;を解除しています。
|
1 2 3 |
.contents div+section{ margin-left:0; } |
前回は:first-child疑似クラスで似たようなことをやりましたが今回は:first-child疑似クラスは使えません。:first-child疑似クラスは子要素の最初の要素にしか指定できないからです。 今回の場合ですとsectionを囲っているarticleの最初の子要素はdivになります。
その他のプロパティ
- border
-
border：と記述すれば上下左右全てに適応
border-top:
border-right:
border-bottom:
border-left:
のように個別に指定する事も出来る値は
border：1px（線の太さ） solid（線の形状、直線） #ddd（線の色）;
