具体的な記述方法
それでは、具体的な記述方法をご紹介致しましょう。
まずは、スタイルシートの記述から。
次のソースを、HTMLソースのhead要素内（<head>～</head>内）に記述します。
<style type="text/css"><!--
a.declink {
text-decoration: none;
border-bottom: 3px blue dotted;
}
--></style>
■declink
このスタイルに付けた名前（クラス名）です。複数のスタイルを使い分ける場合は、それぞれ異なる名前を付ける必要があります。
※名前には数字も使えますがアルファベットから始める必要があります。
■text-decoration: none;
標準で表示される「リンクの下線」を消します。
※今回の方法では、本来表示される「リンクの下線」を消してから、代わりに「枠線の下線」を表示させています。 ですから、どの種類の線を引きたい場合でも、この「リンクの下線を消す」記述は必要です。
■border-bottom: 1px blue dotted;
border-bottomプロパティで、枠線の下線の装飾ができます。
ここでは、「1px」「blue」「dashed」の3つの値を記述しています。これらは順に、線の太さ、線の色、線の種類を示しています。（それぞれ半角スペースで区切って記述します。）
線の色は、色名の他に「#cc0000」などでの指定も可能です。なお、「線の種類」は4種類あり、次の記述で指定できます。
- solid ： 実線
- double ： 二重線
- dashed ： 破線
- dotted ： 点線
※線が細い場合は、ブラウザによっては「dashed（破線）」と「dotted（点線）」が同じように見えることがあります。
線の種類と色を変えるだけなら、以上の指定で構わないのですが、下線と文字との間隔を広げたい場合には、 次のように記述を加える必要があります。
<style type="text/css"><!--
a.declink {
text-decoration: none;
border-bottom: 3px blue dotted;
padding-bottom: 2px;
}
--></style>
■padding-bottom: 2px;
padding-bottomプロパティで、枠線と文字との距離を指定します。
ここでは、「2px」と指定されていますので、枠線と文字の間に2ピクセルの間隔が開くことになります。
リンクの記述
次に、上記で指定したスタイルを適用するリンクの記述方法です。
普通のリンクと同様に<a>タグを使います。
<a href="(url)" class="declink">リンクですよ</a>
■class="declink"
「class=」のあとに、適用したいスタイルのクラス名を記述します。
ここでは、先ほどのスタイルの記述部分で、「a.declink ……」と記述していますので、「declink」と記述しています。
【関連記事】
