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

outline-offsetプロパティは、CSSにおいて、要素の輪郭線（outline）とその要素の境界線との間の距離を保持するプロパティです。このプロパティは、outlineプロパティによって設定される輪郭線の表示位置を調整するために使用されます。outlineは要素の視覚的な境界線（border）のさらに外側に描かれる線で、主にアクセシビリティの目的で、要素がフォーカスされた際などに表示されますが、borderとは異なり要素のレイアウトには影響を与えません。

outline-offsetプロパティの値には、長さの単位（例: px, em, remなど）を指定します。正の値を指定すると、輪郭線は要素の視覚的な境界線から指定された距離だけ外側へ離れて描画されます。例えば、outline-offset: 5px;と設定すると、輪郭線は要素の境界線から5ピクセル外側に表示されます。一方、負の値を指定することも可能で、この場合、輪郭線は要素の境界線と重なるか、または境界線の内側に引き込まれるように表示されます。

このプロパティを効果的に使用するには、まずoutlineプロパティ自体が要素に適用されている必要があります。outlineが設定されていない場合、outline-offsetプロパティは何も視覚的な変化をもたらしません。主にキーボード操作で要素にフォーカスが当たった際の視覚的なフィードバックを調整したり、デザイン要件に合わせて輪郭線の位置を微調整したりする際に役立ちます。これにより、ユーザーが現在どの要素を操作しているのかを明確に伝えることができ、ウェブサイトのユーザビリティとアクセシビリティの向上に貢献します。

Copy
1outline-offset: 5px;

引数なし

引数はありません

戻り値なし

戻り値はありません