CSSでリンクの文字と下線の間隔(スペース)を空ける方法

CSSでリンクの文字と下線の間隔(スペース)を空ける方法

Posted at March 13,2012 2:55 AM
Tag:[]

CSSでリンクの文字と下線の間隔(スペース)を空ける方法を紹介します。ビギナー向けの内容です。

変更前
変更前

変更後
変更変更後

1.リンクの文字と下線の間隔を空ける

リンクの文字と下線の間隔を空けるには、CSSの罫線(borderプロパティ)を擬似的に利用することで実現します。

具体的には、以下のようなCSSを設定します。a要素にclass属性「foo」を設定し、CSSにクラスセレクタ「.foo」を追加します。

HTML

<a class="foo" href="...">テストです</a>

CSS

.foo {
   text-decoration: none;
   border-bottom: 1px solid blue;
   padding-bottom: 2px;
}

実際に設定する場合、class属性値は「foo」ではなく、意味のある適切な名称を設定してください。

2.プロパティの説明

1項で利用しているCSSの各プロパティについて、ざっと説明します。

text-decoration: none;

text-decorationプロパティに「none」を指定することで、デフォルトで表示されているリンクの下線を非表示にします。

border-bottom: 1px solid blue;

border-bottomプロパティで罫線(下線)を描画します。borderプロパティは罫線を表示するためのものですが、擬似的に下線として利用します。

padding-bottom: 2px;

padding-bottomプロパティで、罫線(下線)と文字の距離を指定します。

なお、リンクを文中に表示している場合にpadding-bottomプロパティで罫線を表示しても、全体のレイアウトは崩れないと思います(下)。

レイアウト

3.マウスをポイントしたときだけ罫線を表示する

1項では常に下線を表示します。マウスをポイントしたときだけ(リンクの文字と下線の間隔を空けて)罫線を表示するには、CSSを次のように設定してください。

.foo {
   text-decoration: none;
}
.foo:hover {
   border-bottom: 1px solid blue;
   padding-bottom: 2px;
}
.foo:active {
   border-bottom: 1px solid #ff0000;
   padding-bottom: 2px;
}
.foo:visited {
   border-bottom: 1px solid #800080;
   padding-bottom: 2px;
}

最初の「.foo」はリンク全体の装飾で、「text-decoration: none;」とすることで下線を非表示にします。

リンク全体の装飾

「.foo:hover」はマウスでリンクをポイントしたときの装飾を指定します。

リンクをポイントしたときの装飾

「.foo:active」はリンクをクリックしたときの装飾を指定します。

リンクをクリックしたときの装飾

「.foo:visited」は訪問済みリンクの装飾を指定します。

訪問済みリンクの装飾

上記のサンプルではテキストリンクの配色(colorプロパティ)は指定していませんが、ブラウザによって微妙に異なるみたいなので、できれば指定した方がいいでしょう。

以上です。認識誤りや「こうした方がいい」といった点がありましたらご指摘ください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)