リストで横並びのメニューを作ろう

メニューリストなどの項目をＨＴＭＬ上で記述する際に、リスト項目として<ul>、<li>を使って記述しておき、それをブロック要素にして横向きに表示させたい。そんなときは「display:block」を使用しよう。

この方法はCSSで記載するメニューとして多く利用されている。リストとして記載することでHTMLを簡潔に記述することができ、また書き換えが簡単にできるというメリットがある。これを使うことで、HTML上でインライン要素として定義される項目が、ブロック要素として利用される。
逆に<h1>、<h2>などのブロック要素を「display:inline」としてインライン要素として利用することもできる。

リスト表示の周りにborderを使ってボックス表示させると、文字列のない部分にカーソルが来てもリンクが反応するので、文字列だけでなくボックス全体をリンクとして機能させられる。このためa:hoverなどのリンクを利用するときにもボックス全体の色を変えたいたきなどにも必ず「display:block」を指定しておこう。また通常は縦に改行されてしまうリストも「flot:left」と組み合わせれば、横並びに表示させられる。

デザインサンプル

サンプルCSSコード

ul {list-style: none;
padding: 0; margin: 0; }

li {width: 100px; float: left;
padding: 0px; margin: 0px; }

li a {display: block; width: 100%;
text-align: left; text-indent: 1em;
height: auto; padding: 0px;
margin: 0px; text-decoration: none;
color: #F33; line-height: 200%;
background-color: #CCC; }

li a:hover {color: white;
background-color: red;
text-decoration: none;
height: auto; margin: -50px 0px 0px;
border-top: 50px solid #e4e4e4; }

スタイルシートデザインガイド