CSS/border
border プロパティ
[編集]CSS の border プロパティは、要素のボーダーを一括で指定するために使用されます。このプロパティでは、ボーダーの幅、スタイル、色をまとめて設定できます。
基本構文
[編集]border: <border-width> <border-style> <border-color>;
border-width：枠線の太さを指定します。キーワード値（例:thin,medium,thick）またはピクセル（px）やその他の長さ単位（例:em,%）を使用できます。border-style：枠線の種類を指定します。一般的な値としては、solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などがあります。border-color：枠線の色を指定します。色名（例:red）、RGB値（例:rgb(255, 0, 0)）、または16進数カラーコード（例:#ff0000）を使用できます。
- 例
border: 1px solid black;
上記の例では、幅が 1px の黒い実線ボーダーを指定しています。
border-bottom
[編集]下ボーダーを指定します。幅、スタイル、色を個別に設定できます。
- 例
border-bottom: 2px dashed blue;
上記の例では、下部に 2px の青い破線ボーダーを指定しています。
border-bottom-color
[編集]下ボーダーの色を指定します。
- 例
border-bottom-color: red;
上記の例では、下部のボーダー色を赤に指定しています。
border-bottom-left-radius
[編集]左下の角丸を指定します。
- 例
border-bottom-left-radius: 10px;
上記の例では、左下の角に 10px の丸みを指定しています。
border-bottom-right-radius
[編集]右下の角丸を指定します。
- 例
border-bottom-right-radius: 10px;
上記の例では、右下の角に 10px の丸みを指定しています。
border-bottom-style
[編集]下ボーダーのスタイルを指定します。
- 例
border-bottom-style: dotted;
上記の例では、下部のボーダーに点線スタイルを指定しています。
border-bottom-width
[編集]下ボーダーの幅を指定します。
- 例
border-bottom-width: 3px;
上記の例では、下部のボーダー幅を 3px に指定しています。
border-collapse
[編集]テーブルのボーダーの結合方法を指定します。
- 例
border-collapse: collapse;
上記の例では、テーブルのボーダーが結合して表示されます。
border-color
[編集]ボーダーの色を指定します。複数の色を順番に指定することができます。
- 例
border-color: red green blue yellow;
上記の例では、順に赤、緑、青、黄色の色を指定しています。
border-image
[編集]ボーダー画像を指定します。
- 例
border-image: url("border.png") 30 round;
上記の例では、ボーダー画像として border.png を使用し、30% の割合で分割し、繰り返し表示します。
border-image-outset
[編集]ボーダー画像がボーダー領域からどれだけはみ出すかを指定します。
- 例
border-image-outset: 10px;
上記の例では、ボーダー画像が 10px はみ出すように指定しています。
border-image-repeat
[編集]ボーダー画像の繰り返し方法を指定します。
- 例
border-image-repeat: repeat;
上記の例では、ボーダー画像が繰り返し表示されます。
border-image-slice
[編集]ボーダー画像の分割方法を指定します。
- 例
border-image-slice: 30%;
上記の例では、ボーダー画像を 30% の位置で切り取って使用します。
border-image-source
[編集]ボーダー画像のソースを指定します。
- 例
border-image-source: url("border.png");
上記の例では、border.png をボーダー画像として指定しています。
border-image-width
[編集]ボーダー画像の幅を指定します。
- 例
border-image-width: 1;
上記の例では、ボーダー画像の幅を 1 倍に設定しています。
border-left
[編集]左ボーダーを指定します。幅、スタイル、色を個別に設定できます。
- 例
border-left: 1px solid black;
上記の例では、左側に 1px の黒い実線ボーダーを指定しています。
border-left-color
[編集]左ボーダーの色を指定します。
- 例
border-left-color: red;
上記の例では、左側のボーダー色を赤に指定しています。
border-left-style
[編集]左ボーダーのスタイルを指定します。
- 例
border-left-style: dashed;
上記の例では、左側に破線ボーダーを指定しています。
border-left-width
[編集]左ボーダーの幅を指定します。
- 例
border-left-width: 2px;
上記の例では、左側のボーダー幅を 2px に設定しています。
border-radius
[編集]全体の角丸を指定します。四隅の角に丸みを付けることができます。
- 例
border-radius: 10px;
上記の例では、全ての角に 10px の丸みを指定しています。
border-right
[編集]右ボーダーを指定します。幅、スタイル、色を個別に設定できます。
- 例
border-right: 1px solid black;
上記の例では、右側に 1px の黒い実線ボーダーを指定しています。
border-right-color
[編集]右ボーダーの色を指定します。
- 例
border-right-color: blue;
上記の例では、右側のボーダー色を青に指定しています。
border-right-style
[編集]右ボーダーのスタイルを指定します。
- 例
border-right-style: dotted;
上記の例では、右側に点線ボーダーを指定しています。
border-right-width
[編集]右ボーダーの幅を指定します。
- 例
border-right-width: 3px;
上記の例では、右側のボーダー幅を 3px に設定しています。
border-spacing
[編集]テーブルセルの間隔を指定します。
- 例
border-spacing: 2px 5px;
上記の例では、テーブルセル間に 2px の水平間隔と 5px の垂直間隔を指定しています。
border-style
[編集]ボーダーのスタイルを指定します。複数のスタイルを指定できます。
- 例
border-style: solid dashed dotted double;
上記の例では、ボーダーのスタイルを順に実線、破線、点線、二重線に指定しています。
border-top
[編集]上ボーダーを指定します。幅、スタイル、色を個別に設定できます。
- 例
border-top: 1px solid black;
上記の例では、上部に 1px の黒い実線ボーダーを指定しています。
border-top-color
[編集]上ボーダーの色を指定します。
- 例
border-top-color: green;
上記の例では、上部のボーダー色を緑に指定しています。
border-top-left-radius
[編集]左上の角丸を指定します。
- 例
border-top-left-radius: 10px;
上記の例では、左上の角に 10px の丸みを指定しています。
border-top-right-radius
[編集]右上の角丸を指定します。
- 例
border-top-right-radius: 10px;
上記の例では、右上の角に 10px の丸みを指定しています。
border-top-style
[編集]上ボーダーのスタイルを指定します。
- 例
border-top-style: groove;
上記の例では、上部に溝線スタイルのボーダーを指定しています。
border-top-width
[編集]上ボーダーの幅を指定します。
- 例
border-top-width: 2px;
上記の例では、上部のボーダー幅を 2px に設定しています。
border-width
[編集]ボーダーの幅を指定します。順番に指定することもできます。
- 例
border-width: 1px 2px 3px 4px;
上記の例では、上・右・下・左のボーダー幅をそれぞれ指定しています。
まとめ
[編集]borderプロパティを使うことで、要素に枠線を追加でき、太さ、スタイル、色を自由にカスタマイズできます。- 個別の辺に対して異なるボーダーを指定したり、角を丸くしたりすることも可能です。
- ボーダーはウェブデザインにおいて、要素の区切りや視覚的な強調に非常に有用です。