リストタグで作るメニューサンプル(スタイルシート使用)
css/htmlソース
ID "menu" の部分は任意の名前です。自分の好きな名前にしても、このままでもOKです。
初心者の方 →スタイルシートIDの名前とhtmlソースIDの名前を一致させて下さい。 横幅・フォントのサイズは、ご自分のサイトに合わせて変えて下さい。フォントサイズについてはこちらに詳細があります。
下記のサンプルは横幅のサイズを指定しています。親要素がある場合は、サイズを指定せずに、margin、paddingで調整する方法が上手くいきます。サンプル
シンプルなリストメニュー
1. オンマウスで背景色と文字色が変わるシンプルなメニュー
2. 余白を空けない場合
上記 1 の css スタイルシート | 上記 1 の htmlソース |
上記 2 の css スタイルシート | 上記 2 の htmlソース |
シンプルなメニュー/ オンマウスでインデックス背景色が変わるリストメニュー
上記 css スタイルシート | 上記 htmlソース |
インデックス背景色はそのまま、オンマウスで背景色が変わるシンプルなリストメニュー
上記 css スタイルシート | 上記 htmlソース |
オンマウスで背景色が変わるボタン風のメニュー
border-style:inset outsetで窪みを作っています。IE以外では正しく表示されない可能性が・・・
上記 css スタイルシート | 上記 htmlソース |
画像を使ったリストメニュー/オンマウスで画像(矢印)が表示される
上記 css スタイルシート | 上記 htmlソース |
画像を使ったリストメニュー オンマウスで画像(リストマーク)が入れ替わる。
点線を消すにはスタイルシートのborder: 0;
上記 css スタイルシート | 上記 htmlソース |
ボタン台(画像)を使ったリストメニュー/ オンマウスでアンダーラインが表示される
横幅(width)は画像のサイズに合わせる。sampleに使用した画像のサイズは w180 x h32です
上記 css スタイルシート | 上記 htmlソース |
番号付きリスト 定義型リスト リストのインデント リストの左余白をなくする方法 CSS・リストで作るメニュー