ホームページのネタ帳

リストをボタンみたいにする方法

2012年7月19日

リストをボタンみたいに見せる方法です。

sampleは、ただのテキストリンクにちょっとした工夫をして、ボタンのようにしています。

 

■sample

 

sampleは「background-image」やblockの間に「margin」があいてしまっていたりしていますが。。。

下記のソースのみであれば、間があくことなく表示されます。

 

【html】

1
2
3
4
5
6
<ul>
	<li><a href="#">テキスト</a></li>
	<li><a href="#">テキスト</a></li>
	<li><a href="#">テキスト</a></li>
	<li><a href="#">テキスト</a></li>
</ul>

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul {
	list-style-type: none;
}
a {
	background-color: #336699;
	color: #fff;
	display: block;
	width: 150px;
	padding: 5px 10px;
	text-decoration: none;
}
a:hover {
	background-color:#113366;
}

 

上記のみだとリンクの境目がわからないので、以前ご紹介した、「最後のli要素の下に表示される線を表示させない方法」を付け足すと、いい感じになると思います。


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp