CSSでリンクの文字と下線の間隔（スペース）を空ける方法
CSSでリンクの文字と下線の間隔（スペース）を空ける方法を紹介します。ビギナー向けの内容です。
変更前
変更後
１．リンクの文字と下線の間隔を空ける
リンクの文字と下線の間隔を空けるには、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」ではなく、意味のある適切な名称を設定してください。
２．プロパティの説明
１項で利用しているCSSの各プロパティについて、ざっと説明します。
text-decoration: none;text-decorationプロパティに「none」を指定することで、デフォルトで表示されているリンクの下線を非表示にします。
border-bottom: 1px solid blue;border-bottomプロパティで罫線（下線）を描画します。borderプロパティは罫線を表示するためのものですが、擬似的に下線として利用します。
padding-bottom: 2px;padding-bottomプロパティで、罫線（下線）と文字の距離を指定します。
なお、リンクを文中に表示している場合にpadding-bottomプロパティで罫線を表示しても、全体のレイアウトは崩れないと思います（下）。
３．マウスをポイントしたときだけ罫線を表示する
１項では常に下線を表示します。マウスをポイントしたときだけ（リンクの文字と下線の間隔を空けて）罫線を表示するには、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プロパティ）は指定していませんが、ブラウザによって微妙に異なるみたいなので、できれば指定した方がいいでしょう。
以上です。認識誤りや「こうした方がいい」といった点がありましたらご指摘ください。
Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について
当ブログのカレンダーをGoogle Chromeで閲覧したとき、テーブルのtd要素の高さが2倍になる事象が発生しましたので、問題点と対処方法についてまとめました。
Firefox/IE/Safariでの表示
Google Chromeでの表示
このカレンダーでやっていることは下記の2点です。
- 日付のリンクにポイントしたときに日付全体の背景色を変更
- 本日の日付に枠線を表示（上記のスクリーンショットには表示がありませんが次項のサンプルで表示させています）
１．切り分け
ブログでの表示で発生したので、何か別のセレクタが影響しているかもしれないと思い、カレンダー部分のHTMLとCSSのみ切り出して、さらに必要なセレクタのみを抽出したサンプルを作って確認しましたが、結果は同じでした。
Firefox/IE/Safariでの表示
Google Chromeでの表示
検証してみると、td要素の高さが56pxになっています。
Computed Styleを見るとheightプロパティが56pxになっています。
２．HTMLとCSS
サンプルのHTMLとCSSを示します。
HTML
<table>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><span>
<a href="http://user-domain/2012/02/01/">1</a>
</span></td>
<td><span>
<a href="http://user-domain/2012/02/02/">2</a>
</span></td>
<td><span>
<a href="http://user-domain/2012/02/03/">3</a>
</span></td>
<td><span>
<a href="http://user-domain/2012/02/04/">4</a>
</span></td></tr>
<tr>
<td><span>
<a href="http://user-domain/2012/02/05/">5</a>
</span></td>
...中略...
<td><span>
<a href="http://user-domain/2012/02/29/">29</a>
</span></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>CSS
th {
padding-bottom: 4px;
text-align: center;
}
td {
padding: 0;
text-align: center;
}
td span {
line-height: 1.8;
}
td span a {
display: block;
text-decoration: none;
}
td span a:hover {
color: #fff;
background: #00f;
}
.today {
display: block;
border: 1px solid #444;
}２．原因
要素セレクタ「td span」に設定しているline-heightプロパティが原因のようで、これが原因で2倍の高さになるようです。
３．対処方法
line-heightプロパティを「td」に移動することで解決しました。
修正前
td {
padding: 0;
text-align: center;
}
td span {
line-height: 1.8;
}修正後
td {
padding: 0;
text-align: center;
line-height: 1.8;
}line-heightプロパティを「td span a」に移動しても解決しますが、td要素に設定しておけば、リンクがない日付の高さも揃います。
