アウトラインとボーダーはよく似ていますが、違いがないわけではありません。たとえば、次のようになります。
- 要素の 4 方向の境界線のスタイル、幅、および色は個別に設定できますが、要素の 4 方向のアウトラインの幅、スタイル、および色は同じであり、個別に設定することはできません。
- 境界線の幅は要素のサイズに直接影響しますが、アウトラインはページのスペースを占有せず、ページのレイアウトにも影響しませんが、アウトラインはページ上の他の要素と重なります。
- アウトラインは、周囲の要素とオーバーラップすることを除いて、周囲の要素に影響を与えません。
- 境界線は要素のサイズの一部ですが、アウトラインはそうではありません。つまり、アウトラインの幅に関係なく、要素のサイズは変わりません。
- アウトラインは非長方形にすることができますが、円形のアウトラインを直接作成することはできません。
次のプロパティを使用して、要素のアウトラインを設定できます。
- 輪郭の色: 輪郭の色を設定します。
- アウトライン スタイル: アウトライン スタイルを設定します。
- アウトライン幅: アウトラインの幅を設定します。
- アウトライン: アウトラインの簡略属性。アウトライン属性を使用して、上記の 3 つのアウトライン属性を同時に設定できます。
- Outline-offset: アウトラインとボーダーの間の距離を設定します。
1.outline-style -アウトラインスタイル
Outline-style 属性はアウトラインのスタイルを設定でき、属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| none | デフォルト、アウトラインなし |
| dotted | 点のような輪郭を定義する |
| dashed | 破線のアウトラインを定義する |
| solid | 実線を定義する |
| double | 二重の実線のアウトラインを定義します。2 つの実線の間の幅は、outline-width の値に等しくなります。 |
| groove | Outline-color の値に応じて、3D 溝の輪郭を定義します。 |
| ridge | 3D 溝のアウトラインを定義します。具体的な効果は、outline-color の値によって異なります |
| inset | Outline-color の値に応じて、3D の凹状のアウトラインを定義します。 |
| outset | Outline-color の値に応じて、3D 凸状アウトラインを定義します。 |
| inherit | 親要素からアウトライン スタイルの設定を継承する |
[例] Outline-style 属性を使用して、アウトラインのスタイルを設定します。
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
width: 100px;
height: 100px;
margin: 10px;
float: left;
text-align: center;
line-height: 100px;
/*輪廓の効果がより直感的に分かるよう、予め輪廓の幅と色を設定する*/
outline-width: 8px;
outline-color: #AAAAAA;
}
.dotted {
outline-style: dotted;
}
.dashed {
outline-style: dashed;
}
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
</style>
</head>
<body>
<span class="dotted">点線</span>
<span class="dashed">破線</span>
<span class="solid">実線</span>
<span class="double">二重線</span>
<span class="groove">グルーブ</span>
<span class="ridge">リッジ</span>
<span class="inset">インセット</span>
<span class="outset">アウトセット</span>
</body>
</html> 実行結果は次の図のとおりです。
注: アウトラインの既定のスタイルは [なし] であるため、要素の周囲に表示されるアウトラインのアウトライン スタイルを指定する必要があります。
2.outline-width (アウトライン幅)
Outline-width 属性は、アウトラインの幅を設定するために使用されます. Outline-style 属性の値が none でない場合にのみ、outline-width 属性が有効になります.アウトライン幅属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| thin | 輪郭を細くする |
| medium | デフォルトでは、中幅のアウトラインが設定されます |
| thick | 輪郭を太くする |
| length | 特定の値と単位 (px、em、cm など) を使用して、アウトラインの幅を設定します。 |
| inherit | 親要素からアウトラインの幅を継承する |
[例] Outline-width 属性を使用して、アウトラインの幅を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
height: 150px;
outline-style: solid;
outline-width: 5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 実行結果は次の図のとおりです。
3.outline-color (アウトラインカラー)
Outline-color 属性は輪郭の色を設定するために使用され、属性のオプション値は次のとおりです。
| 価値 | 説明 |
|---|---|
| color | color や border-color などの属性で色を設定するのと同じように、輪郭の色を指定します 特定の色は、色名、16 進数コード、および RGB 値の形式で定義できます。 |
| invert | 背景色の反転色を使用してアウトラインの色を設定します。IE および Opera ブラウザーでのみ有効です。 |
| inherit | 親要素から輪郭色の設定を引き継ぐ |
注: アウトラインの幅またはアウトラインの色の属性のみが設定されている場合、アウトラインの設定は有効になりません。 Outline-width 属性と Outline-color 属性を使用してアウトラインの幅と色を設定する前に、outline-style 属性を使用してアウトライン スタイルを設定する必要があります。
[例] Outline-color 属性を使用して、アウトラインの色を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #CCC;
}
p.one {
outline-style: solid;
outline-width: 5px;
outline-color: red;
}
p.two {
outline-style: groove;
outline-width: 6px;
outline-color: #AAA;
}
p.three {
outline-style: inset;
outline-width: 5px;
outline-color: rgb(217, 0, 217);
}
</style>
</head>
<body>
<p class="one">赤</p>
<p class="two">#AAA</p>
<p class="three">rgb(217, 0, 217)</p>
</body>
</html> 実行結果は次の図のとおりです。
4.概要
アウトライン属性は、上記の3つの属性(outline-width、outline-style、およびoutline-color)の省略形です.outline属性を使用すると、これら3つの属性の1つまたは複数を同時に設定できます.構文形式は次のとおりです.次のとおりです。
outline: outline-width outline-style outline-color;
アウトライン属性を使用する場合、outline-width、outline-style、および Outline-color パラメータの順序は固定されていません. 上記の構文で導入された順序に従うことも、好みに応じて順序を変更することもできます.
[例] 要素の輪郭を設定するには、outline 属性を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
outline: solid 5px red;
}
p.two {
outline: #AAA groove 6px;
}
p.three {
outline: 5px inset rgb(217, 0, 217);
}
</style>
</head>
<body>
<p class="one">赤色</p>
<p class="two">#AAA</p>
<p class="three">rgb(217、0、217)</p>
</body>
</html> 実行結果は次の図のとおりです。
デフォルトでは, アウトラインはボーダーに近いです. アウトラインとボーダーの間の距離は、outline-offset 属性を介して設定できます. 属性のオプションの値は次のとおりです:
| 価値 | 説明 |
|---|---|
| length | アウトラインと境界線の間の距離を特定の値と単位の形式で設定します。単位は負の値にすることもできます |
| inherit | 親要素から Outline-offset 属性の値を継承する |
[例] Outline-offset を使用して、アウトラインと境界線の間の距離を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
margin: 50px 0px 0px 50px;
border: 1px solid red;
outline: 6px inset #AAA;
outline-offset: 10px;
}
</style>
</head>
<body>
<div></div>
</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)
