関連プロパティ

輪郭線に関わるプロパティは、以下の各プロパティです。

  • 1.outline : 一括指定プロパティ
    • 2.outline-style : 線種を設定する個別指定プロパティ
    • 3.outline-width : 幅を設定する個別指定プロパティ
    • 4.outline-color : 色を設定する個別指定プロパティ
  • 5.outline-offset : 空間の幅(境界の縁からの距離)を設定する個別指定プロパティ

輪郭線とは

輪郭線は、
要素の周囲に
輪郭を作成して
それらを目立たせる
ものです。

マージン
ボーダー
パディング
コンテンツ領域

輪郭線は、要素の境界の縁に領域を占有しないで描画される線です。
閉じた線ではあるが、長方形である必要はありません。
境界の縁を描画しますが、境界の外側の角を丸める border-radius の効果を受けません。
輪郭線は境界線と異なり、四辺を個別に指定する事はできません。

輪郭線は、ブラウザーが既定のフォーカス表示として輪郭線を使用しています。影響範囲と代替の提供を考慮しましょう。

輪郭線は領域を占有しない

輪郭線は領域を占有しません。要素の配置などに影響を与えません。逆を言えば、輪郭線を考慮した描画はしてくれません。
線の幅を意識せず要素の幅，高さを検討できると取るか、線の描画の為の幅も用意しておく必要があると取るか。
少なくとも状態の変化による描画の変更 (疑似クラスの使用等) では、再配置が発生しないので便利です。

隣接要素と重なる

  1. .cdvSample210 > :first-child{ border: dashed; }
  1. <div class="cdvSample210">
  2. <div>隣接要素</div>
  3. <div style=" margin: 1em 3em; outline: solid 2em rgba(204,204,255,0.8); "></div>
  4. </div>

輪郭線は領域を占有せず、要素のボーダー領域の外側に描かれます。
結果、隣接領域と重なって描かれる事もあります。

隣接要素
例

マージンの相殺

  1. cdvSample220 > div { margin: 1em;}
  2. cdvSample220 > div > div { margin: 1em; border: dashed #0000ff;}
  1. <div class="cdvSample220">
  2. <div style="outline: solid #ff0000;">親<div>子</div></div>

輪郭線は領域を占有しません。パティングもボーダーもコンテンツも当該箇所にないと、輪郭線があってもマージンの相殺は行われます。

親
子

輪郭線は長方形でない場合がある

輪郭線は、長方形でない
場合がある。

境界線は、長方形でない
場合はない。

フォーカス表示(UA)

輪郭線は、ブラウザーが既定のフォーカス表示として輪郭線を使用しています。影響範囲と代替の提供を考慮しましょう。

  1. .cdvSample410 > button:focus { outline: auto 5px -webkit-focus-ring-color;}

輪郭線の外側の角を丸める事は出来ない

  1. cdvSample510 > div { height: 5em; outline-style: solid; box-sizing: border-box; }
  1. <div class="cdvSample510">
  2. <div style="border: solid #0000ff; border-radius: 1em;">例</div></div>

要素の境界の外側の角を丸める border-radius の効果を輪郭線は受けません。

例

計算値 (継承)

outline-style とoutline-width

outline-style で none が採用された場合、outline-width の計算値は 0 になります。

  1. cdvSample610 > div { padding: 1em; height: 5em; box-sizing: border-box; outline-width: medium; }
  2. cdvSample610 > div > div { outline-style: solid; outline-width: inherit; }
  1. <div class="cdvSample610">
  2. <div style=" outline-style: dashed; ">親要素<div>子要素</div></div></div>

例示の雛型です。親要素のstyle属性を書き換えて例示しています。
高さとパティングは、例示の見た目として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素と子要素の輪郭線の記述は、継承の確認の為に記述しています。

親
子
  1. outline-style: none;

親要素に outline-style: none; を記述しました。outline-width: medium; が記述されていますが、outline-style: none; が記述されている為に outline-width の計算値は 0 となり、子要素は継承で計算値の 0 を採用します。

親
子
  1. outline-style: dashed; outline-color: transparent;

outline-width を 0 とはしたくないが線は表示したくない場合は、outline-color にキーワード transparent を指定して透過する方法があります。

親
子

currentColor

色の値に currentColor があり、要素の color プロパティの値を表します。currentColor の計算値はそのまま currentColor であり、要素の color の値に置き換わるのは使用値です。 継承対象の値は計算値の為、置き換わった色のデータではなく、currentColor というキーワードがそのまま継承される事に留意しなければなりません。

outline-colorの初期値は invertですが、サポートしてない場合は currentColor として扱われます。以下ここでは、invertをサポートしていない状況での話をします。尚 outlineは非継承プロパティですので、省略時の指定値はこの初期値となります。

  1. cdvSample620 > div { padding: 1em; height: 5em; box-sizing: border-box; outline-style: dashed; outline-width: 1px; }
  2. cdvSample620 > div > div { outline-style: solid; }
  1. <div class="cdvSample620">
  2. <div style="">親要素<div style="">子要素</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
高さとパティングは、例示の見た目として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素と子要素の輪郭線の記述は、継承の確認の為に記述しています。

親
子
  1. <div style=" color: #0000ff; ">親要素<div style="">子要素</div></div></div>

親要素に color: #0000ff を指定しました。 親要素の輪郭線は currentColor(初期値) であるので同じ色に、子要素の前景色(文字の色)は省略された継承プロパティなので親要素と同じ色に、子要素の輪郭線は省略された非継承プロパティで初期値の currentColor が採用されて同じ色に変わります。

親
子
  1. <div style=" outline-color: #ff0000; ">親要素<div style="">子要素</div></div></div>

親要素に outline-color: #ff0000; を指定しました。 親要素の輪郭線の色だけを変えたら、他はかわりません。

親
子
  1. <div style=" outline-color: #ff0000; ">親要素<div style=" outline-color: inherit; ">子要素</div></div></div>

親要素に outline-color: #ff0000; を、子要素に outline-color: inherit; を指定しました。 親要素に輪郭線の色を指定し、子要素の輪郭線の色に inherit (継承) を指定すると、やっと親子の要素で同じになります。要素単位で文字色(前景色)と輪郭線の色の組み合わせを維持したい場合は、輪郭線の色を別途に継承する必要があります。

親
子
  1. <div style=" outline-color: currentColor; color: #0000ff; ">親要素<div style=" outline-color: inherit; color: #339966; ">子要素</div></div></div>

親要素の輪郭線の色を currentColor を指定(或いは指定しない)、子要素の輪郭線の色に inherit (継承) を指定すると、currentColor キーワードが継承されます。

親
子
  1. <div style=" outline-color: currentColor; color: #0000ff; ">親要素<div style=" outline-color: inherit;">子要素<div style=" color: #339966; ">孫要素</div></div></div></div>

前景色(文字の色)の指定を孫要素(親子の間に装飾用に要素を作成)として、輪郭線は子要素で継承する方法です。

親
孫

一括指定プロパティと初期値

  1. outline: solid 1px #0000ff;
例
  1. outline: solid 1px #0000ff;
  2. outline: dashed;

outline: dashed の記述により、outline: medium dashed currentColor が記述されたのと同等の処理が行われます。
(invert をサポートしていれば、outline-color の初期値は invert です。)

例

おまけ

  1. .cdvSample410 > button:focus {outline: auto 5px -webkit-focus-ring-color;}
例
  1. <div style="border: solid; outline: dashed;">例</div>
例
  1. <div style="border: solid; border-radius: 1em; padding: 1em; outline: dashed; outline-offset: -0.8em;">例</div>
例
  1. <div style="border: solid 0.6em; border-radius: 1em; padding: 1em; outline: dashed; outline-offset: -0.8em;">例</div>