KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/6th/border_style のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/JouhouC2010/6th/border_style へ行く。
  • 1 (2010-05-21 (金) 07:59:44)

枠線の色の設定

枠線の色を設定するには、 border-???-colorプロパティを設定します。

border-top-color: 上の枠線の色
border-bottom-color: 下の枠線の色
border-left-color: 左の枠線の色
border-right-color: 右の枠線の色
border-color: 上下左右の枠線の色

border-colorプロパティを使えば、 上下左右の枠線の色を一度に指定できます。 その場合は、値を半角スペースで区切ります。 値の個数によって、次のように枠線が設定されます。

• 値が1つ: 「上下左右」を指定
• 値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
• 値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
• 値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」

設定の例

次のような設定をすると、

• h1要素の枠線の色は、上が赤、右が黄色、下が緑色、左が深緑色
• h2要素の枠線の太さは、左だけが赤（上下と右は設定されず） となります。

h1{
  border-color: #ff0000 #ffcc00 #339933 #336633;
}
h2{
  border-left-color: red;
}

次へ進んでください。