このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

outline:輪郭線

記事Apr. 17th,2021
アウトライン、輪郭線を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 outline-width: medium;
outline-style: none;
outline-color: invert;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

outline”プロパティは要素の輪郭線の太さ、見た目、色を指定する以下のプロパティの一括指定プロパティです。

輪郭線は境界線とは違って領域を占有しません。なので輪郭線の太さはレイアウントには影響を与えません。指定された太さによっては他の要素に重なって描画される場合があります。境界線を持つ場合は輪郭線はその外側に描画されます。

輪郭線は要素にフォーカスした時などに要素を強調する場面で使用されます。

outline-offset”プロパティによって輪郭線が要素と重なる場合は輪郭線は一番手前に描画されます。

サンプルコード

div { outline: 5px dotted rgb(168,214,105);}

<'outline-color'>”値<'outline-style'>”値<'outline-width'>”値を半角スペース(“ ”)で区切って1個ずつ指定できます。値を記述する順番は自由で、初期値のままで良い値は省略できます。ただし、<'outline-style'>”値を指定しない場合は既定値が輪郭線を表示しない“none”のため、輪郭線が表示されません。

使用例

輪郭線を指定する

div {
outline: 5px dotted rgb(168,214,105);
}
outline: 5px dotted rgb(168,214,105);
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク