CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅
CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅
CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅
CSSを使うとテキスト文字列やアンカーリンクのスタイルを設定することもできます。
CSSスタイルシートについては
をご参照下さい。
アンカーリンクの下線・アンダーラインを非表示にする
さて、あなたがここに来る為にクリックした次のアンカーリンクは下線がついたものでしたか？ついていませんでしたか？
どちらをクリックしてもリンクは有効になるはずですが、いかがですか？
これは好みで選んで頂ければよろしいかと思いますが何も指定しないと『下線(アンカー)付き』です。
それではどうやって『下線なし』の設定を行うのでしょうか？
答えはコチラ。
<a href="" style="text-decoration:none;">アンカーの下線が消える指定</a>
◆CSS HTML/XHTMLファイル内設定またはCSS外部ファイル設定
a { text-decoration:none; }
または
a [href] { text-decoration:none; }
※[href]のようにブラケットで括ったセレクタによる指定は未対応のブラウザもあります。
このようにCSSのtext-decoration プロパティを利用するとアンカーリンクのアンダーラインを非表示にすることが可能になります。
CSS text-decoration プロパティ仕様
下記リンク先には設定値や初期値、適用要素などCSS各バージョンにおけるtext-decorationのプロパティテーブルがあります。
CSS1 text-decoration / CSS2 text-decoration / CSS3 text-decoration
text-decorationならオーバーライン・上線/打ち消し線・抹消線/点滅も
逆にアンカーリンクに下線・アンダーラインを付けるには[none]の部分を[underline]、上部にライン(上線・オーバーライン)を付ける場合(何に使うんでしょう。。。)は[overline]、打ち消し線(中央に一本)にするには[line-through]、点滅させるには[blink](Netscape Navigatorのみ/IE未対応)にし、これらをスペース区切りで指定することにより一度に全てまたは一部を併せて適用させることもできます。
昨今、Netscap navigatorの流れを汲むFirefoxをはじめIEを除く複数ブラウザが[blink]をサポートしているようですが、W3C / CSS1仕様ではblink指定の認識は必要であるもののの必ずしも視覚効果を実装する必要はないと明記されています。
text-decorationは普通のテキスト・文字にも有効
ちなみにこれらの設定はアンカーリンクだけではなく普通のテキスト文字に対しても有効です。
と言うより、[text-decoration]は「テキスト装飾」という意味ですからテキスト文字を装飾することを想定したプロパティであり、テキストが設定されたアンカーリンクでも有効となるという方がより正確でしょう。
サンプルとして(改行を伴わない)インライン要素であり、「範囲」を表す<span></span>タグでCSSのインライン設定を例にとると(対応ブラウザでは)それぞれの設定が有効になります。
<span style=" text-decoration:none ; ">装飾なし</span>
装飾なし
<span style=" text-decoration:underline ; ">下線付き</span>
下線付き
<span style=" text-decoration:overline ; ">上線付き</span>
上線付き
<span style=" text-decoration:line-through ; ">打ち消し線</span>
打ち消し線
<span style=" text-decoration:blink ; ">点滅</span>
点滅
<style="" type="text/css">
.combined { text-decoration:underline overline line-through ; }
</style>
<span class="combined">下線/上線/抹消線を一括指定</span>
下線/上線/抹消線を一括指定
さて次は
クリックした時、立体的にボタンや文章が押されたように見せたい『疑似クラスhover編』です。
これも「どうやってやるんだろう？」と思った方も多いことと思います。ではどうぞ。
CSS/スタイルシート情報
- CSS(CSS1/CSS2/CSS3)プロパティサンプル
- CSS擬似クラス :hover
- CSSページ設定
- CSSページ背景色
- CSSページ背景画像設定
- CSSリンク下線・アンダーライン
