【CSS Modules】outline省略形プロパティの使い方

outlineプロパティは、CSSにおいて要素のアウトライン（輪郭線）を一括で設定するためのショートハンドプロパティです。このプロパティを使用することで、outline-width（アウトラインの太さ）、outline-style（アウトラインのスタイル）、outline-color（アウトラインの色）の3つの個別プロパティを一度に指定できます。

要素の周囲に境界線を表示するborderプロパティと似ていますが、outlineプロパティには重要な違いがあります。outlineは要素のボックスモデルに影響を与えず、要素の幅や高さ、レイアウトを変更することなく描画されます。つまり、アウトラインが表示されても他の要素の位置がずれることはありません。これは、主に要素がキーボードでフォーカスされた際に、その要素を視覚的に強調するために利用されます。

たとえば、ボタンや入力フィールドがフォーカスされたとき、ユーザーはアウトラインによって現在どの要素が操作可能であるかを認識できます。これはウェブサイトのアクセシビリティを向上させる上で非常に重要です。outline: 2px solid blue; のように記述すると、要素の周囲に青い2ピクセルの実線のアウトラインが表示されます。

アクセシビリティの観点から、outlineを完全に無効化することは一般的には推奨されません。もしデザイン上の理由でoutlineをカスタマイズまたは非表示にする場合は、代替となる視覚的なフォーカスインジケータを必ず提供することが望ましいです。このプロパティは、ユーザーインターフェースにおけるナビゲーションの明確さと使いやすさを保証するために不可欠な役割を担っています。

Copy
1outline: 2px solid red;

引数なし

引数はありません

戻り値なし

戻り値はありません