【CSS Modules】outline-colorプロパティの使い方

outline-colorプロパティは、HTML要素に描画されるアウトラインの色を保持するプロパティです。アウトラインとは、要素がユーザーに選択された際や、キーボード操作でフォーカスが当たった際に、その要素の周囲に表示される線状の枠のことです。これは、主にユーザーインターフェース（UI）のアクセシビリティを高め、どの要素が現在操作対象になっているかを視覚的に分かりやすくするために使用されます。

このプロパティに指定できる値は、CSSで利用可能なすべての色表現です。例えば、redやblueといった色のキーワード、#RRGGBB形式の16進数カラーコード、rgb(0, 0, 0)形式のRGB関数、hsl(0, 100%, 50%)形式のHSL関数などが挙げられます。色の指定がない場合、初期値としてinvertが適用されることがあります。invertは、背景色と反転した色を自動的に適用することで、どのような背景に対してもアウトラインが視認しやすくなるようにする特別な値です。

アウトラインは、要素のレイアウトには影響を与えない点で、borderプロパティによる境界線とは異なります。要素の寸法を変更することなく、純粋に視覚的な情報を提供します。outline-colorプロパティは単体でも機能しますが、outline-styleプロパティで線の種類（例: solidやdashed）、outline-widthプロパティで線の太さを指定することで、アウトラインの見た目を完全に制御できます。これらのプロパティをまとめて設定するショートハンドプロパティとしてoutlineも存在します。これらのプロパティを適切に使用することで、ウェブページのユーザー体験を向上させることができます。

Copy
1outline-color: red;

引数なし

引数はありません

要素の外枠線の色を指定します。色は <color> 値で指定します。