CSS outlineとborderの違い: outlineとborderの違いを探る
この記事では、CSSの`outline`プロパティと`border`プロパティの違いについて詳しく解説し、これらの2つの境界線のスタイルをより深く理解し、使いこなせるようにします。定義、用途、特徴、使用上の推奨事項など、あらゆる側面から比較分析し、参考になるサンプルコードも紹介します。
定義と用途
border:- 要素の内側の余白と外側の余白の間の領域を定義します。ボックスモデルの一部であり、目に見える境界線を作成するために使用します。
outline:- 要素の境界線の外側に描画される線です。ボックスモデルには含まれず、主に要素のフォーカス状態を示すために使用します。
特徴の違い
borderとoutlineの主な違いは以下の通りです。
| 特徴 | border |
outline |
|---|---|---|
| ボックスモデル | 影響する | 影響しない |
| 描画位置 | 要素の境界線の内側 | 要素の境界線の外側 |
| 角丸効果 | border-radiusプロパティで適用可能 |
border-radiusプロパティで適用可能 |
| 透明度 | 設定不可 | 設定可能 |
| スタイル継承 | 子要素に継承される | 子要素に継承されない |
outline 属性概説：
outline 属性は、HTML 要素の輪郭線（アウトライン）のスタイル、色、幅を設定するための CSS プロパティです。outline を使用することで、要素の外側に描かれる輪郭線を簡単にカスタマイズできます。この輪郭線は、要素のボーダーとは異なり、ページのレイアウトや要素のサイズには影響を与えません。
outline 関連のプロパティ：
outline-style: アウトラインのスタイルを指定します。例：solid、dotted、dashedなど。outline-color: アウトラインの色を指定します。例：red、blue、transparentなど。outline-width: アウトラインの幅を指定します。例：thin、medium、thick、または具体的な値（2pxなど）。outline-offset: 要素の外側にどれだけアウトラインを描くかを指定します。例：5px。outline: これらのプロパティをまとめて設定するための省略形です。例：outline: 2px solid red;。
outline と border の共通点：
outline と border は、どちらも要素の周りに線を引く機能を持っています。ただし、outline は要素の外側に描画され、border は要素の一部として描画される点が異なります。
outline と border の重要な違い：レイアウトに影響しない
outline の最大の特徴は、ページレイアウトに影響を与えないことです。border はボックスモデルの一部であり、要素のサイズに含まれるため、レイアウトが変化する可能性がありますが、outline は要素の外部に描かれるため、他の要素を押しのけることなく表示されます。
例：outline と border の違い
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>outline と border の違い</title>
<style>
.with-border {
display: inline-block;
padding: 10px;
border: 3px solid blue;
transition: border 0.3s;
}
.with-outline {
display: inline-block;
padding: 10px;
outline: 3px solid red;
transition: outline 0.3s;
}
.with-border:hover {
border-width: 6px;
}
.with-outline:hover {
outline-width: 6px;
}
</style>
</head>
<body>
<div>
<span class="with-border">border 付き要素</span>
<span class="with-outline">outline 付き要素</span>
</div>
</body>
</html>解説：
borderを使用すると、ホバー時にボーダーの幅が増え、それに伴って他の要素も移動します。- 一方、
outlineは要素の外側に描かれるため、ホバー時にアウトラインの幅が増えても他の要素には影響を与えません。
理由：
borderはボックスモデルの一部として描画され、要素のサイズに影響を与えるため、レイアウトに影響を及ぼします。outlineは要素の外側に描かれ、レイアウトには関与しないため、ページ内の他の要素に影響を与えません。
outline は、特にフォーム要素のフォーカス時のスタイルでよく使用されます。例えば、input 要素にフォーカスが当たった際にアウトラインが表示され、視覚的にユーザーにわかりやすく示すことが可能です。
outline の制限：上下左右の個別設定が不可
border は上下左右に個別に異なるスタイルを設定できますが、outline はそのような柔軟性がありません。outline を設定する場合、すべての辺に対して同じスタイル、色、幅が適用されます。
例：outline の制限
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>outline の制限</title>
<style>
.border-example {
border-top: 5px solid red;
border-right: 3px dotted blue;
border-bottom: 2px dashed green;
border-left: 4px double black;
}
.outline-example {
outline: 5px solid purple;
}
</style>
</head>
<body>
<div class="border-example">個別に設定された border</div>
<div class="outline-example">統一された outline</div>
</body>
</html>解説：
borderはそれぞれの辺に異なるスタイルを適用できますが、outlineは単一のスタイルしか設定できないため、同じデザインがすべての辺に適用されます。
まとめ：outline の使用シーン
outline は、ページのレイアウトに影響を与えない視覚的な強調を行う場合に最適です。特に、ホバーやフォーカスの状態で使うことで、ユーザーに重要なフィードバックを提供しつつ、他の要素の配置に影響を与えないデザインを作ることができます。
まとめポイント：
outlineは、要素の外側に描かれる輪郭線を設定し、レイアウトに影響を与えません。borderはボックスモデルの一部として扱われ、レイアウトに影響を与える可能性があります。- 個別の辺に異なるスタイルを適用する場合は
border、レイアウトを変えずに視覚的な強調をしたい場合はoutlineを選ぶと良いでしょう。
必要に応じて適切なプロパティを選択し、デザインに応じた柔軟なスタイル設定を行うことが重要です。
使用上の推奨事項
- ページレイアウトや見た目に影響を与える可能性があるため、
outlineの使いすぎには注意しましょう。 - フォーカスを取得した要素に
outlineスタイルを追加するには、:focus擬似クラスを使用すると、ユーザーエクスペリエンスを向上させることができます。 - 実際のニーズに応じて適切な境界線スタイルを選択し、異なるプロパティ間の違いに注意しましょう。
サンプルコード
outlineを使用した例:
<a href="#">リンク</a>
<style>
a:focus {
outline: 3px solid #007bff;
}
</style>
このコードは、リンクにフォーカスが当たった際に、青色のアウトラインを表示します。
参考文献
Q&A
- Q:
outlineとborderの使い分け方がわかりません。
A: 基本的に、要素の装飾やレイアウトに影響を与えたい場合はborderを、フォーカス状態を示したい場合はoutlineを使用します。 - Q:
outlineの色や太さを変更できますか？
A: はい、outline-color、outline-width、outline-styleプロパティで変更できます。 - Q:
outlineを非表示にするにはどうすれば良いですか？
A:outline: none;と指定することで非表示にできます。
その他の参考記事: