リストタグで作るメニューサンプル(外部スタイルシート使用)
リストを横に並べるには?
各リスト項目<li>に対して float:left を適用し、各項目を左に回り込ませ横並びにします。
css/htmlソース
ID "menu" の部分は任意の名前です。自分の好きな名前にしても、このままでもOKです。
初心者の方 →スタイルシートIDの名前とhtmlソースIDの名前を一致させて下さい。 横幅・フォントのサイズは、ご自分のサイトに合わせて変えて下さい。フォントサイズについてはこちらに詳細があります。
超シンプルな横並びのメニュー
1. オンマウスで背景色と文字色が変わるシンプルなメニュー
2. 項目の間に余白を空けない場合
上記 1 の css スタイルシート | 上記 1 の htmlソース |
上記 2 の css スタイルシート | 上記 2 の htmlソース |
シンプルな横並びメニュー/ オンマウスでインデックス背景色が変わる
上記 css スタイルシート | 上記 htmlソース |
オンマウスで背景色が変わるボタン風のメニュー
border-style:inset outsetで窪みを作っています。IE以外では正しく表示されない可能性が・・・
上記 css スタイルシート | 上記 htmlソース |
画像を使ったメニュー
オンマウスで画像(矢印)が表示される。点線を消すにはスタイルシートのborder: 0;
上記 css スタイルシート | 上記 htmlソース |
画像を使ったメニュー
オンマウスで画像(リストマーク)が入れ替わる。点線を消すにはスタイルシートのborder: 0;
上記 css スタイルシート | 上記 htmlソース |
画像を使ったメニュー
ボタン台(画像)を使ったリストメニュー。横幅(width)縦(height)は画像のサイズに合わせます。オンマウスでアンダーラインが表示される。
上記 css スタイルシート | 上記 htmlソース |
横並びリストをセンタリングする
「text-align:center;」 「margin:auto;」などいろいろ試してみましたがセンタリングされません。リストのセンタリングは単純ではありません。ブラウザの壁というものがありましたが 「position: relative;」(相対的な位置指定)でうまくセンタリングできました。
上記 css スタイルシート | 上記 htmlソース |
番号付きリスト 定義型リスト リストのインデント リストの左余白をなくする方法 CSS・リストで作るメニュー