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

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

枠線のスタイルの設定

枠線のスタイルを設定するには、 border-???-styleプロパティを設定します。

border-top-style: 上の枠線のスタイル
border-bottom-style: 下の枠線のスタイル
border-left-style: 左の枠線のスタイル
border-right-style: 右の枠線のスタイル
border-style: 上下左右の枠線のスタイル

指定できるスタイルには、 次のような種類があります。

• none（枠線を消す）
• hidden（枠線を消す）
• solid（直線）
• double（二重線）
• dashed（破線）
• dotted（点線）
• groove（右下から光が当たったような枠）
• ridge（左下から光が当たったような枠）
• inset（ボタンが押されたような線）
• outset（ボタンが浮き出たような線）

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

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

設定の例

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

• h1要素の枠線のスタイルが、上下と右は点線、左が実線
• h2要素の枠線のスタイルが、上が実線、左が破線（のこりは設定されず）
• h3要素の枠線のスタイルが、上下左右ともボタンが押されたような状態 となります。

h1{
  border-style: dotted dotted dotted solid;
}
h2{
  border-top-style: solid;
  border-left-style: dashed;
}
h3{
  border-style: inset;
}

次へ進んでください。