CSS 自体には HTML リンクの下線を直接変更する機能はありませんが、テクニックを使えば単調な Web リンクの下線をカラフルにすることができます。
1. 基本原則
まず、HTML リンクの下線をカスタマイズする最初のステップは、このグラフィックを水平方向に繰り返して下線効果を形成することです。 Web ページの背景を下線の後ろに表示したい場合は、透明な .gif グラフィックを使用できます。
次に、下線グラフィックの高さが大きい場合は、テキストの高さを適切に上げて、テキストの 1 行の下部と次のテキスト行の上部との間のスペースを大きくする必要があります。たとえば、p {行の高さ: 1.5;
カスタムリンクの下線の例3 番目に、カスタム下線を表示するには、デフォルトの下線、つまり { text-decoration: none } を非表示にする必要があります。
4 番目に、リンク要素の下線グラフィックを設定し、カスタム下線を作成します。下線グラフィックがunderline.gifであると仮定すると、下線グラフィックを設定するためのCSSコードは、{background-image: url(underline.gif); となります。
第 5 に、下線グラフィックを垂直方向ではなく水平方向に繰り返す必要があります。そうしないと、下線がテキストの後ろに隠れてしまいます。下線を水平方向にのみ繰り返す必要があるコードは、次のとおりです。
6 番目に、(フォント サイズに関係なく) グラフィックがリンク テキストの下に表示されるようにするには、background-position 属性を使用してグラフィックをリンク要素の下部に配置します。矢印などの下線グラフィックの場合は、グラフィックの水平方向の配置も考慮する必要がある場合があります。下線グラフィックを右下隅に配置するとします。CSS コードは次のようになります。
7 番目に、リンク テキストの下にカスタム グラフィック用のスペースを確保するために、適切な空白を追加する必要があります。リンク テキストに対する下線グラフィックの具体的な位置はテキストのサイズに関係しますが、一般的には、まず下の余白を下線グラフィックの高さと同じにし、必要に応じて調整します。例: {padding-bottom: 4px;
第 8 に、下線グラフィックはリンク要素の下部に配置されるため、リンクが改行しないようにする必要があります (リンクが複数行にまたがることを許可する場合、次の行のリンク テキストのみにカスタムの下線)。 CSS の空白属性を使用して、リンク テキストが折り返されないようにします。つまり、{white-space:nowrap; です。
要約すると、リンク要素の CSS スタイル プロパティを定義する完全な例は次のようになります。
{
テキスト装飾: なし。
背景: URL(underline.gif)repeat-x 100% 100%;
パディングボトム: 4px;
ホワイトスペース: ナラップ;
}
マウスがホバーしているときにのみカスタムの下線を表示したい場合は、最初にリンク要素に直接設定されていた CSS 背景プロパティを:hover に変更するだけです。次に例を示します。
{
テキスト装飾: なし。
パディングボトム: 4px;
ホワイトスペース: ナラップ;
}
a:ホバー{
背景: URL(underline.gif)repeat-x 100% 100%;
}
2. 例の鑑賞
2 つの下線グラフィック、diamond.gif (波線) と flowers.gif (花) があるとします。前者の高さと幅は 3 と 9、後者の高さと幅は 11 と 15 です。 2 種類の下線を設定する完全な例を次に示します。
カスタムリンクの下線の例Web ページのソースコードは次のとおりです。
注: 対角線.gif と花.gif は、Web ページが配置されているのと同じディレクトリにコピーされています。
<html>
<頭>
<title>元</title>
<スタイルタイプ=テキスト/css>
a#例1a {
テキスト装飾: なし。
背景: URL(diagonal.gif)repeat-x 100% 100%;
ホワイトスペース: ナラップ;
パディングボトム: 2px;
}
a#example1b {
テキスト装飾: なし。
ホワイトスペース: ナラップ;
パディングボトム: 2px;
}
a#example1b:ホバー {
背景: URL(diagonal.gif)repeat-x 100% 100%;
}
a#例2a {
テキスト装飾: なし。
背景: URL(flower.gif) 繰り返し-x 100% 100%;
ホワイトスペース: ナラップ;
パディングボトム: 10px;
}
a#例2b {
テキスト装飾: なし。
ホワイトスペース: ナラップ;
パディングボトム: 10px;
}
a#example2b:ホバー {
背景: URL(flower.gif) 繰り返し-x 100% 100%;
}
-->
</スタイル>
</head>
<本文>
<p>例:</p>
<p> <a href=# id=example1a>リップル静的下線</a>、
<a href=# id=example1b>マウスを置いたときに表示される波紋のライン</a>。 </p>
<p> <a href=# id=example2a>花の静的な下線</a>、
<a href=# id=example2b>マウスを置いたときに表示される花の下線</a>。 </p>
</body>
</html>