復習 コピペ
first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する
|
:first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する
:first-child擬似クラスは、ある要素内で最初に現れる子要素を対象にスタイルを適用します。 例えば、リストの最初の項目だけとか、いくつかある段落のうち、最初の段落だけにスタイル指定する場合などに使用します。 E:first-childは、 E:nth-child(1) を指定した場合と同じ動作となります。 ■セレクタの書式・スタイルを適用する対象
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。h2:first-child {background-color:#00ccff;}HTMLソース<html><head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <div> <h2>今日のお天気</h2> <p>今日は<strong>晴れ</strong>です。</p> <h2>明日のお天気</h2> <p>明日は<strong>雨</strong>です。</p> </div> </body> </html> ↓↓↓
ブラウザ上の表示今日のお天気今日は晴れです。 明日のお天気明日は雨です。
|
box-sizing …… ボックスサイズの算出方法を指定する
ox-sizing …… ボックスサイズの算出方法を指定する
box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。
値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。
■値
- content-box
- パディングとボーダーを幅と高さに含めない（初期値）
- border-box
- パディングとボーダーを幅と高さに含める
- inherit
- 親要素の値を継承する
■適用対象・値の継承・初期値
- 初期値
- content-box
- 適用対象
- 幅、または、高さを持つすべての要素
- 値の継承
- しない
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
box-sizing: content-box;
}
p.sample2 {
width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
box-sizing: border-box;
}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">box-sizing: content-box; を指定</p>
<p class="sample2">box-sizing: border-box; を指定</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
box-sizing: content-box; を指定
box-sizing: border-box; を指定
■ベンダープレフィックスを付けた場合の使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.prefix_sample1 {width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
}
p.prefix_sample2 {
width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="prefix_sample1">box-sizing: content-box; を指定</p>
<p class="prefix_sample2">box-sizing: border-box; を指定</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
box-sizing: content-box; を指定
box-sizing: border-box; を指定
clear プロパティ
clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用します。
■値
left
左寄せされた要素に対する回り込みを解除します。
right
右寄せされた要素に対する回り込みを解除します。
both
左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。
none
回り込みを解除しません。これが初期値です。
■使用例
HTMLソース
<p><img src="../images/img002.gif" alt="サンプル画像" style="float:right;">
画像を右に寄せて配置します。後に続く内容はその反対側に回り込みます。
</p>
<p>
段落が変わっても回り込みます。
</p>
<p style="clear:right;">
回り込みが解除されます。
</p>
↓↓↓
ブラウザ上の表示
画像を右に寄せて配置します。後に続く内容はその反対側に回り込みます。
段落が変わっても回り込みます。
回り込みが解除されます。
