- border-style: 実線、破線などの境界線のスタイルを設定します。
- border-width: 境界線の幅 (太さ) を設定します。
- border-color: 境界線の色を設定します。
- border: 上記の 3 つの border プロパティの略。
1.border-style
border-style 属性は、要素内のすべての境界線のスタイルを設定するか、特定の境界線のスタイルを個別に設定するために使用され、その構文は次のとおりです。
border-style: border-top-style border-right-style border-bottom-style border-left-style;
border-style 属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| none | リムレス |
| hidden | 「なし」と同様に、境界線を非表示にします |
| dotted | 点線の境界線を定義 |
| dashed | 破線の境界線を定義する |
| solid | 実線の境界線を定義する |
| double | 二重実線の境界線を定義します。二重実線の境界線の幅は、border-width の値に等しくなります。 |
| groove | 効果が border-color の値に依存する 3D ノッチ境界を定義します |
| ridge | 効果が border-color の値に依存する 3D 稜線境界を定義します |
| inset | 効果が border-color の値に依存する 3D インセット ボーダーを定義します |
| outset | 3D で強調表示された境界線を定義します。その効果は、border-color の値に依存します。 |
| inherit | 親要素からボーダー スタイルを継承する |
border-style プロパティは、さまざまな方法で使用できます。
- 4 つのパラメーターがすべて指定されている場合、ボーダーの 4 辺のスタイルは、上、右、下、左の順に設定されます。
- 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
- パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。
border-style 属性を使用して要素の境界線スタイルを設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線のスタイルを設定することもできます。
- border-bottom-style: 下ボーダーのスタイルを設定します。
- border-top-style: 上のボーダーのスタイルを設定します。
- border-left-style: 左ボーダーのスタイルを設定します。
- border-right-style: 右ボーダーのスタイルを設定します。
[例] 要素にボーダーを設定するには、border-style 属性を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 100px;
float: left;
margin: 10px;
border-width: 5px;
border-color: red;
text-align: center;
}
.none {
border-style: none;
}
.hidden {
border-style: hidden;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
.four {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: dotted;
}
</style>
</head>
<body>
<p class="none">none</p>
<p class="hidden">hidden</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="four">four</p>
</body>
</html> 実行結果は次の図のとおりです。
2.boder-width
border-width 属性は、要素内のすべての境界線の幅を設定するか、境界線のみの幅を設定するために使用され、その構文は次のとおりです。
border-width: border-top-width border-right-width border-bottom-width border-left-width;
border-width 属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| thin | より細い境界線を定義する |
| medium | デフォルト値。中幅の境界線を定義します |
| thick | 太い境界線を定義する |
| length | 値と単位の形式を使用して、2px などの特定の境界線の幅を設定します |
| inherit | 親要素からボーダーの幅を継承する |
thin、medium、thick の 3 つのキーワードには固定値がなく、その値はブラウザーによって異なります.たとえば、Chrome ブラウザーでは、3 つのキーワードの値はそれぞれ 1px、3px、および 5px です。
border-style 属性と同様に、border-width 属性もいくつかの異なる使用法をサポートしています。
- 4 つのパラメーターがすべて指定されている場合、ボーダーの 4 つの辺の幅は、上、右、下、左の順に設定されます。
- 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
- パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。
border-width 属性を使用して要素の境界線の幅を設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線の幅を設定することもできます。
- border-bottom-width: 下の境界線の幅を設定します。
- border-top-width: 上の境界線の幅を設定します。
- border-left-width: 左ボーダーの幅を設定します。
- border-right-width: 右ボーダーの幅を設定します。
【例】border-widthでボーダーの幅を設定：
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 100px;
margin: 5px;
float: left;
border-style: solid;
text-align: center;
}
.one{
border-width: thin medium thick;
}
.two{
border-width: 2px 5px;
}
.three{
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
.four{
border-width: thin;
}
</style>
</head>
<body>
<p class="one">一</p>
<p class="two">二</p>
<p class="three">三</p>
<p class="four">四</p>
</body>
</html> 実行結果は次の図のとおりです。
3.boder-color
border-color 属性は、要素内のすべての境界線の色を設定するか、境界線の色を個別に設定するために使用され、その構文は次のとおりです。
border-color: border-top-color border-right-color border-bottom-color border-left-color;
border-color 属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| color_name | 色の名前を使用して、赤などの境界線の色を設定します |
| hex_number | 色の 16 進値を使用して境界線の色を設定します (例: #ff0000)。 |
| rgb_number | rgb() 関数を使用して、rgb(255,0,0) などの境界線の色を設定します |
| transparent | デフォルト値、境界線の色を透明に設定 |
| inherit | 親要素から境界線の色を継承する |
border-style 属性と同様に、border-color 属性もいくつかの異なる使用法をサポートしています。
- 4 つのパラメータがすべて指定されている場合、フレームの 4 辺の色は、それぞれ上、右、下、左の順に設定されます。
- 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
- パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。
border-color 属性を使用して要素の境界線の色を設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線の色を設定することもできます。
- border-bottom-color: 下の境界線の色を設定します。
- border-top-color: 上の境界線の色を設定します。
- border-left-color: 左の境界線の色を設定します。
- border-right-color: 右ボーダーの色を設定します。
【例】border-colorで枠線の色を設定：
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 100px;
margin: 5px;
float: left;
border-style: solid;
border-width: 5px;
text-align: center;
}
.one{
border-color: green;
}
.two{
border-color: #0000CC;
}
.three{
border-top-color: #009900;
border-right-color: #FF0000;
border-bottom-color: #330000;
border-left-color: #0000CC;
}
</style>
</head>
<body>
<p class="one">一</p>
<p class="two">二</p>
<p class="three">三</p>
</body>
</html> 実行結果は次の図のとおりです。
border 属性は, 上で紹介した border-width, border-style, および border-color 属性の省略形です. border 属性は, 上記の 3 つの属性を同時に定義するために使用できます. 構文形式は次のとおりです.
ボーダー: ボーダー幅 ボーダースタイル ボーダーカラー;
その中で、border-width はボーダーの幅を設定するために使用され、border-style はボーダーのスタイルを設定するために使用され、border-color はボーダーの色を設定するために使用されます。
[例] 要素にボーダーを設定するには、border 属性を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 100px;
float: left;
margin: 5px;
}
.one {
border: 2px solid green;
}
.two {
border: 5px double red;
}
.three {
border: 3px dotted blue;
}
</style>
</head>
<body>
<p class="one">一</p>
<p class="two">二</p>
<p class="three">三</p>
</body>
</html> 実行結果は次の図のとおりです。
ヒント: ボーダー属性の 3 つのパラメーター (border-width、border-style、border-color) は、固定された順序に従う必要はなく、順序をシャッフルすることもできます。また、 border: soild red;のようにいずれかのパラメーターを省略することもでき、省略したパラメーターがパラメーターのデフォルト値として設定されます。
border 属性を使用して境界線の幅、スタイル、および色を均一に設定するだけでなく、次の属性を使用して、上、下、左、および右の境界線の幅、スタイル、および色を設定することもできます。エレメント：
- border-bottom: 下の境界線の幅、スタイル、および色を均一に設定します。
- border-top: 上の境界線の幅、スタイル、および色を一様に設定します。
- border-left: 左の境界線の幅、スタイル、および色を均一に設定します。
- border-right: 右ボーダーの幅、スタイル、および色を一様に設定します。
このセクションで紹介したこれらの属性を組み合わせることで、いくつかの予期しない効果を実現できます.たとえば、境界線を介して三角形を描くことができます.サンプルコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 0px;
margin: 5px;
float: left;
}
.top {
border: 50px solid;
border-color: red transparent transparent;
}
.bottom {
border-width: 0 50px 50px;
border-style: solid;
border-color: transparent transparent red;
}
.left {
border-top: 50px solid transparent;
border-left: 50px solid black;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.right {
border-width: 50px 50px 50px 0px;
border-style: solid;
border-color: transparent red transparent transparent;
}
</style>
</head>
<body>
<p class="top"></p>
<p class="bottom"></p>
<p class="left"></p>
<p class="right"></p>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
