マウスを合わせるとリンクのアンダーラインが横に伸びる方法

マウスを合わせるとリンクのアンダーラインが横に伸びる方法をお伝えします。

この方法はホームページに動きが出るため、オシャレに見えますし、「これがリンクだ」ということが分かりやすくなるメリットがあります。

なお、ここでは、「リンクのアンダーラインが横に伸びる方法」と「リンクのアンダーラインが中央から両サイドに伸びる方法」の2つの方法をご紹介します。

カスタマイズ方法もお伝えするので、ぜひ参考にしてくださいね。

■ マウスを合わせるとリンクのアンダーラインが横に伸びる方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：リンクを表示したい箇所に、下記のソースを入れる。

<a href="index.html" class="underline-effect">マウスを合わせるとアンダーラインが横に伸びるリンク</a>

上記のソースで、「index.html」の個所は、リンク先のファイル名を入れるようにしてください。

なお、リンクの文字については、自由に変更することができます。

手順３：リンクにマウスを合わせて、アンダーラインが伸びることを確認する。

リンクにマウスを合わせて、下記のリンクように、アンダーラインが横に伸びれば、確認作業は完了です。

また、念のため、リンクをクリックして、リンク先に飛ぶことも確認しましょう。

■ リンクのアンダーラインを中央から両サイドに伸ばすには？

リンクのアンダーラインを中央から両サイドに伸ばすには、上記の手順で、CSSファイル（style.css）に入れた記述を消して、代わりに、下記の記述を入れます（入れ替えます）。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

これで、下記のリンクのように、リンクのアンダーラインが中央から両サイドに伸びるようになります。

■ 【カスタマイズ方法】リンクの色を変更する方法

リンクの色を変更するには、CSSファイル（style.css）に入れた記述の中で、「color: #0000ff;」の箇所を変更すれば、リンクの色を変更することができます。

たとえば、「color: #008080;」などに変更する形ですね。

なお、「color」の記述は２箇所あるのですが、「リンクの色」と「マウスを重ねたときのリンクの色」になるので、表示を確認しながら修正してみてください。

■ 【カスタマイズ方法】リンクのアンダーラインの色を変更する方法

リンクのアンダーラインの色を変更するには、CSSファイル（style.css）に入れた記述の中で、「background-color: #DAA520;」の箇所を変更すれば、リンクのアンダーラインの色を変更することができます。

たとえば、「background-color: #bdc3c7;」などに変更する形ですね。

これについても、実際に修正してみて、表示（アンダーラインの色）を確認してみてください。