CSS アウトライン

❮ 前章へ 次章へ ❯

CSS アウトライン・プロパティ

アウトラインは 要素の周りでボーダーの外側に描かれる線です。これは、要素を"目立たせる"ために使われます。

CSS outline プロパティは、アウトラインのスタイル、色、幅を指定します。

この要素には、黒の細線と幅が 10px である緑色の二重アウトラインが設定されています。

CSS アウトライン

アウトラインは、要素を「目立たせる」ために要素の周り（ボーダーの外側）に描かれる線です。

しかし、outline プロパティは border プロパティとは異なります - outline は要素の大きさには含まれません； 要素全体の幅や高さは、アウトラインの幅による影響をうけません。

アウトラインのスタイル

outline-style プロパティは アウトラインのスタイルを指定します。

outline-style プロパティには 次の値の 1 つを指定することができます：

次の例では、最初に各 <p> 要素の周りに細い黒のボーダーを設定した後で、 いろいろな outline-style の値を表示します：

例

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

結果：

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Try it Yourself ❯

注:outline-style プロパティが設定されていない限り、後述する CSS アウトライン・プロパティのいずれも効果がありません！

アウトラインの色

outline-color プロパティは、アウトラインの色を設定するために使用します。

色は次により設定することができます：

例

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

結果：

A colored outline.

Try it Yourself ❯

アウトラインの幅

outline-width プロパティは、アウトラインの幅を指定します。

幅は、(px、pt、cm、em 等で) サイズを指定するか、定義済みの 3 つの値：thin、medium、thick の何れかを使用して設定することができます。

例

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

結果：

A thick outline.

A thinner outline.

Try it Yourself ❯

アウトライン - ショートハンド・プロパティ

コードを短くするために、1 つのプロパティで個別 outline プロパティ全てを指定することも可能です。

outline プロパティは、下の各個別 outliner プロパティを設定するためのショートハンド・プロパティです：

例

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

結果：

An outline.

Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯

全ての CSS アウトラインプロパティ

プロパティ 説明
outline 1 回の宣言でアウトラインの全プロパティを設定する
outline-color アウトラインの色を設定する
outline-offset アウトラインと要素のエッジ、またはボーダーとの間のスペースを指定する
outline-style アウトラインのスタイルを設定する
outline-width アウトラインの幅を設定する

❮ 前章へ 次章へ ❯