CSSのoutlineプロパティとは？要素の外側に線を引く方法を実例付きで解説

Webデザインをしていると、ページ上の要素の周りにアウトライン（輪郭線）を表示したい場面があります。例えば、目立たせたいボックスをデザインする場合、色付きのアウトラインを追加することで、ユーザーの注意をその要素へ引きつけることができます。

そこで役立つのが、CSSのoutlineプロパティです。outlineプロパティを使えば、要素の境界線（border）の外側に線を追加し、Webページ上で要素を目立たせられます。

この記事では、具体的なコード例を交えながら、アウトラインの基本と、outlineプロパティを使ってWeb要素の外側に線を描く方法を解説します。読み終える頃には、outlineプロパティを自信を持って使いこなせるようになっているでしょう。

CSSのアウトライン（outline）とは

アウトラインとは、要素の境界線の外側に描かれる線のことです。outlineプロパティの最も一般的な用途は、HTML要素をハイライトして強調することです。

以下は、CSSでアウトラインがどのように適用されるかを示した図です。

この図が示すように、アウトラインはWeb要素のコンテンツおよび境界線の外側に表示され、要素の最も外側のレイヤーとして機能します。

CSSにおいて、border（境界線）とoutline（アウトライン）にはいくつかの重要な違いがあります。

1. 描画位置の違い： 前述のとおり、アウトラインは要素の外側に描画されます（borderは要素の内側）。そのため、宣言したアウトラインが、ページ上の他のコンテンツと重なる可能性があります。ただし、アウトラインはスペースを占有しないため、重なり以外の点では周囲のレイアウトに影響を与えません。

2. 要素サイズへの影響： アウトラインは要素の寸法の一部として扱われません。つまり、アウトラインを指定しても、要素のwidth（幅）やheight（高さ）の値には一切影響しません。

3. 辺ごとの個別設定不可： borderと異なり、アウトラインは各辺ごとに異なる幅・色・スタイルを設定できません。要素に指定したアウトラインは、必ず全ての辺で一貫した見た目になります。

CSSのborderについてさらに詳しく学びたい方は、CSS borderに関するガイドも併せてご覧ください。

CSS outlineプロパティの基本

outlineプロパティは、Webページ上の要素にアウトラインを追加するために使用します。

outlineプロパティは、アウトラインの見た目をカスタマイズするための複数のサブプロパティをまとめて指定できるショートハンド（省略記法）です。主なサブプロパティは次の3つです。

outline-color： アウトラインの色を設定する
outline-style： アウトラインのスタイルを設定する
outline-width： アウトラインの幅を設定する

outlineプロパティの構文は次のとおりです。

outline: outline-color outline-style outline-width;

なお、outlineプロパティで指定する値は、特定の順序で記述する必要はありません。

それでは、実際の例でoutlineプロパティの動作を確認しましょう。「This is a box」というテキストを含むボックスの周りに、次の特徴を持つアウトラインを作成したいとします。

アウトラインの色は赤（red）
アウトラインの太さは3px
アウトラインのスタイルは点線（dotted）

さらに、アウトラインに加えて1pxの太さの黒い境界線も付けます。この場合、次のようなコードを書きます。

<html>
<p class="outlineExample">This is a box.</p>
</html>

<style>
.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline: red dotted 3px;
}
</style>

このコードでは、赤色で表示されるアウトラインと、黒色で表示される境界線の両方を宣言しています。境界線は1pxの太さでsolid（実線）スタイル、アウトラインは赤色・3pxの太さ・dotted（点線）スタイルです。また、ボックスの幅は100pxに設定しています。

実行結果を見ると、アウトラインが境界線の外側に表示されていることがわかります。

CSS outlineのサブプロパティ詳細

ここからは、outlineプロパティを構成する各サブプロパティが、それぞれどのように機能するのかを個別に見ていきます。

outline-width（アウトラインの幅）

outline-widthプロパティは、Web要素に適用するアウトラインの幅を指定します。指定できる値は次のとおりです。

thin： 細い線（デフォルトで1px）
medium： 中程度の線（デフォルトで3px）
thick： 太い線（デフォルトで5px）
具体的な長さ： px、pt、cm、em、remなど、任意のCSSの長さ単位で指定

例えば、3px（medium）の赤いsolidアウトラインを持つボックスをデザインし、さらに1px幅の黒いsolid境界線を付けたい場合は、次のコードを使用します。

<html>
<p class="outlineExample">This is a box.</p>
</html>

<style>
.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: red;
	outline-width: medium;
}
</style>

この例のコードを分解して見てみましょう。まず、ボックスの幅を100pxに設定し、1px幅の黒いsolid境界線を定義しています。

続いて、3つのサブプロパティを使ってアウトラインを定義しています。

outline-styleプロパティでアウトラインのスタイルをsolidに設定し、outline-colorプロパティで色を赤に設定しています（それぞれの詳細は後述します）。そして、outline-widthプロパティでアウトラインの幅をmedium（デフォルトで3px）に指定しています。

実行結果として、ボックスには3px幅の赤いアウトラインが表示されます。

outline-color（アウトラインの色）

outline-colorプロパティを使用すると、特定のWeb要素に割り当てるアウトラインの色を設定できます。指定できるCSSカラーの形式は次のとおりです。

name： 色名（例：blue、pink）
hex： 16進数カラーコード（例：#f7f7f7）
rgb： RGB値（例：rgb(102, 211, 56)）
invert： アウトラインの色を反転させる
hsl： HSL値（例：hsl(0, 25%, 50%)）

例えば、ボックスの周りに青色のアウトラインを表示したいとします。アウトラインは3pxの太さで、solidスタイルを使用するものとします。この場合、次のコードでボックスを作成できます。

<html>
<p class="outlineExample">This is a box.</p>
</html>

<style>
.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: blue;
	outline-width: medium;
}
</style>

この例では、outline-colorプロパティでアウトラインの色を青に設定し、outline-styleプロパティでスタイルをsolidに、outline-widthプロパティで幅を3px（medium）に指定しています。

また、ボックスの幅を100pxにし、1pxの黒いsolid境界線を付けることで、アウトラインが視覚的に確認しやすくなっています。

outline-style（アウトラインのスタイル）

outline-styleプロパティを使用すると、アウトラインのスタイルを設定できます。指定できる値は次のとおりです。

dotted（点線）
dashed（破線）
groove（溝状の線）
ridge（稜線状の線）
solid（実線）
double（二重線）
inset（内側に沈んだ線）
outset（外側に浮き出た線）
none（表示なし）
hidden（非表示）

例えば、ridgeを指定すれば稜線状のアウトラインが、insetを指定すれば内側に沈んだアウトラインが、grooveを指定すれば溝状のアウトラインが作成されます。これらのスタイルの違いを理解するために、アウトライン付きのボックスを作成し、各スタイルを個別に適用して比較してみましょう。まず、ボックスの基本となるコードは次のとおりです。

<html>
<p class="outlineExample">This is a box.</p>
</html>

<style>
.outlineExample {
	width: 300px;
	border: black solid 1px;
	outline-color: blue;
	outline-width: medium;
}
</style>

このコードは、3px幅（medium）の青いアウトラインを持つボックスを作成します。ボックスには1px幅の黒いsolid境界線が付いています。

ボックスのアウトラインスタイルを変更するには、outline-styleプロパティを使用します。例えば、double（二重線）のアウトラインスタイルを持つボックスにしたい場合は、次のようなCSSを書きます。

<style>
.outlineExample {
	outline-style: double;
}
</style>

以下は、outline-styleプロパティに指定できる全ての値を適用したときの表示結果をまとめた図です。

CSS outline-offsetでアウトラインの位置を調整する

outline-offsetプロパティは、アウトラインと要素の境界線の間にスペースを追加します。

outline-offsetプロパティによって定義される、アウトラインと境界線の間のスペースは透明です。また、outline-offsetプロパティは独立したプロパティであり、outlineのショートハンド内では使用できない点に注意してください。

例えば、1px幅の黒いsolid境界線と、2px幅の赤いsolidアウトラインを持つボックスをデザインし、アウトラインを境界線の端から10px外側にオフセットさせたいとします。この場合、次のコードを使用します。

<html>
<p class="outlineExample">This is a box.</p>
</html>

<style>
.outlineExample {
	width: 200px;
	border: black solid 1px;
	outline: red 2px solid;
	outline-offset: 10px;
}
</style>

この例では、幅200pxのボックスに対して、1px幅の黒いsolid境界線と、2px幅の赤いsolidアウトラインを定義しています。さらにoutline-offsetを10pxに指定しているため、境界線の各辺とアウトラインの間に10pxの隙間が生まれます。

まとめ

CSSのoutlineプロパティは、Web要素の境界線の周りにアウトラインを定義するために使用されます。

outlineプロパティは、カスタムアウトラインを作成するための3つのサブプロパティ（outline-color、outline-width、outline-style）をまとめて指定できるショートハンドです。さらに、outline-offsetプロパティを使えば、アウトラインと要素の境界線の間にスペースを追加できます。

この記事では、実例を交えながら、CSSにおけるアウトラインの基本、outlineプロパティとそのサブプロパティの使い方、そしてoutline-offsetプロパティの使い方を解説しました。これであなたも、CSSのプロフェッショナルのようにアウトラインをデザインするための知識を身につけたはずです。ぜひ実際のプロジェクトで試してみてください。

CSSメディアクエリ

CSS 2D変換入門！transformプロパティで実現する移動・回転・拡大縮小・傾斜の使い方

CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け
CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置）デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置）要素は通常の文書フロー内に
CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説
CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-