CSS プロパティ outline-offset

CSS プロパティ outline-offset：輪郭にオフセットを追加する

CSS プロパティ outline-offset：輪郭にオフセットを追加する

outline-offset プロパティは、要素の輪郭を描画する際にオフセットを指定することができます。これにより、輪郭と要素の境界線の間にスペースを作成することができます。これは、可視境界線を持つ要素を強調表示したり、「グロー」効果を作成したりするのに便利です。

構文


/* <length> 値 */
outline-offset: 10px;
outline-offset: 2em;

/* キーワード値 */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: unset;

プロパティ値

  • <length>: オフセットを長さの値で指定します。正の値と負の値を指定できます。正の値は輪郭を外側に、負の値は内側にオフセットします。
  • inherit: 親要素から outline-offset プロパティの値を継承します。
  • initial: outline-offset プロパティの値を初期値の 0 に設定します。
  • revert: outline-offset プロパティの値をユーザーエージェントスタイルシートで定義されている値にリセットします。
  • unset: outline-offset プロパティが継承可能なプロパティである場合、その値を inherit に設定します。そうでない場合は、値を initial に設定します。

使用例

1. 正のオフセットを追加して、境界線の外側に輪郭を描画する


<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  outline: 5px dashed red;
  outline-offset: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

コードの説明

  • 上記のコードは、黒い実線で描かれた正方形の div 要素を作成します。
  • outline プロパティは、赤い破線で描かれた輪郭を設定します。
  • outline-offset プロパティは 10px に設定されており、これにより赤い破線の輪郭が 10px 外側にオフセットされ、黒い境界線の外側に描画されます。

2. 負のオフセットを追加して、境界線の内側に輪郭を描画する


<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  outline: 5px dashed red;
  outline-offset: -5px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

コードの説明

  • この例は前の例に似ていますが、outline-offset プロパティは -5px に設定されています。
  • これにより、赤い破線の輪郭が 5px 内側にオフセットされ、黒い境界線の内側に描画されます。

注意

  • outline-offset プロパティは、outline プロパティが設定されている場合にのみ有効です。
  • outline-offset プロパティは、要素のレイアウトには影響しません。輪郭の描画方法にのみ影響します。
  • outline-offset プロパティは、印刷時に無視される場合があります。

ブラウザの互換性

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

ブラウザ バージョン
Chrome 1.0+
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Internet Explorer 8+
Edge 12+

関連資料

まとめ

outline-offset プロパティは、要素の輪郭の位置を制御するためのシンプルでありながら強力な方法を提供し、さまざまな視覚効果を作成するために使用できます。

よくある質問

1. outline-offset と box-shadow の違いは何ですか？

outline-offset は輪郭のオフセットを制御しますが、box-shadow は要素に影を追加します。outline-offset は要素のレイアウトに影響しませんが、box-shadow は影響する可能性があります。

2. outline-offset を使用して、要素の周りにグロー効果を作成するにはどうすればよいですか？

正の outline-offset 値と半透明の outline-color 値を使用することで、グロー効果を作成できます。

3. outline-offset が機能しないのはなぜですか？

outline-offset が機能しない場合は、outline プロパティが設定されていることを確認してください。また、一部のブラウザでは、特定の要素（例：インライン要素）に対して outline-offset がサポートされていない場合があります。