【CSS】要素を目立たせるアウトライン(outline)

アウトラインとは、ボーダー(border)の外側に描かれる線で要素を目立たせます。

outlineプロパティは、アウトラインのスタイル・太さ・色(outline-style、outline-width、outline-color)をまとめて指定する際に使用します。

任意の順序で半角スペースで区切って記述します。

マージン(margin)

アウトライン(outline)

ボーダー(border)

要素内容(contents)

borderプロパティと違い、outlineプロパティはスペースを作らないので、ページのレイアウトに影響を与えません。また上下左右の概念もありません。

outlineプロパティ
outline-width	要素のアウトラインの太さ(幅)を指定します。
outline-color	要素のアウトラインの色を指定します。outline-style属性の指定が前提です。
outline-style	要素のアウトラインのスタイルを指定します。
outline-offset	要素のボーダー(border)の間隔を指定します。

セレクタ { outline: 値; }

<style> 
 .outline1 {
 　　outline: #00FF00 dotted 1px;
　　　　　 } 
 .outline2 {
 　　outline-width: 1px;
 　　outline-style: dotted;
 　　outline-color: #00ff00;}
　　　　　}
</style>

上記の２つのCSSは、以下のように同じ結果になります。１つ目はoutlineプロパティを色、スタイル、太さ順でまとめて指定しています。2つ目は、それぞれプロパティを分けて指定しました。

アウトライン(まとめ指定)

アウトライン(分けて指定)

outline-offset: 値;

<style> 
 .outline3 {
 　　outline: #00FF00 dotted 1px;
 　　outline-offset:3px;
</style>

CSS3にて追加されたプロパティで初期値は”0”です。ボーダーの周りとアウトラインの間の余白を指定します。ここでは3pxで指定しました。

アウトライン(分けて指定)

outline,box-shadowを使ったBOXデザイン

<style> 
  .box{
　　border:1px solid #eee;
　　outline:1px solid #4c4c4c;
　　box-shadow:inset 0 2px 45px #7c7c7e;
　　  }
</style>

outline(濃いグレー色)とboder(薄いグレー色)で外側、内側はbox-shadow(中間グレー色)でボックスの内側に影をつける設定で下図の結果になりました。

BOX