スタイルシートでリンク文字を飾ろう

スタイルシートを使えばウェブデザインは思いのまま！ページ管理も楽になり、大幅なデザイン変更も楽になっちゃうよ！スタイルシートを使いこなして脱入門者になろう！サイト作りの基礎を学びたい方は >> 本館ウェブマイスタｰ	さくらインターネットたった１２５円という破格の値段で高機能なレンタルサーバー。業界最大手で安心して使えるよ。３ヶ月無料キャンペーン実施中!!　レンタルサーバーのSpeever 一番高いプランも今なら無料だよ

リンク文字は、他の文字とは違う見た目にして目立たせる。
これに従えば何やってもいいと思って、色んなことが可能だ。

・下線を破線にしてみる。

a {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #0066CC;
	text-decoration: none;
}
a:hover {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #0066CC;
	text-decoration: none;
}

通常のリンク下線表示を消して(t-decoration: none;)、枠の下線のみを破線で表示させている。
hoverはマウスカーソルが上にきたときの指定だ。

・バックに色をつけてみる。

a {
	background-color: #FFCCCC;
}
a:hover {
	background-color: #FFCCCC;
}

これらを実際に使用するときは、通常のとhoverとで別の内容にすれば良いだろう。
たとえば、これらを組み合わせ、通常は破線表示、マウスを乗せると背景色を変える方法がある。

・マウスをのせてみてね。

a {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #0066CC;
	text-decoration: none;
}
a:hover {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #0066CC;
	text-decoration: none;
	background-color: #FFCCCC;
}

アイディア次第で、このように遊べることを覚えておこう。

ウェブデザインをスタイルシートでおこなおう！