CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoutline-widthプロパティとは？アウトラインの幅を指定する方法

outline-widthプロパティの基本

outline-widthプロパティは、要素のアウトライン（輪郭線）の幅を設定するために使用します。指定できる値は、pxやemなどの長さの単位、またはキーワードのthin（細い）、medium（標準）、thick（太い）のいずれかです。値の指定方法はborder-widthプロパティと同じ考え方になります。

注意点：outline-styleとの併用が必要

outline-widthプロパティだけを指定しても、アウトラインは表示されません。これはoutline-styleプロパティの初期値がnoneになっているためです。アウトラインを実際に表示するには、solid（実線）、dashed（破線）、dotted（点線）など、線の種類をoutline-styleで必ず指定しましょう。

使用例

以下は、異なる幅とスタイルのアウトラインを段落に適用したサンプルコードです。

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         このテキストには細い実線のアウトラインが付いています。
      </p>
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         このテキストには太い破線のアウトラインが付いています。
      </p>
      <br />
      <p style = "outline-width:5px; outline-style:dotted;">
         このテキストには5pxの点線のアウトラインが付いています。
      </p>
   </body>
</html>

このコードでは、1つ目の段落に「thin＋solid」で細い実線、2つ目の段落に「thick＋dashed」で太い破線、3つ目の段落に「5px＋dotted」で5px幅の点線をそれぞれ適用しています。ブラウザで表示すると、各段落の周囲に異なる太さと種類の輪郭線が描画されることが確認できます。

borderとの違い

アウトラインはボーダー（枠線）とよく似ていますが、重要な違いがあります。borderは要素のボックスモデルの一部としてレイアウトに影響しますが、outlineはレイアウトスペースを占有しません。そのため、要素のサイズや周囲の配置を崩すことなく輪郭線を表示でき、フォーカス状態の強調表示などによく使われます。

  1. CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説

    CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector {    outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic

  2. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty