アウトラインの幅を指定するoutline-widthプロパティ
outline-width

 アウトラインの幅を指定する際に使用します。使用できる値は、borderプロパティで使用できるものと同じです。また、borderプロパティには上下左右に別々のサイズを指定可能ですが、outlineプロパティでは別々には指定できません。

 キーワードによるサイズの指定も可能で、「thin」が小さく「thick」が大きい値、「medium」がその間のサイズです。ただし、ユーザー環境によりサイズは変化します。

 そもそも、IE 7以前やSafariで対応していないので、使用することはあまりないかもしれません。

基本データ

構文 セレクタ{outline-width:値;}
継承 ×
相対的なサイズをキーワードを使って指定する場合
thin、medium、thick
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズを%(パーセント)、em(イーエム)を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
 
効果 アウトラインの太さを指定できる
初期値 medium
適用箇所 すべての要素

ほげほげですね。

p { outline-style: double;outline-width: 10px;}

動作Webブラウザ

Internet Explorer 8.0以上
Firefox 全バージョン
Safari対応していない
Opera全バージョン
Chrome全バージョン
iPhone/iPad対応していない

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.outlineWidth

jQueryを使った参照方法

$('【セレクタ】').css('outline-width','【値】');
$('【セレクタ】').css({'outline-width':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間