楽天広場HTML講座リンクの下線を消す方法

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

2008.03.09

テーマ：ホームページ作成の悩み(550)

カテゴリ：カテゴリ未分類

・リンクの方法

1. リンクの下線を消すには、 text-decoration:none; を適用する事で可能になります。

要素に直接書く場合

&LT;a href="リンク先URL"&GT;通常はこのように下線が表示されます。&LT;/a&GT;
↓
通常はこのように下線が表示されます。

<a href="リンク先URL" 半角スペース style=" text-decoration:none; ">
このリンクの下線を消してあります。</a>
↓

このリンクの下線を消してあります。

2. また、下線を消したリンクにマウスポインターを上に持っていくと
再度下線を表示させる方法もあります。

指定する擬似要素は :hover

この擬似要素は、&LT;head&GT;～&LT;/head&GT;に書いてください。

a　　　　　{ text-decoration:none;}
a :hover 　{ text-decoration:underline;}

リンクにマウスを合わせると下線が表示されるようになります。

3. また、リンク部分の文字の色を変える方法もあります。
これらを &LT;body&GT; に入れて設定します。

設定方法
まだ見ていないリンク色 link="赤"
既に見たリンク色 vlink="緑"
リンクを選択した時の色 alink="黄"

&LT;body link=" #ff0000 " vlink=" #008000 " alink=" #ffff00 "&GT;

&LT;p&GT;
&LT;a href="リンク先URL"&GT;リンク赤色 &LT;/a&GT;　←　まだ見ていない&LT;br&GT;
&LT;a href="リンク先URL"&GT;リンク緑色 &LT;/a&GT;　←　既に見た&LT;br&GT;
&LT;a href="リンク先URL"&GT;リンク黄色 &LT;/a&GT;　←　リンクを選択した時
&LT;/p&GT;

&LT;/body&GT;