アウトラインの太さを指定する(CSS) |
outline-width: *px; outline-width: thin; |
outline-width は、全てのタグ(要素)に適用できます。 |
|
outline-width は、アウトライン(輪郭線)の太さを指定するプロパティです。border-width(境界線の太さ)とほぼ同様ですが、輪郭線の太さを一括で指定します(上下左右の個別指定はできません)。 |
|
span { outline-width: 3px; outline-style:solid; }
span { outline-width: thin; outline-style:solid; } |
* アウトラインのスタイル(outline-style)も同時に指定します。 |
プロパティ名 | 値 | 説 明 |
outline-width |
太さ | 数値+単位(px 等) |
thin | 細い線 |
medium | 中間の太さ(初期値) |
thick | 太い線 |
|
* 境界線(border-width)とは異なり、アウトラインの太さはレイアウトには影響を与えません。 |
Internet Exp.は表示モードが「 標準モード」の場合のみ機能するようです(Internet Exp.7 以前は未対応)。 ※ Internet Exp.で対応させる場合は、境界線( border-width)を代用して下さい。 |
|
★ 使用例とブラウザでの表示 (a4-1) |
|
サンプルコード |
|
ブラウザの表示 |
| |
<div style="outline-width: 1px;<br>
outline-style: solid;">太さ:1px</div> |
太さ:1px |
<div style="outline-width: 3px;<br>
outline-style: solid;">太さ:3px</div> |
太さ:3px |
<div style="outline-width: thin;<br>
outline-style: solid;">太さ:thin</div> |
太さ:thin |
<div style="outline-width: medium;<br>
outline-style: solid;">太さ:medium</div> |
太さ:medium |
<div style="outline-width: thick;<br>
outline-style: solid;">太さ:thick</div> |
太さ:thick |
|
☆ Internet Exp.が未対応のため、border-width を代用しています。 |
|
|
|
関連するページ |
CSS スタイルシート:境界線の太さを指定する |
HTML タグページ :ブラウザの表示モード(標準モードと互換モード) |
|
アウトラインの色を指定する(CSS) |
outline-color: #ff0000; |
outline-color は、全てのタグ(要素)に適用できます。 |
|
outline-color は、アウトライン(輪郭線)の色を指定するプロパティです。border-color(境界線の色)とほぼ同様ですが、輪郭線の色を一括で指定します(上下左右の個別指定はできません)。 |
|
span { outline-color: #ff0000; outline-style:solid; }
span { outline-color: red; outline-style:solid; } |
* アウトラインのスタイル(outline-style)も同時に指定します。 |
プロパティ名 | 値 | 説 明 |
outline-color |
invert | 背景色を反転させた色(初期値) |
色 | カラーコード or カラーネームを指定 |
|
Internet Exp.は表示モードが「 標準モード」の場合のみ機能するようです(Internet Exp.7 以前は未対応)。 ※ Internet Exp.で対応させる場合は、境界線( border-color)を代用して下さい。 |
※ 色の指定は、カラーコード( #ffffff, #fff, rgb(255,0,0))または、カラーネーム( red, blue)で行います。詳細は、「カラーネーム」のページをご覧下さい。 |
|
★ 使用例とブラウザでの表示 (a4-2) |
|
サンプルコード |
|
ブラウザの表示 |
| |
<div style="outline-color: #808;<br>
outline-style: solid;">色:紫</div> |
色:紫 |
<div style="outline-color: green;<br>
outline-style: solid;">色:緑</div> |
色:緑 |
<div style="outline-color: rgb(0,0,255);<br>
outline-style: solid;">色:青</div> |
色:青 |
|
☆ Internet Exp.が未対応のため、border-color を代用しています。
☆ "#808;"、"rgb(0,0,255);" はCSS独自のカラーコード指定です。 |
|
|
|
関連するページ |
CSS スタイルシート:境界線の色を指定する |
HTML タグページ :ブラウザの表示モード(標準モードと互換モード) |
Utilety Page (参考):「カラーネーム と カラーコード」へ |
|
アウトラインのスタイルを指定する(CSS) |
outline-style: solid; |
outline-style は、全てのタグ(要素)に適用できます。 |
|
outline-style は、アウトライン(輪郭線)のスタイルを指定するプロパティです。border-style(境界線のスタイル)とほぼ同様ですが、輪郭線のスタイルを一括で指定します(上下左右の個別指定はできません)。 |
|
span { outline-style: solid; } |
プロパティ名 | 値 | アウトラインのスタイル |
outline-style
※記述例の solid を double 〜 dashed に変えると「境界線のスタイル」欄に示した境界線を表示します。
※「二重線」と「点線」は、線の太さに注意して下さい。
*Internet Exp. が未対応のため、border-style を代用しています。 |
none | 線なし/(初期値) |
solid |
実 線 |
double |
二重線(線の太さ:3px以上) |
groove |
谷型の線 |
ridge |
山型の線 |
inset |
凹型の線 |
outset |
凸型の線 |
dotted |
点 線(線の太さ:3px以上) |
dashed |
破 線 |
|
Internet Exp.は表示モードが「 標準モード」の場合のみ機能するようです(Internet Exp.7 以前は未対応)。 ※ Internet Exp.で対応させる場合は、境界線( border-style)を代用して下さい。 |
|
★ 使用例とブラウザでの表示 (a4-3) |
|
サンプルコード |
|
ブラウザの表示 |
| |
<div style="outline-style: solid;">実 線</div> |
実 線 |
<div style="outline-style: double;">二重線</div> |
二重線 |
<div style="outline-style: dotted;">点 線</div> |
点 線
|
|
☆ Internet Exp.が未対応のため、border-style を代用しています。
☆ 二重線(double)や点線(dotted)は、線の太さを3px以上にして下さい。 |
|
|
|
関連するページ |
CSS スタイルシート:境界線のスタイルを指定する |
HTML タグページ :ブラウザの表示モード(標準モードと互換モード) |
|
アウトラインをまとめて指定する(CSS) |
outline: 1px blue solid; |
outline は、全てのタグ(要素)に適用できます。 |
|
outline は、アウトライン(輪郭線)の太さ、色、スタイルをまとめて指定するプロパティです。border(境界線)とほぼ同様ですが、輪郭線を一括で指定します(上下左右の個別指定はできません)。 |
|
span { outline: 1px #0000ff solid; }
span { outline: thin blue double; } |
プロパティ名 | 値 および 説 明 |
outline: | 1px…線の太さ |
#0000ff…線の色 |
solid…線のスタイル |
; |
初期値 | medium | invert |
none | |
|
* それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。(省略した場合は初期値になります) |
※ 線のスタイル指定を省略すると、アウトラインが表示されなくなります。アウトラインを表示する場合は、この指定を省略しないで下さい。 |
Internet Exp.は表示モードが「 標準モード」の場合のみ機能するようです(Internet Exp.7 以前は未対応)。 ※ Internet Exp.で対応させる場合は、境界線( border)を代用して下さい。 |
|
★ 使用例とブラウザでの表示 (a4-4) |
|
サンプルコード |
|
ブラウザの表示 |
| |
<div style="outline: 1px #f0f solid;">1px,紫,実線</div> |
1px,紫,実線 |
<div style="outline: green double;">緑,二重線</div> |
緑,二重線 |
<div style="outline: thick dotted;">太線,点線</div> |
太線,点線
|
|
☆ Internet Exp.が未対応のため、border を代用しています。
☆ 二重線(double)や点線(dotted)は、線の太さを3px以上にして下さい。
☆ アウトライン(輪郭線)の太さと色は、省略できます。 |
|
|
|
関連するページ |
CSS スタイルシート:境界線の太さ・色・スタイルをまとめて指定する |
HTML タグページ :ブラウザの表示モード(標準モードと互換モード) |
|