ナビゲーションのマークアップとCSSデザイン

クロスブラウザなレイアウトデザインテクニック 第4回

リストのスタイリングの基本

　ナビゲーションをどの要素でマークアップすべきかといった明確な基準はありませんが、実務では、ul要素やol要素といったリスト関連の要素でマークアップするケースが多くあります。以下、リスト関連のスタイリングの基本テクニックを紹介します。

リストマーカーを確実に表示する

　リセットスタイルで、ul要素やol要素のマージンやパディングを0に設定している場合リストマーカーが表示されないことがあります。これはリストマーカーが消えているわけではなく、ボックスの外側に飛び出しているために起こる現象です。

　リストの左側の余白は、IE 6やIE 7では左マージンで制御されているのに対し、Firefox 3やSafari 3、IE 8などのブラウザでは左パディングで制御されているといった実装の違いがあります。そのため、「margin-left: 0」とすると、IE 6や IE 7でマーカーが表示されませんし、「padding-left: 0」とすると、Firefox 3やSafari 3、IE 8などでマーカーが表示されなくなります。

図3：margin-left:0 とした場合のFirefox 3（左）とIE 7（右）の表示例

図4：padding-left:0 とした場合のFirefox 3（左）とIE 7（右）の表示例

　リストマーカーが確実に表示されるように左側余白のスペースを調整するには、左マージンと左パディングの両方の値を指定します。ul要素の場合、マーカーを表示するには、最低限1emのスペースが必要ですから、margin-leftの値に1em以上を指定し、padding-leftの値に0を指定します。ol要素の場合には、「桁数＋1em」のスペースを確保すると良いでしょう。例えば、「5.」のようにマーカーが1桁の場合には、2em分のスペースが必要になりますから、margin-leftの値に2em以上を指定し、padding-leftの値に0を指定します。

［リスト5］CSSソース：マーカー表示分のスペースを確保してスタイルをリセットした例

ul {
  margin: 0 0 0 1em; /* 左マージンのみ1em */
  padding: 0;  /* 左パディングを含め、すべて0 */
}
ol {
  margin: 0 0 0 2em; /* 左マージンのみ2em */
  padding: 0;  /* 左パディングを含め、すべて0 */
}

図5：margin-leftでマーカー表示分のスペースを確保し、padding-left:0 とした場合のFirefox 3（左）とIE 7（右）の表示例

マーカーを画像で表示する

　list-style-imageプロパティでは、リストマーカーとして使用する画像を指定することができますが、このプロパティを使用して細かな位置調整を行うのは難しく、リスト項目のフォントサイズや行の高さによっては、マーカーの位置がずれてしまうことがあります。この場合、画像側の幅や高さなどを変更しながら位置調整を行うことになり、あまりスマートな方法とは言えません。

図6：「list-style-image:」で指定してマーカーがずれてしまった例

　このようなアイコン的な表現をしたい場合には、backgroundプロパティを利用して、背景としてマーカー画像を指定するという方法があります。具体的にはまず、「list-style-type: none」と指定して、デフォルトで表示されるマーカー（disc）を表示しないようにリセットします。次にbackgroundプロパティで、li要素の背景としてマーカー画像を指定し、左に一度だけ表示するよう指定します。さらに、リスト項目とマーカー画像が重ならないよう、padding-leftプロパティを指定してマーカー画像の表示スペースを確保します。この方法であればピクセル単位での微妙な位置調整も可能になります。

［リスト6］マーカー画像を背景として指定

ul li {
  list-style-type: none;  /* リストマーカーを表示しない */
  background: url("arrow.gif") no-repeat left center; /* マーカー画像を左から0%、上から50%の位置に、一度だけ表示 */
  padding-left: 15px; /* マーカー画像の表示スペースを確保 */
}

図7：backgroundプロパティでマーカー画像を指定した例