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

outline-styleプロパティは、HTML要素の周囲に表示されるアウトライン（輪郭線）のスタイル（種類）を設定するために使用されるプロパティです。アウトラインは、主に要素がフォーカスされた際やデバッグ目的で視覚的な補助として表示され、ボーダー（境界線）とは異なり、要素のレイアウトやサイズに影響を与えない点が特徴です。

このプロパティを使用することで、アウトラインを実線、点線、破線など様々な形状で表示させることができます。具体的な値としては、「none」（アウトラインを表示しない）、「dotted」（点線）、「dashed」（破線）、「solid」（実線）、「double」（二重線）、「groove」（彫り込み線）、「ridge」（浮き出し線）、「inset」（内側に押し込まれたような線）、「outset」（外側に飛び出したような線）などがあります。これらのキーワード値を指定することで、視覚的に異なるアウトラインを表現することが可能です。

outline-styleは、アウトラインの幅を設定するoutline-widthプロパティや、色を設定するoutline-colorプロパティと組み合わせて使用することが一般的です。また、これら三つのプロパティはoutlineというショートハンドプロパティ一つでまとめて設定することもできます。ウェブページにおけるユーザーインターフェースのアクセシビリティ向上や、要素の状態を視覚的に分かりやすく示すために重要な役割を果たします。

Copy
1outline-style: solid;

引数なし

引数はありません

戻り値なし

戻り値はありません