CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅

CSSでアンカー(リンク)や文字の上線/下線/抹消線/点滅も自由自在ってホント！？

CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅

CSS text-decoration / アンカーリンク・文字に上線/下線/抹消線/点滅

　CSSを使うとテキスト文字列やアンカーリンクのスタイルを設定することもできます。

　CSSスタイルシートについては

• ホームページの体裁を整えるには？『CSSスタイルシート編』
• CSSスタイルシートを外部ファイルにするってどぉするの？

をご参照下さい。

アンカーリンクの下線・アンダーラインを非表示にする

　さて、あなたがここに来る為にクリックした次のアンカーリンクは下線がついたものでしたか？ついていませんでしたか？

　どちらをクリックしてもリンクは有効になるはずですが、いかがですか？

　これは好みで選んで頂ければよろしいかと思いますが何も指定しないと『下線(アンカー)付き』です。

　それではどうやって『下線なし』の設定を行うのでしょうか？

　答えはコチラ。

　このように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のインライン設定を例にとると(対応ブラウザでは)それぞれの設定が有効になります。

　さて次は

クリックした時、立体的にボタンや文章が押されたように見せたい『疑似クラスhover編』です。

　これも「どうやってやるんだろう？」と思った方も多いことと思います。ではどうぞ。

CSS/スタイルシート情報

• CSS / Cascading Style Sheets
• CSSのコンセプト
• CSSバージョン
• 【CSS共通定義】文法と記述方法
• CSSプロパティ設定方法
• CSS利用可能文字
• CSS＠ルールと規則集合ステートメント
• CSSプロパティの定義と設定方法
• CSSのコメント方法
• CSS解析エラーにおけるルール
• CSS数字と数値
• CSS/URL+URN=URI
• CSSのカウンター
• CSSの色・カラー
• CSS角度・時間・周波数
• CSS文書表現
• CSSセレクタ
• CSS擬似クラス・擬似要素
• CSS1/CSS 1.0
• 【CSS】CSS1プロパティ・属性一覧
• 【CSS】CSS1セレクタ一覧
• 【CSS】CSS1擬似クラス一覧
• 【CSS】CSS1擬似要素一覧
• CSS2/CSS 2.0
• CSS2/CSS 2.1
• 【CSS】CSS2プロパティ・属性一覧
• 【CSS】CSS2セレクタ一覧
• 【CSS】CSS2擬似クラス一覧
• 【CSS】CSS2擬似要素一覧
• CSS3
• 【CSS】CSS3プロパティ・属性一覧
• 【CSS】CSS3セレクタ一覧
• 【CSS】CSS3擬似クラス一覧
• 【CSS】CSS3擬似要素一覧

• CSSインライン設定
• CSSファイル内部設定
• CSS外部ファイル設定

• CSS−アップダウンhover
• CSS−ページ設定
• CSS−ページ背景色
• CSS−ページ背景画像設定
• CSS−リンク下線・アンダーライン

• レベル別メニュー
• 一覧メニュー
• ホームページ作成レベル別メニュー
• ウェブ開発レベル別メニュー