アウトライン周りの指定をまとめるoutlineプロパティ
outline

　アウトラインにかかわるプロパティをまとめて指定できます。具体的に可能なプロパティを挙げると「outline-color」「outline-style」「outline-width」です。

　値の指定方法は、半角スペースで区切ることで、順序関係なく記述可能です。また、必須の値はないので、1つのみの指定でも問題ありません。記述量が少なくなり、ほかの値を追加する場合もプロパティ名を変更する必要がないため、大変便利なプロパティですが、IE 7以前やSafariで対応していないので、使用することはあまりないかもしれません。

　ボーダーと違い要素の大きさに影響を及ぼしません。たとえ、ほかの要素に重なったとしても、ほかの要素に重なって表示され、位置がずれるなどのこともありません。

　また、形成する形は矩形でなくても問題ありません。例えば、テキストが改行された場合、アウトラインが結合され矩形でない形で表示されます。

基本データ

構文 セレクタ{outline:値;}
継承 ×
値
個々のプロパティの値の指定法による
 
親から継承させる場合
inherit
効果 アウトラインプロパティをまとめて指定できる
初期値 個々のプロパティの値の指定法による
適用箇所 すべての要素

例

ほげほげですね。

p { outline: 1px dotted #ccc;}

動作Webブラウザ

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

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

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

jQueryを使った参照方法

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

CSSタグリファレンス インデックス

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




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

注目のテーマ

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

本日 月間
＠IT