CSSでは、borderとoutlineの2つの異なる枠線スタイルが存在します。 borderは常に四角い枠線を表し、CSS2で導入されたoutline枠線は非四角形の領域向けです。そしてもう1つの違いは、outlineの場合、枠線が枠の外側に表示されるため、要素にborderとoutlineの両方が指定されることがあります。
このチュートリアルで紹介されている枠線定義は、主に独自の段落を形成する要素に興味がありますが、基本的に他の要素にも適用できます。
枠線の定義
borderを使用すると、要素の周囲全体の外観を設定できます。
一般的なborderプロパティは以下の値の概要で、これらについて詳細に説明します：
• border-color
• border-style
• border-width
各プロパティの値はスペースで区切られて記述されます。プロパティを指定する順序は重要ではありません。さらに、borderには、個々の要素の側面に対する枠の色、太さ、種類を指定できる4つのサブプロパティもあります。
• border-top – 上側の枠
• border-right – 右側の枠
• border-bottom – 下側の枠
• border-left – 左側の枠
次の例は、borderの使用方法を示しています。この定義により、3ポイントの幅、黒色、実線の枠が作成されます。
<p style="border:3pt solid #000000;"> Herzlich willkommen </p>
ブラウザでの結果：
枠線の色
border-colorを使用して、枠線の色を指定できます。許容される値は以下の通りです：
• transparent – 透明な枠線
• 色の値
1つの値だけを指定すると、それがすべての枠側に適用されます。個々の側面に異なる色を指定するには、複数の値をスペースで区切って指定します。
• 2つの値 – 上下側の枠色と左右側の枠色。
• 3つの値 – 上側の枠色、左右側の枠色、下側の枠色。
• 4つの値 – 上側、右側、下側、左側の枠色。borderサブプロパティも同様に使用できます：
• border-top-color – 上側の枠線の色
• border-right-color – 右側の枠線の色
• border-bottom-color – 下側の枠線の色
• border-left-color – 左側の枠線の色
例：
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
そして、ブラウザでの結果：
ラインスタイル
border-styleを使用して、枠線のラインスタイルを指定できます。
以下に、可能な枠線スタイルのリストが表示されます：
• none – 不可視の枠線
• dotted – 点線
• dashed – 破線
• solid – 実線
• double – 二重線
• groove – 3Dライン
• ridge – 3Dライン
• inset – 3Dライン
• outset – 3Dライン
以下は、枠線スタイルの見本です：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>ブラウザでの結果：
1つの値だけを指定すると、それが枠線のすべての側面に適用されます。個々の側面のラインスタイルを定義するには、複数の値をスペースで区切って指定します。
• 2つの値 – 上下側の枠線スタイルと左右側の枠線スタイル。
• 3つの値 – 上側の枠線スタイル、左右側の枠線スタイル、下側の枠線スタイル。
• 4つの値 – 上側、右側、下側、左側の枠線スタイル。borderの下位プロパティも使用できます：
• border-top-style – 上側の枠線スタイル
• border-right-style – 右側の枠線スタイル
• border-bottom-style – 下側の枠線スタイル
• border-left-style – 左側の枠線スタイル
ここでも例を挙げます：
<p style="border-bottom-style: dashed;"> Gestrichelter Rahmen </p>
これがブラウザ上で表示される姿です：
枠の幅を設定する
border-width によって枠の幅が決まります。
• 長さ指定
• thin – 薄い枠
• medium – 中程度の枠
• thick – 太い枠
値が1つだけ指定された場合、全ての辺に同じ幅が適用されます。個々の辺に異なる枠幅を設定する方法は2つあります。最初の方法では、スペースで区切られた複数の値を記述します。
• 2つの値 – 最初の値が上下、2番目が左右の枠幅を指定
• 3つの値 – 最初の値が上、2番目が左右、3番目が下の枠幅を指定
• 4つの値 – 最初が上、2番目が右、3番目が下、4番目が左の枠幅を指定
同様に、以下の border アンダー属性を使用することもできます：
• border-top-width – 上部の枠の厚さ
• border-right-width – 右部の枠の厚さ
• border-bottom-width – 下部の枠の厚さ
• border-left-width – 左部の枠の厚さ
例：
<p style="border-width:2px;border-style: dotted;"> Herzlich willkommen </p>
アウトラインの枠色
outline-color プロパティを使用して枠線の色を定義します。指定方法は border-color と同じです。
• invert – 色を反転させます。この色は16進数カラー値のすべてのビットの反転によって生じます。
• 色指定
例：
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
これがブラウザ上で表示される姿です：
アウトラインの枠種類
outline-style プロパティは輪郭のタイプを決定します。指定できる値は border-style と同じです。
• none – 不可視の枠
• dotted – 点線
• dashed – 破線
• solid – 実線
• double – 二重線
• groove – 3Dライン
• ridge – 3Dライン
• inset – 3Dライン
• outset – 3Dライン
例：
<p style="outline-style: solid; outline-width: 2px; outline-color: red;"> PSD-Tutorials.de </p>
アウトラインの枠幅
outline-width プロパティは border-width と同じです。こちらは枠の幅を定義します。見える枠線を表示するためには、常に outline-width と outline-style を組み合わせます。
• medium – 中程度の枠
• thin – 薄い枠
• thick – 太い枠
• 長さ指定 – 枠の幅を決めます
例：
<p style="outline-width: thin; outline-style: solid; outline-color: red;">
Herzlich willkommen
</p>
border と同様に、outline フレームにも一般的なプロパティが存在します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Willkommen auf PSD-Tutorials.de!</p>
</body>
</html>
これには以下のプロパティが含まれます：
• outline-width
• outline-style
• outline-color
この原則は一般的な border プロパティと同じです。
