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

CSSのoutline-widthプロパティでアウトラインの幅を設定する方法

CSSの outline-width プロパティは、要素の周囲に表示されるアウトライン（輪郭線）の太さを設定するために使用されます。border-width プロパティと同様に、値には具体的な長さ（px や em など）を指定するか、thin（細い）、medium（中程度）、thick（太い）のいずれかのキーワードを指定できます。

outline-width の使い方

アウトラインの幅だけを指定しても、初期値の outline-style が「none」になっているため線は表示されません。必ず outline-style プロパティと組み合わせて使用してください。

  • thin … 細い線（ブラウザ依存、一般的に1px）
  • medium … 中程度の線（初期値、一般的に3px）
  • thick … 太い線（ブラウザ依存、一般的に5px）
  • 長さの値 … px、em、rem などで正確に指定可能

コード例

以下の例では、3つの段落に対してそれぞれ異なるスタイルと幅のアウトラインを設定しています。

<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>

表示結果

このテキストには細い実線のアウトラインが表示されます。


このテキストには太い破線のアウトラインが表示されます。


このテキストには5pxの点線のアウトラインが表示されます。

border との違い

アウトラインはボーダー（境界線）と似ていますが、以下の点が異なります。

  • アウトラインはレイアウトに影響を与えず、要素のサイズや位置を変更しません。
  • 要素の外側に描画されるため、他のコンテンツと重なる場合があります。
  • 四辺ごとに個別の幅を指定することはできず、すべての辺に一括で適用されます。

フォーカス時のハイライト表示など、レイアウトに影響を与えずに視覚的な強調を行いたい場合に、outline-width プロパティは非常に便利です。

  1. CSSのcolumn-rule-widthプロパティで段組みの罫線の太さを設定する方法

    CSSで段組み（マルチカラム）レイアウトを作成する際、各カラム（列）の間に表示される罫線（ルールライン）の太さを指定できるのが column-rule-width プロパティです。column-rule-widthプロパティとはcolumn-rule-width プロパティは、カラム間の罫線の幅を設定します。このプロパティを有効に機能させるには、column-rule-style プロパティで罫線のスタイル（実線、破線など）をあらかじめ指定しておく必要があります。スタイルが指定されていない場合や none の場合は、罫線の幅に関わらず罫線は表示されません。指定できる主な値は以下のとおりです。t

  2. CSSでタブ文字の幅を設定する方法｜tab-sizeプロパティの使い方を解説

    CSSでタブ文字（タブキーで挿入される空白）の表示幅を変更したい場合は、tab-size プロパティを使用します。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使うことで任意のスペース数に調整できます。tab-sizeプロパティの基本tab-sizeプロパティは、主に <pre> や <code> など、整形済みテキストを表示する要素に対して効果を発揮します。指定できる値は以下のとおりです。数値： タブ1つあたりの幅をスペースの文字数で指定します（例： tab-size: 12;）length値： pxやemなどの単位で幅を指定することも可能ですi