outline

アウトライン関連のプロパティをまとめて指定します。

※アウトラインとは要素の輪郭を表すものです。ボーダーと違って、要素の配置や余白に影響を与えません。


ブラウザ

O7 / O9 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ outline : outline-width outline-style outline-color; }

▲PageTop

指定できる値

値 初期値 意味
inherit 親要素の値を継承します。

・outline-widthプロパティの指定(太さの指定)
値 初期値 意味
数値+単位 太さを指定します。単位例：px,em,ex,%
thin 細い線になります。
medium ○ thinより太く、thickより細い線になります。
thick 太い線になります。

・outline-styleプロパティの指定(線種の指定)
値 初期値 意味
none ○ 線のスタイルはありません。
solid 実線になります。
double 二重線になります。
dashed 破線になります。
dotted 点線になります。
groove 窪みのような線になります。
ridge 隆起したような線になります。
inset 凹みに見える線になります。
outset 凸に見える線になります。

・outline-colorプロパティの指定(色の指定)
値 初期値 意味
16進数表記・色名 指定したカラーコード・色名が背景色になります。
invert ○ 背景色を反転させた色になります。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        outline : thick #6699ff outset;
      }
    </style>
  </head>
  <body>
    <label for="sample1">outlineサンプル</label>
    <input type="text" id="sample1">
  </body>
</html>

表示結果

▲PageTop

関連項目

CSS

outline-color / outline-style / outline-width

▲PageTop

▲