ホーム プログラミング言語 Web関連 css3 CSSの(アウトライン)






CSSの(アウトライン)




 
 
アウトライン (アウトライン) は、次の図に示すように、主に要素を強調するために使用される、境界線の周辺 (境界線に近い) にある要素の周りに描かれた線です。
 

アウトラインとボーダーはよく似ていますが、違いがないわけではありません。たとえば、次のようになります。

  • 要素の 4 方向の境界線のスタイル、幅、および色は個別に設定できますが、要素の 4 方向のアウトラインの幅、スタイル、および色は同じであり、個別に設定することはできません。
  • 境界線の幅は要素のサイズに直接影響しますが、アウトラインはページのスペースを占有せず、ページのレイアウトにも影響しませんが、アウトラインはページ上の他の要素と重なります。
  • アウトラインは、周囲の要素とオーバーラップすることを除いて、周囲の要素に影響を与えません。
  • 境界線は要素のサイズの一部ですが、アウトラインはそうではありません。つまり、アウトラインの幅に関係なく、要素のサイズは変わりません。
  • アウトラインは非長方形にすることができますが、円形のアウトラインを直接作成することはできません。

次のプロパティを使用して、要素のアウトラインを設定できます。

  • 輪郭の色: 輪郭の色を設定します。
  • アウトライン スタイル: アウトライン スタイルを設定します。
  • アウトライン幅: アウトラインの幅を設定します。
  • アウトライン: アウトラインの簡略属性。アウトライン属性を使用して、上記の 3 つのアウトライン属性を同時に設定できます。
  • Outline-offset: アウトラインとボーダーの間の距離を設定します。

1.outline-style -アウトラインスタイル

Outline-style 属性はアウトラインのスタイルを設定でき、属性のオプション値は次のとおりです。

価値 説明
none デフォルト、アウトラインなし
dotted 点のような輪郭を定義する
dashed 破線のアウトラインを定義する
solid 実線を定義する
double 二重の実線のアウトラインを定義します。2 つの実線の間の幅は、outline-width の値に等しくなります。
groove Outline-color の値に応じて、3D 溝の輪郭を定義します。
ridge 3D 溝のアウトラインを定義します。具体的な効果は、outline-color の値によって異なります
inset Outline-color の値に応じて、3D の凹状のアウトラインを定義します。
outset Outline-color の値に応じて、3D 凸状アウトラインを定義します。
inherit 親要素からアウトライン スタイルの設定を継承する

[例] Outline-style 属性を使用して、アウトラインのスタイルを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        span {
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            text-align: center;
            line-height: 100px;
            /*輪廓の効果がより直感的に分かるよう、予め輪廓の幅と色を設定する*/
            outline-width: 8px;
            outline-color: #AAAAAA;
        }
        .dotted {
            outline-style: dotted;
        }
        .dashed {
            outline-style: dashed;
        }
        .solid {
            outline-style: solid;
        }
        .double {
            outline-style: double;
        }
        .groove {
            outline-style: groove;
        }
        .ridge {
            outline-style: ridge;
        }
        .inset {
            outline-style: inset;
        }
        .outset {
            outline-style: outset;
        }
    </style>
</head>
<body>
    <span class="dotted">点線</span>
    <span class="dashed">破線</span>
    <span class="solid">実線</span>
    <span class="double">二重線</span>
    <span class="groove">グルーブ</span>
    <span class="ridge">リッジ</span>
    <span class="inset">インセット</span>
    <span class="outset">アウトセット</span>
</body>
</html> 

実行結果は次の図のとおりです。

図: アウトライン スタイルのプロパティのデモ
図: アウトライン スタイルのプロパティのデモ

注: アウトラインの既定のスタイルは [なし] であるため、要素の周囲に表示されるアウトラインのアウトライン スタイルを指定する必要があります。

2.outline-width (アウトライン幅)

Outline-width 属性は、アウトラインの幅を設定するために使用されます. Outline-style 属性の値が none でない場合にのみ、outline-width 属性が有効になります.アウトライン幅属性のオプションの値は次のとおりです。

価値 説明
thin 輪郭を細くする
medium デフォルトでは、中幅のアウトラインが設定されます
thick 輪郭を太くする
length 特定の値と単位 (px、em、cm など) を使用して、アウトラインの幅を設定します。
inherit 親要素からアウトラインの幅を継承する

[例] Outline-width 属性を使用して、アウトラインの幅を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 300px;
            height: 150px;
            outline-style: solid;
            outline-width: 5px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html> 

実行結果は次の図のとおりです。

図: Outline-width プロパティのデモ
図: Outline-width プロパティのデモ

3.outline-color (アウトラインカラー)

Outline-color 属性は輪郭の色を設定するために使用され、属性のオプション値は次のとおりです。

価値 説明
color color や border-color などの属性で色を設定するのと同じように、輪郭の色を指定します 特定の色は、色名、16 進数コード、および RGB 値の形式で定義できます。
invert 背景色の反転色を使用してアウトラインの色を設定します。IE および Opera ブラウザーでのみ有効です。
inherit 親要素から輪郭色の設定を引き継ぐ

注: アウトラインの幅またはアウトラインの色の属性のみが設定されている場合、アウトラインの設定は有効になりません。 Outline-width 属性と Outline-color 属性を使用してアウトラインの幅と色を設定する前に、outline-style 属性を使用してアウトライン スタイルを設定する必要があります。

[例] Outline-color 属性を使用して、アウトラインの色を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #CCC;
        }
        p.one {
            outline-style: solid;
            outline-width: 5px;
            outline-color: red;
        }
        p.two {
            outline-style: groove;
            outline-width: 6px;
            outline-color: #AAA;
        }
        p.three {
            outline-style: inset;
            outline-width: 5px;
            outline-color: rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217, 0, 217)</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: Outline-color プロパティのデモ
図: Outline-color プロパティのデモ

4.概要

アウトライン属性は、上記の3つの属性(outline-width、outline-style、およびoutline-color)の省略形です.outline属性を使用すると、これら3つの属性の1つまたは複数を同時に設定できます.構文形式は次のとおりです.次のとおりです。

outline: outline-width outline-style outline-color;

アウトライン属性を使用する場合、outline-width、outline-style、および Outline-color パラメータの順序は固定されていません. 上記の構文で導入された順序に従うことも、好みに応じて順序を変更することもできます.

[例] 要素の輪郭を設定するには、outline 属性を使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.one {
            outline: solid 5px red;
        }
        p.two {
            outline: #AAA groove 6px;
        }
        p.three {
            outline: 5px inset rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤色</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217、0、217)</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: プロパティのデモの概要
図: プロパティのデモの概要
5.アウトラインオフセット

デフォルトでは, アウトラインはボーダーに近いです. アウトラインとボーダーの間の距離は、outline-offset 属性を介して設定できます. 属性のオプションの値は次のとおりです:

価値 説明
length アウトラインと境界線の間の距離を特定の値と単位の形式で設定します。単位は負の値にすることもできます
inherit 親要素から Outline-offset 属性の値を継承する

[例] Outline-offset を使用して、アウトラインと境界線の間の距離を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px 0px 0px 50px;
            border: 1px solid red;
            outline: 6px inset #AAA;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html> 

実行結果は次の図のとおりです。

図: Outline-Offset プロパティのデモンストレーション
図: Outline-Offset プロパティのデモンストレーション
 

「CSSのアウトライン(アウトライン)」についてわかりやすく解説!絶対に観るべきベスト2動画

【理解/習得必須】HTML・CSS超入門講座vol.01(Webページの構造設計)
【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解説【ヤフー出身エンジニアの初心者向けプログラミング講座】