テキストに飾りを付けるtext-decorationプロパティ
text-decoration

 テキストに下線などを引く際に使います。使用する頻度としては「none(無効にする)」「underline(下線を引く)」が多く、大部分を占めています。

 例えば、テキストにリンクを指定する際、デフォルトの状態だと下線が引かれてしまいますが、「none」を指定することにより、文字のみで表示可能です。

 マウスオーバーした際に下線を引きたい場合などには、hover疑似クラスに「underline」を指定することで対応できます。

 「line-through(中線を引く)」は文章訂正をする際に、訂正前の文章を消すことなく訂正できます。

 「blink(点滅表示)」はInternet ExplorerなどサポートしていないWebブラウザがあり、使用されていません。

基本データ

構文 セレクタ{text-decoration:値;}
継承 ×
キーワードを使って指定する場合
none、underline、overline、ine-through、blink
親から継承させる場合
inherit
効果 テキストに飾りを付ける
初期値 none
適用箇所 すべての要素

ほげほげですね。

p { text-decoration: underline;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

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

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

jQueryを使った参照方法

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

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




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

注目のテーマ

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

本日 月間