10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<h1>見出し</h1>

CSSソース

h1 {
border-bottom:2px solid #ffaa00;
}

サンプル表示

見出し

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。

CSSソース

border-bottom:2px solid #ffaa00;
これは、h1タグ内の文字の下側に、太さ2pxで色コードが#ffaa00の直線を表示するという意味です。
border-bottomというのが、:より右の指定を見出し下側の枠線のみに適用するという意味。
2pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、2pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。

例)
border-bottom:5px solid red;
見出しの下側に太さ5pxの赤い直線を表示

[参考]CSSリファレンス ボーダー・枠線

10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<h1>見出し</h1>

CSSソース

h1 {
border-left:8px solid #ffaa00;
}

サンプル表示

見出し

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。

CSSソース

border-left:8px solid #ffaa00;
これは、h1タグ内の文字の左側に、太さ8pxで色コードが#ffaa00の直線を表示するという意味です。
border-leftというのが、:より右の指定を見出し左側の枠線のみに適用するという意味。
8pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、8pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。

例)
border-left:10px solid red;
見出しの左側に太さ10pxの赤い直線を表示

[参考]CSSリファレンス ボーダー・枠線