CSS プロパティ outline-width

CSS プロパティ outline-width: 要素のアウトラインの幅を制御する

CSS プロパティ outline-width: 要素のアウトラインの幅を制御する

outline-width プロパティは、要素のアウトラインの幅を設定するために使用されます。アウトラインは要素のボーダーの外側に描画され、要素のサイズやレイアウトには影響しません。

適用要素

すべての要素

継承

否

構文


/* <outline-width> 値 */
outline-width: medium | thin | thick | <length> | inherit;

プロパティ値

  • medium: デフォルト値。中程度の幅のアウトラインを設定します。
  • thin: 細いアウトラインを設定します。
  • thick: 太いアウトラインを設定します。
  • <length>: アウトラインの幅を具体的な数値で指定します。単位はピクセル (px)、em、rem などを使用できます。
  • inherit: 親要素から outline-width プロパティの値を継承します。

使用例

1. キーワードを使用してアウトラインの幅を設定する例:


<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: lightblue;
    }

    .thin {
      outline-width: thin;
      outline-style: solid;
      outline-color: red;
    }

    .medium {
      outline-width: medium;
      outline-style: solid;
      outline-color: green;
    }

    .thick {
      outline-width: thick;
      outline-style: solid;
      outline-color: blue;
    }
  </style>
</head>
<body>

  <div class="box thin">Thin outline</div>
  <div class="box medium">Medium outline</div>
  <div class="box thick">Thick outline</div>

</body>
</html>

上記のコードを実行すると、以下のように3つの異なる幅のアウトラインが表示されます。

Thin outline
Medium outline
Thick outline

2. 具体的な数値を使用してアウトラインの幅を設定する例:


<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: lightblue;
      outline-style: solid;
      outline-color: red;
    }

    .box1 {
      outline-width: 2px;
    }

    .box2 {
      outline-width: 5px;
    }

    .box3 {
      outline-width: 10px;
    }
  </style>
</head>
<body>

  <div class="box box1">2px outline</div>
  <div class="box box2">5px outline</div>
  <div class="box box3">10px outline</div>

</body>
</html>

上記のコードを実行すると、以下のように3つの異なるピクセル値のアウトラインが表示されます。

2px outline
5px outline
10px outline

注意事項

  • outline-width プロパティは outline-style プロパティと組み合わせて使用する必要があります。 outline-style のデフォルト値は none であるため、単独ではアウトラインは表示されません。
  • ボーダーとは異なり、アウトラインは要素のサイズやレイアウトに影響しません。
  • アウトラインは、要素のサイズや位置を確認するなどのデバッグ用途によく使用されます。

ブラウザの互換性

outline-width プロパティは、すべての主要なブラウザでサポートされています。

ブラウザ バージョン
Chrome 1 以上
Firefox 1 以上
Safari 1 以上
Edge 12 以上
Internet Explorer 8 以上

参考文献

関連するQ&A

  • Q: outline と border の違いは何ですか?
    A: border は要素のボックスモデルの一部であり、要素のサイズやレイアウトに影響します。一方、 outline は要素のボックスモデルの外側に描画され、要素のサイズやレイアウトには影響しません。
  • Q: outline-width を設定してもアウトラインが表示されません。
    A: outline-style プロパティが none に設定されている可能性があります。 outline-style プロパティを solid や dashed など、表示したいアウトラインのスタイルに設定してください。
  • Q: 特定の要素だけにフォーカスされたときにアウトラインを表示するにはどうすればよいですか?
    A: :focus 疑似クラスを使用することで、特定の要素にフォーカスが当たったときにのみアウトラインを表示することができます。