横並びメニューを指定 | ぱたぱたアニメ館

リストタグでの横並びメニューの作り方です。背景画像を使っているのですが、使う画像によって雰囲気もかなり変わるので楽しいですよ。

＜サンプル＞

＜スタイルシート＞

ul { margin: 0; /* 外側の余白0 */ padding: 0; /* 内側の余白0 */ list-style-type: none; /* リストマーカー非表示 */ } ul li { float: left; /* li要素を横に並べる */ width: 300px; /* 横幅 */ } ul li a { display: block; /* a要素をブロック形式で表示する */ margin: 1px; /* 外側に1pxの余白 */ padding: 15px 0px; /* 上下15pxの余白、左右は0 */ color:#ffffff; /* 文字色 */ font-weight: bold; /* 文字の太さ */ text-align:center; /* 文字の中央配置 */ text-decoration: none; /* リンク時の下線を消す */ border: 1px solid #0000cc; /* 枠線のスタイル */ background-color:#6699ff; /* 背景色 */ background-image:url("背景画像のURL"); /* 背景画像 */ border-radius:0.5em; /* 角を丸くする */ } ul li a:hover { color:#0000cc; /* マウスが乗った時の文字色 */ border: 1px solid #0000cc; /* マウスが乗った時の枠線のスタイル */ background-color:#ffffff; /* マウスが乗った時の背景色 */ background-image:url("背景画像のURL"); /* マウスが乗った時の背景画像 */ }

＜ HTML ＞

<ul> <li><a href="リンク先URL">ここに文字</a></li> <li><a href="リンク先URL">ここに文字</a></li> </ul>

ピンクの部分を変えて <head>～</head>に入れてください。緑の部分（/*～*/）は、スタイルシートの説明です。そのままでも問題ありません。スタイルシートも、横幅や色などを自分の好きなように変えてみてくださいね。

＜全体のサンプルソース＞

<html> <head> <title></title> <style type="text/css">  </style> </head> <body> <ul> <li><a href="リンク先URL">ここに文字</a></li> <li><a href="リンク先URL">ここに文字</a></li> </ul> </body> </html>

赤い文字の部分は、 <head>～</head>にスタイルシートを入れる時に追加してください。縦のメニューにしたい時は、「float: left;」を外してください。