ホーム >>> HTML整理ノート

outline 要素の輪郭線(縁取り線,アウトライン)

outlineは、要素の輪郭線(縁取り線、アウトライン)のスタイル。border(枠線)と異なり、上下左右の概念はない。

outline-style:(値)
・アウトラインの形状を指定。二重線(double)や点線(dotted)などは、線の太さを
 3px以上にしないと見分けがつかない。
(値)
 none・・・(初期値)アウトラインを表示しません。
 solid・・・実線
 double・・・二重線
 dotted・・・点線
 dashed・・・破線
 groove・・・立体的に窪んだ線
 ridge・・・立体的に隆起した線
 inset・・・アウトラインで囲まれた領域が立体的に窪んだように表示される。
 outset・・・アウトラインで囲まれた領域が立体的に隆起したように表示される。

outline-width:(値)
・アウトラインの太さを指定
(値)
 単位付き数値で指定・・・px,pt,em,mm,cmなど
 キーワードで指定・・・thin(細い)、medium(普通)、thick(太い)のキーワードで大まか
    な指定(実際の太さはブラウザ依存)

outline-color:(値)
・アウトラインの色を指定
(値)
 色値で指定・・・16進数カラーコード、色名など
 invert・・・地の色を反転させた色になる。

outline:(値)
・アウトラインのstyle・width・colorの値並べて一括指定する。
・任意の順序でスペースで区切って記述します。 必要のない指定は省略できる(省略した場合は初期値になります)
・outline-styleは必須で、省略するとアウトラインは表示されない。
(例)style="outline: solid 3px #0000ff"

Sample
(-width:4px)

none (初期値)

solid 実線

double 二重線

dotted 点線

dashed 破線

(-width:10px)

groove 立体的な窪み

ridge 立体的な隆起

inset 窪み

outset 隆起

 

 

 

 

 

 

 

 

 

 

 

 

 

Sample Source......................................................................>>>

<div>(-width:4px)
  <p style="outline:none 4px #87ceeb">none (初期値)</p>
  <p style="outline:solid 4px #87ceeb">solid 実線</p>
  <p style="outline:double 4px #87ceeb">double 二重線</p>
  <p style="outline:dotted 4px #87ceeb">dotted 点線</p>
  <p style="outline:dashed 4px #87ceeb">dashed 破線</p>
</div>

<div>(-width:10px)
  <p style="outline:groove 10px #87ceeb">groove 立体的な窪み<br></p>
  <p style="outline:ridge 10px #87ceeb">ridge 立体的な隆起<br></p>
  <p style="outline:inset 10px #87ceeb">inset 窪み<br></p>
  <p style="outline:outset 10px #87ceeb">outset 隆起</p>
</div>