輪郭線(アウトライン)について。

輪郭線(アウトライン)とは。

輪郭線(アウトライン)とは、ボックスに新たに導入された概念で、枠線(ボーダ)の周囲に描かれる線です。

輪郭線(アウトライン)には、以下のような特徴があります。

表示領域を確保しません

すなわち、余白(マージン)上に描かれます。

• 厳密には全てのコンテンツを描いた上で描かれる事になっております。従って輪郭線が接する要素を読めなくする恐れもあります。

形は長方形(矩形)と限りません

特にインラインボックスにおいては、その外側の枠線(ボーダ)に沿って描かれるため、長方形にならない場合があります。

上下左右のプロパティは全て同じになります

輪郭線(アウトライン)を指定する場合、上下左右の幅などのプロパティを個別に指定する事は出来ません。

CSSに於ける輪郭線(アウトライン)の理念。

CSSに於いては、輪郭線(アウトライン)は当該要素を閲覧者が見つけ易くしたり目立たせたりするために導入されたものです。

例えば、入力フォームなどに対してクライアントサイドスクリプトを使って以下のようにする事が出来ます。

1. 始めに入力すべき欄に輪郭線を表示させて、閲覧者に「まず記入すべき欄」と知らせます。
2. その欄が入力されたら、スクリプトでその欄の輪郭線を消し、次に入力すべき欄に輪郭線を表示させます。
3. このようにして、最後まで入力されたら、送信ボタンに輪郭線を表示して閲覧者を誘導します。

このような発想から、輪郭線(アウトライン)はCSSの仕様書ではユーザインタフェース関連とされておりますが、ボックス関連のプロパティとも見る事が出来るでしょう。

CSSに於ける輪郭線(アウトライン)の実装。

現在、CSSに於ける輪郭線(アウトライン)の機能は、

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

でのみ表示可能です。

輪郭線(アウトライン)のWAP 2.0での実装上の注意。

WAP 2.0では、輪郭線(アウトライン)は定義されておりません。