TopCSS > 2012年3月
2012年3月13日

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

March 13,2012 2:55 AM
Tag:[]
Permalink

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プロパティ)は指定していませんが、ブラウザによって微妙に異なるみたいなので、できれば指定した方がいいでしょう。

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

Comments [0] | Trackbacks [0]
2012年3月 9日

Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について

March 9,2012 12:55 AM
Tag:[, ]
Permalink

当ブログのカレンダーをGoogle Chromeで閲覧したとき、テーブルのtd要素の高さが2倍になる事象が発生しましたので、問題点と対処方法についてまとめました。

Firefox/IE/Safariでの表示
Firefoxでの表示

Google Chromeでの表示
Google Chromeでの表示

このカレンダーでやっていることは下記の2点です。

  • 日付のリンクにポイントしたときに日付全体の背景色を変更
  • 本日の日付に枠線を表示(上記のスクリーンショットには表示がありませんが次項のサンプルで表示させています)

1.切り分け

ブログでの表示で発生したので、何か別のセレクタが影響しているかもしれないと思い、カレンダー部分のHTMLとCSSのみ切り出して、さらに必要なセレクタのみを抽出したサンプルを作って確認しましたが、結果は同じでした。

サンプル

Firefox/IE/Safariでの表示
Firefoxでの表示

Google Chromeでの表示
Google Chromeでの表示

検証してみると、td要素の高さが56pxになっています。

Firefoxでの表示

Computed Styleを見るとheightプロパティが56pxになっています。

Firefoxでの表示

2.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;
}

2.原因

要素セレクタ「td span」に設定しているline-heightプロパティが原因のようで、これが原因で2倍の高さになるようです。

3.対処方法

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要素に設定しておけば、リンクがない日付の高さも揃います。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3