メニューの書き方その1

メニューの書き方はいろいろありますが、liタグを使用するのがよく使われており、確かに非常に管理がしやすく感じます。このメニューの書き方、カスタマイズ方法を何回かにわけて紹介します。

liタグでメニューを書いたときの基本的な構造は以下のとおりです。
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>

実際には次のように表示されます。

リストについて

メニューの前に丸がつくのはブラウザのデフォルトの設定です。
デフォルトスタイルシートを上書きして、違うリストマークを表示させたり、リストマークを非表示にすることができます。
リストマークの設定は「list-style-type」を使用します。 
ul{list-style-type:none;} /* リストマーク非表示 */
ul{list-style-type:square;} /* リストマークを四角に */
リストマークは四角以外にもいろいろあります。
詳細は、クイックリファレンスを参考にしてみてください。
ここでは割愛します。

余白について

liタグにはデフォルトスタイルシートによってあらかじめ余白が設けられています。
以下にFirefoxのデフォルトスタイルシートを示します。
ul{
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
  -moz-float-edge: margin-box;
}
リストの左側に40pxの余白がとられています。
その余白の中にリストマークが表示されています。
これは結構重要なことです。
IEの場合、この左側の余白を無くしたら、リストマークは非表示になります。
しかし、Firefoxの場合は、さらにその外にリストマークが表示されてしまうのです。
このブラウザの仕様の違いをよく知っておきましょう。
余白を消したらリストは消えたものだと勘違いしてしまうIEユーザは結構多いので、注意しましょう。

次回は、リストを横にする方法を紹介します。
top