ボーダー（枠線、縁取り）の指定
要素の周りにボーダー（枠線、縁取り）を指定する方法を説明します。ボーダーを指定するには、borderプロパティを使用します。
borderプロパティ
borderプロパティでは、ボーダーの「スタイル」、「色」、「太さ」の3つを指定することができます。このうち、ボーダーのスタイルの指定は必須となります。
まず、必須であるスタイルの指定を見てみましょう。
ボーダーのスタイル指定
borderに指定する値と、その値によって表示される枠線には次のようなものがあります。
- solid（実線）
- double（二重線）
- dotted（点線）
- dashed（破線）
ex.css
h1 {
border: solid;
}
h2 {
border: double;
}
h3 {
border: dotted;
}
h4 {
border: dashed;
}
尚、指定できる値は、まだ他にもありますが、詳細はborderプロパティを参照してください。
ボーダーの色指定
ボーダーの色を指定するには、スペースで区切って色の値（名前の指定でも数値の指定でも構わない）を記述します。
ex2.css
h1 {
border: solid blue;
}
h2 {
border: double rgb( 0, 255, 0 );
}
h3 {
border: solid #ff0000;
}
h4 {
border: double #009;
}
ボーダーの太さ指定
ボーダーの太さを指定するのも、値をスペースで区切って指定します。指定できる値は次のとおりです。
- thin（細い）
- medium（通常、初期値）
- thick（太い）
ボーダーの太さを指定しない場合は、「medium」が指定されているとみなされます。
この他に、太さには数値を指定する方法もあります。数値について詳しくは次ページで説明します。
ex3.css
h1 {
border: solid blue thin;
}
h2 {
border: double rgb( 0, 255, 0 ) medium;
}
h3 {
border: solid #ff0000 thick;
}
h4 {
border: double #009 8px;
}
尚、3つの値を記述する順番はどのようになっても構わないのですが、スタイルの値の指定は必須なので、先に記述するようにしておけばミスを防ぐことができると思います。
ボーダーの上下左右を個別で指定
ボーダーは上下左右で個別に指定することができます。上下左右で個別に指定するには、
- border-top（上）
- border-right（右）
- border-bottom（下）
- border-left（左）
を使用します。値の指定方法は、borderプロパティと同様です。
ex4.css
h1 {
border-top: solid #00f thin;
}
h2 {
border-left: solid #f00 thick;
}
h3 {
border-bottom: solid #330 thin;
border-left: double #330 thick;
}
h4 {
border-top: solid #030 thin;
border-bottom: solid #030 thin;
}
まとめ
- ボーダーの指定には、borderプロパティを使用
- borderプロパティは、ボーダーの「スタイル」、「色」、「太さ」を定義
- 「スタイル」、「色」、「太さ」の指定には、それぞれの値をスペースで区切って記述
- ボーダーの上下左右を個別に指定するには、「border-top」、「border-right」、「border-bottom」、「border-left」を使用
ボーダーの指定
ボックスモデル
ページの先頭
2024 Webデザインレッスン