◆ はじめに
つぎは、アウトライン系のプロパティです。
尚、ご使用のブラウザのスタイルシート対応度によって、表示が異なる場合があります。
- スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
- スタイルシートのリファレンスは、こちらにありますので参照してください。
- 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。
◆ アウトライン関係
outline-colorプロパティ
outline-colorプロパティは、ボタンや画像などの縁取り線の色を設定します。
ちなみに、ボーダー線とは異なり、上下左右の概念はありません。
対象が丸ければアウトラインも丸くなります。
設定値は、色（任意の色）、invert(地の色を反転）。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | invert | no | Mac-IE5が対応しているらしい |
outline-styleプロパティ
outline-styleプロパティは、ボタンや画像などの縁取り線の形状を設定します。
設定値は、以下の通りです。
- none
- アウトラインを表示しません。
- solid
- アウトラインを実線で表示します。
- double
- アウトラインを2本線で表示します。
- その他
- groove,ridge,inset,outset,dashed,dottedがあり、いろいろ試して見て下さい。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | none | no | Mac-IE5が対応しているらしい |
outline-widthプロパティ
outline-widthプロパティは、ボタンや画像などの縁取り線の太さを設定します。
設定値は、実数値＋単位,thin（細い）,medium（普通）,thick（太い）があります。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | medium | no | Mac-IE5が対応しているらしい |
outlineプロパティ
outlineプロパティは、ボタンや画像などの縁取り線の上記一括指定で設定します。
設定値は、上記の必要な値を任意の順にスペースで区切って指定します。
| 適用要素 | 初期値 | 継承 | 対応ブラウザ（NN6,IE5.5のみテスト） |
|---|---|---|---|
| 全要素 | 個々のプロパティの初期値 | no | Mac-IE5が対応しているらしい |
outline系のプロパティは、現状（2001/06/19）では、MacIE5でサポートされているだけみたいです。
----------CSS2 ソース------------------------------------------------
img.outlinesmp1 {
outline-style: solid;
outline-color: #ff0000;
outline-width: thick;
}
img.outlinesmp2 {
outline-style: double;
outline-color: #00ff00;
outline-width: medium;
}
img.outlinesmp3 {
outline-style: groove;
outline-color: #0000ff;
outline-width: thin;
}
img.outlinesmp4 {
outline-style: outset;
outline-color: #888888;
outline-width: 4px;
}
img.outlinesmp5 {
outline-style: dotted;
outline-color: #444444;
outline-width: medium;
}
---------- HTML4.01 ソース ------------------------------------------
<img class="outlinesmp1" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp2" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp3" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp4" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp5" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<br>
<p class="chuui">
outline系のプロパティは、現状（2001/06/19）では、MacIE5でサポートされているだけみたいです。
</p>