【CSS Modules】outline-widthプロパティの使い方
outline-widthプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
outline-widthプロパティは、要素に設定されるアウトラインの太さを保持するプロパティです。このプロパティは、要素の周囲に描画されるアウトラインの幅を制御するために使用されます。アウトラインは、主に要素がフォーカスされた際に視覚的なフィードバックを提供するために使われる線であり、一般的なボーダーとは異なり、要素のレイアウトには影響を与えません。つまり、アウトラインの太さを変更しても、ページ内の他の要素の位置がずれることはありません。
outline-widthプロパティには、いくつかの値を指定できます。キーワードとしては、thin（細い）、medium（標準的な太さで、これが既定値です）、thick（太い）があります。また、5pxや0.2emのように、px、em、remなどの単位を指定した具体的な長さの値を設定することも可能です。0を指定するとアウトラインは表示されません。
ただし、outline-widthプロパティだけではアウトラインは表示されません。アウトラインを実際に表示するには、outline-styleプロパティでsolid、dashed、dottedなどの線種を必ず指定する必要があります。必要に応じてoutline-colorプロパティで色を設定することもでき、これらのプロパティはoutlineというショートハンドプロパティを使ってまとめて設定することもできます。このプロパティは、ウェブページのアクセシビリティを向上させ、ユーザーがどの要素に注目しているかを明確にする上で重要な役割を果たします。
公式リファレンス: outline-width
構文(syntax)
1outline-width: 2px;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません