ulタグでメニューを作る
ulタグをふつーに使うと、縦方向に伸びていきますが、これを横に詰めて表示させ、 横並びのメニューを作るというテクニックです。
テクニック使用前
テクニック使用後
やり方
１：HTMLを書く
HTMLはこんな感じになります。
<ul class="sample">
<li><A href="#">トップページ</A></li>
<li><A href="#">初心者の館</A></li>
<li><A href="#">私的デザイン論</A></li>
<li><A href="#">CSSテクニック</A></li>
<li><A href="#">ギャラリー</A></li>
</ul>
２：スタイルシートを書く
スタイルシートはこんな感じになります。
ul.sample{
width:100%;
margin-top:20px;
font-size:12px;
padding-left:0;
margin-left:0;
}
ul.sample li{
list-style:none;
background:url('../../img/head-menu-back.gif');
padding:3px 10px;
width:80px;
float:left;
border-width:2px;
border-color:#FFEEDB;
border-style:ridge;
}
解説
今回のポイントはul.sample liに設定したfloat:left;です。
極端な話、これさえ設定すれば、横に並べることができます。
ほかのプロパティは全て装飾に使っています。
一応、ルール上はfloatを使ったボックスにはwidthを指定しなければいけなし、レイアウトが崩れることも多いのですが、今回のに限っては指定しなくてもそんなに問題はないようです。
list-style:none;を使ってリストマークを消したり、余白やボーダー、背景をつかって装飾をしていきます。 リンクにもスタイルを指定すると、さらにいろいろできます。ロールオーバーリンクを参考にしてみてください。
divタグでも同じようなことができるのですが、このulタグを使ったほうが、何かと都合がいいです。
使いこなすための＋α
このテクニックの後に続く要素にはclear:bothを指定してあげてください。 ブラウザーで確認してみると表示が変だったりするので、どこに指定すればいいかはすぐに分かると思います。
今回は横並びにするためfloat:left;を使いましたが、使わずに縦並びのメニューにしても、 十分使えます。
- トップページ
- 初心者の館
- 私的デザイン論
- CSSテクニック
- ギャラリー
classを加えて、項目ごとに背景を変えたり、 リンクにもスタイルを追加して見栄えの強化をすることもできます。
自分なりの活用法を見つけてみてください。