楽天RMSオンマウスでテキストリンクに下線を出してみよう(HTML編)

テキストリンクにオンマウスで下線TOP

楽天RMSでネットショップを作成していると、サイトのデザイン的にテキストリンクの下線(アンダーライン)が、ここは必要ないなーとか気になったことありませんか?

今回は、オンマウスの時だけ下線が表示されるパターンと表示しないパターンをHTML編でご紹介します。

では早速、HTMLの編集でCSS(スタイルシート)を適用して、カーソルがテキストリンクに乗った時だけ、下線(アンダーライン)を表示する書き方と表示しないソースの描き方を実装してみよう。

Sponsored Links

オンマウスでテキストリンクに下線を出す方法

次のソースを、記述することでオンマウスの時だけ下線が表示されるようになります。

<style type="text/css">
<!--
a { text-decoration:none; }
a:hover { text-decoration:underline; }
-->
</style>

オンマウスでテキストリンクに下線を表示させない方法

逆にオンマウス時に下線(アンダーライン)を表示したくない場合には、

a:hover { text-decoration:underline; }の
underlineのところを
noneに変更しましょう。

<style type="text/css">
<!--
a { text-decoration:none; }
a:hover { text-decoration:none; }
-->
</style>
underlineは下線を出しますよっていう値です。また、noneは装飾なし (下線を消す)値です。
Sponsored Links
合わせて読みたい
よろしければシェアお願いします
同じカテゴリーのコンテンツ一覧