横並びメニュー

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

< サンプル >

< スタイルシート >

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"> <!-- 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"); /* マウスが乗った時の背景画像 */ } --> </style> </head> <body> <ul> <li><a href="リンク先URL">ここに文字</a></li> <li><a href="リンク先URL">ここに文字</a></li> </ul> </body> </html>

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

メニュー用の画像素材(576*70)

background image for horizontal menu
waterdrop70_1.jpg 576*70 18796b
background image for horizontal menu
waterdrop70_2.jpg 576*70 32731b
background image for horizontal menu
waterdrop70_3.jpg 576*70 11688b
background image for horizontal menu
waterdrop70_4.jpg 576*70 17187b
background image for horizontal menu
waterdrop70_5.jpg 576*70 16965b
background image for horizontal menu
butterfly1.jpg 576*70 32659b
background image for horizontal menu
butterfly2.jpg 576*70 40778b
background image for horizontal menu
butterfly3.jpg 576*70 32664b
background image for horizontal menu
green_flower1.jpg 576*70 30928b
background image for horizontal menu
green_flower2.jpg 576*70 29470b
background image for horizontal menu
green_flower3.jpg 576*70 29608b
background image for horizontal menu
green_flower4.jpg 576*70 31054b
background image for horizontal menu
zebra1.jpg 576*70 29304b
background image for horizontal menu
zebra2.jpg 576*70 31735b
background image for horizontal menu
zebra3.jpg 576*70 26587b
background image for horizontal menu
asterisk70.jpg 576*70 13873b

※ スタイルで横幅を指定する時に、576px以上にすると画像の継ぎ目が出てしまいます。そんな大きなメニューは作られないと思いますが。

上に戻る