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

 アウトラインの色を指定する際に使用します。アウトラインはborderプロパティと違い、要素の大きさなどの影響を受けないので、ほかの要素と重なってしまうことがあり得ます。このため、デフォルトの値が「invert(反転させた色)」となっています。これにより、確実に表示されるようになります。

 もちろん、任意の色を指定することも可能です。そのため、デザイン面を考えてしっかり指定した方がいいでしょう。

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

基本データ

構文 セレクタ{outline-color:値;}
継承 ×
キーワードを使って指定する場合
色(16進数RGB値、カラーネーム)、invert
親から継承させる場合
inherit
効果 アウトラインの色を指定できる
初期値 invert
適用箇所 すべての要素

ほげほげですね。

p { outline-style: solid;outline-color: #FF0000;}

動作Webブラウザ

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

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

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

jQueryを使った参照方法

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

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




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

注目のテーマ

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

本日 月間