outline-widthプロパティ。

CSSに於ける輪郭線(アウトライン)の幅・outline-widthプロパティに関する解説です。

outline-widthプロパティとは。

outline-widthプロパティは、輪郭線(アウトライン)の幅です。

outline-widthプロパティの扱い。

outline-widthプロパティの書式。

outline-widthプロパティの書式は、以下のようになります。

outline-width:

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
キーワード
以下のキーワードが利用出来ます。
thin
細い枠線となります。
medium
中間の太さの枠線となります(デフォルト)。
thick
太い枠線となります。

尚、これらの値には具体的な太さは規定されておりません。

しかしながら、細い順に

  1. thin
  2. medium
  3. thick

となるようにしなければならず、また、これらの太さは文書内では一定にしなければなりません。

  • thinmedium、或いはmediumthickが同じ太さになっているのは構いません。
パーセンテージ
  • 上下方向はボックスの高さ
  • 左右方向はボックスの幅

を100%とするパーセンテージです。

数値
幅を数値で指定します。

値としては負の値は許されません。

outline-widthプロパティの記述例。

例えば、HTMLの<h1>要素に、幅一文字分の薄緑色の輪郭線(アウトライン)を引きたい場合は、

h1 {
    border-bottom: #090 2px solid
    outline-width: 1em;
    outline-color: #cfc;
    outline-style: solid;
    }

と記述します。

outline-widthプロパティに関する注意事項。

outline-widthプロパティの実装上の注意。

現在、outline-widthプロパティは、

  • 最新のもじら系ブラウザ(ファイヤーフォックス 1.5.xなど)
  • オペラ 7.x以降
  • サファリ

でのみ表示可能です。

WAP 2.0での注意事項。

WAP 2.0では、outline-widthプロパティは定義されておりません

関連項目。


しらぎくのウェブサイト作成入門サイトマップ