スタイルシートマニア
ナビゲーションメニュー(基本Ⅰ) | ホームページカスタマイズ Tips
ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。
※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい。
まずは、基本的な作り方でホームページの左や右に配置する縦に並べるナビゲーションを作ってみます。
一般的にナビゲーションのマークアップにはul要素とli要素を使ってマークアップします。
<div id="menu01"> <ul> <li><a href="http://source-marine.net/css-mania">ホーム</a></li> <li><a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li> <li><a href="http://source-marine.net/source-branch">ソースブランチ</a></li> <li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li> <li><a href="http://source-marine.net/">ソースマリン</a></li> <li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li> </ul> </div>
まず、#menu01 ulで<div id=”menu01″>の中のul要素に対して横幅を210pxに設定します。横幅は全メニューの文字列が収まる大きさに揃えます。次に、ボーダーの設定ですが、今回はそれぞれのメニューをぴったりくっつけた形のナビゲーションにしますので、ul要素にもボーダーのスタイルを入れていきます。これがもし、一つ一つのメニュー項目に、ある程度の間隔があるタイプのナビゲーションであれば、li a にborder: 1px solid #ccc;とういうような記述だけでOKなのですが、今回はulに上、右、左にボーダーを入れて、li a で各項目に下のボーダーを入れていきます。
#menu01 ul { width: 210px; border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc; }
今回のデザインにリストマーカーは邪魔なのでlist-style: none;で消しておきます。
#menu01 li { list-style: none; }
次に、リストのリンク要素に対してスタイルを設定します。
まず、backgroundで背景色を指定、横幅を200pxでpadding-leftを10pxで文字位置を調整して合計210px、縦幅を25pxでpadding-topを5pxにして文字の位置を調整して合計30pxに設定します。次に、display:block;でlistをブロック要素にかえて、先ほど書いた下のボーダーを入れます。後は、お好みでtext-decoration入れたり、文字色を変えたり、背景色を変えたりして調整してください。
#menu01 li a { background: #ddd; width: 200px; height: 25px; padding-top: 5px; padding-left: 10px; border-bottom: 1px solid #ccc; display:block; text-decoration: none; color: #333; }
これだけでも十分ですが、ロールオーバーしたときのアクションが欲しいので#menu01 li a:hoverで設定します。
#menu01 li a:hover { background: #fff; }
以上で完成です。
« 前の記事 | 次の記事 » |