ウェブサイト上で、他のページや他のサイトに飛ぶための機能を「ハイパーリンク機能」と言いますが、通常ブラウザで閲覧する際はユーザーがそれとすぐわかるように、そのテキスト箇所のみ色が変わっていたり下線が引いてあったりします。
デザイナーやコーダーの皆さんであれば、単にアンカータグで囲むだけで勝手にブラウザがテキストに下線を引いてくれるのはご承知の通りかと思います。
しかしデフォルトのままだと何か寂しいというか、見た目を色々と工夫してみたくなるのは制作者としては当然の欲求でしょう。と言うことで、今回はCSSを使用してカスタマイズする方法を備忘録として書き記しておこうと思います。
基本の「text-decoration: underline;」
基本はやはり、下記のようにマウスオーバーで下線のオンオフを切り替える手法ですね。
a:link { text-decoration: underline;}
a:hover { text-decoration: none;}
:link 疑似クラスの[ text-decoration ]を[ none ]に設定するのは、ユーザビリティ上好ましくないです。ユーザーが見てすぐそれと判別できるよう、下線を引いておくのがベターでしょう。しかし、この方法ですと下線のみ色を変更することができません。
CSSで下線を引いてみる
であれば、[ border-bottom ]で下線を引きましょう。
a{ border-bottom: 1px solid orange }
この方法であれば、下線の色のみを変更することができますし、
[ solid ]・・・1本線
[ double ]・・・2本線
[ dotted ]・・・点線
[ dashed ]・・・破線
のように、線の種類を変更することもできます。
他にも[ groove ]、[ ridge ] などの指定もありますが、正直パッと見てよく分からないのであまり使いどころが無い気がします。
background: linear–gradient で文字の背景に下線を引く
テキストに、まるで蛍光マーカーで線を引いたような効果を出すため、線形グラデーションを表現するための[linear–gradient() ]を指定する方法が一時期流行っていましたが、この方法を使って下線を引くこともできます。
background: linear–gradient( black, black ) no-repeat;
background-size: 100% 1px;
background-position: 0 1.2em;
上記のように指定すると、黒の下線が指定箇所の横幅100%で1pxの太さの線が文字の上から1.2emの場所に引かれることになります。ちなみに、上記の場合[ padding-bottom ]で余分にスペースを取っておかないと、下線が見切れて表示されませんのでご注意を。
CSS3での新たなプロパティ
まだ勧告候補の段階ですが、text-decorationについて新たなプロパティが定義されているようです。現在ほとんどのブラウザで未対応ですが、[ text-decoration-style ]プロパティで[ wavy ]と指定することで波線を引くこともできるようです。
いずれどんどんと、新しい表現方法が使用できるようになるのでしょう。楽しみですね。