CSS: カラフルな Web リンクの下線をカスタマイズする_CSS/HTML

CSS 自体には HTML リンクの下線を直接変更する機能はありませんが、テクニックを使えば単調な Web リンクの下線をカラフルにすることができます。

1. 基本原則

まず、HTML リンクの下線をカスタマイズする最初のステップは、このグラフィックを水平方向に繰り返して下線効果を形成することです。 Web ページの背景を下線の後ろに表示したい場合は、透明な .gif グラフィックを使用できます。

第二に、下線グラフィックの高さが大きい場合は、テキストの高さを適切に上げて、あるテキスト行の下部と次のテキスト行の上部との間により大きなスペースができるようにする必要があります。 as p { 行の高さ: 1.5 } 。

カスタムリンクの下線の例

第三に、カスタム下線を表示するには、デフォルトの下線、つまり { 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 スタイル属性を定義する完全な例は次のとおりです:

a {
​​ テキスト装飾: なし
​​ 背景: url(underline.gif)repeat-x 100% 100%; ​​ パディングボトム: 4px; ​​ 空白: Nowrap
​ }


マウスがホバーしているときにのみカスタムの下線を表示したい場合は、元々リンク要素に直接設定されていた CSS 背景属性を:hover に変更するだけです。例:

a {

​​ テキスト装飾: なし;

​​ パディングボトム: 4px; ​​ 空白: Nowrap
​ }

a:hover {
​​ 背景: url(underline.gif)repeat-x 100% 100%;

​ }

2. 例の鑑賞

2 つの下線グラフィック、diamond.gif (波紋) と flowers.gif (花) があるとします。前者の高さと幅は 3 と 9、後者の高さと幅は 11 と 15 です。以下は 2 種類の下線を設定する完全な例です:

カスタムリンクの下線の例

Web ページのソースコードは次のとおりです:

​ 注: 対角線.gif と花.gif は、Web ページが配置されているのと同じディレクトリにコピーされています。

​

​

a#example1a {

​ テキスト装飾: なし;

​ 背景: url(diagonal.gif) 繰り返し-x 100% 100%

​ 空白: Nowrap
​ パディングボトム: 2px; ​ }

a#example1b {
​ テキスト装飾: なし;
​ 空白: Nowrap

​ パディングボトム: 2px; ​ }

a#example1b:hover {
​ 背景: url(diagonal.gif)repeat-x 100% 100%;
​ }

a#example2a {

​ テキスト装飾: なし;
​ 背景: url(flower.gif) 繰り返し-x 100% 100%
​ 空白: Nowrap

​ パディングボトム: 10px; ​ }

a#example2b {
​ テキスト装飾: なし;
​ 空白: Nowrap
​ パディングボトム: 10px; ​ }

a#example2b:hover {

​ 背景: url(flower.gif)repeat-x 100% 100%;
​ }

-->
​

​

例:

​

波紋静的下線、
​ マウスオーバー時に表示される波紋ライン。

​

花の静的下線、
​ マウスオーバー時に表示される花の下線。