outline

アウトライン（その他）

意味外側に描画される線

outlineとは？

outlineプロパティは、要素の外側に線を描画するために使用します。この線はボーダーとは異なり、要素のレイアウトやサイズに影響を与えません。アウトラインは主にアクセシビリティのためにフォーカスされた要素を強調するのに使われますが、デザイン上の目的で使用することもあります。

outlineの具体的な使い方

フォーカス時のアウトラインを設定する例

<style>
    input:focus {
        outline: 2px solid blue;
    }
</style>

<input type='text' placeholder='フォーカス時に青いアウトラインが表示されます'>

フォーカス（選択された状態）がinput要素にある時に、その要素の外側に青色の2ピクセルの太さのアウトラインを描画します。

カスタムアウトラインを適用する例

<style>
  .custom-outline {
    outline: 3px dashed red;
    outline-offset: 5px;
  }
</style>

<div class="custom-outline">
  カスタムアウトラインのある要素
</div>

要素に赤色の破線のアウトラインを適用し、要素の境界線から5ピクセル離して表示します。

outlineに関するよくある質問

Q. outlineとborderの違いは？

A. outlineはborderと似ていますが、要素のサイズや位置に影響を与えません。また、outlineは常に四角形で、角丸にはなりません。主にフォーカス表示や装飾に使用され、レイアウトに影響を与えたくない場合に適しています。

Q. outline-offsetとは？

A. outline-offsetプロパティを使用すると、outlineと要素の境界線との間隔を設定できます。正の値で外側に、負の値で内側に移動させることができます。これにより、より柔軟なデザインが可能になります。

Q. アウトラインを非表示にできる？

A. はい、outline: noneを使用してアウトラインを非表示にできます。ただし、アクセシビリティの観点から、特にフォーカス時のアウトラインを完全に削除することは推奨されません。代わりに、カスタムスタイルでフォーカス表示を実装することをお勧めします。

outlineが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのoutlineやlist-style、opacity、z-index、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。