css の設定（備忘録）

マウスがリンク文字上に乗った時だけ下線（アンダーライン）を表示する。

通常はアンダーラインを消す場合。

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

CSSでリンクエリアの幅を広げる方法

通常、テキストの場合のテキスト部のみがリンクエリアとなりますが
リンクエリアを広げたい場合の方法は以下を使うだけです。

display: block;

では実際に設定してみます。
テキストより縦横の幅を広げる場合は、padding、widthを使うといいです。
ポイントは aに 「display：block」と「padding」を設定することです。

【　css部　】

#swich	{
		background:url(images/sample.png); /*背景画像を使用する場合指定する*/
		margin:5px;
		width:170px;
		color:#000000;
		text-align:center;
		font-size:15px;
	}
#swich a
	{ 
		display: block;
		padding:148px 0px 5px 0px;
		text-decoration:none;
	}
#swich a:hover
	{
		text-decoration:underline;
	}

【　body部　】

<div id="swich">
<a href="sample.html">リンク幅を広げる！</a>
</div>

クリック時に表示されるリンク囲み点線を消す方法

IEやFireFoxでクリック時に表示される点線が気になる…。
リンク囲み点線を表示させない（消す）方法。

【 css部 】に以下を追加するだけです！

a { outline: none; }