yamaokaです。
水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。
== HTML ==
<p id="navigation">
<img src="arrow.gif">編集
<img src="arrow.gif">削除
<img src="arrow.gif">追加
</p>
horizontal_nav_1 posted by (C)フォト蔵
一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。
リストにしてみましょう。
== HTML ==
<ul id="navigation">
<li>編集</li>
<li>削除</li>
<li>追加</li>
</ul>
horizontal_nav_2 posted by (C)フォト蔵
リストの先頭に表示される記号が邪魔な感じですね。 先程使用した矢印の画像に置き換えてみましょう。
=== CSS ==
#navigation {
list-style-image: url(arrow.gif);
}
== HTML ==
<ul id="navigation">
<li>編集</li>
<li>削除</li>
<li>追加</li>
</ul>
horizontal_nav_3 posted by (C)フォト蔵
これで矢印の画像が表示されるようになりました。 垂直方向に並んでいるのを水平方向に並ぶようにして、 それぞれの項目の間のスペースを調整します。 ここでは、それぞれの項目をfloatさせることにします。
== CSS ==
#navigation {
list-style-image: url(arrow.gif);
list-style-position: inside;
}
#navigation li {
float: left;
width: 3em;
margin: 0 20px 0 0;
padding: 0;
}
== HTML ==
<ul id="navigation">
<li>編集</li>
<li>削除</li>
<li>追加</li>
</ul>
horizontal_nav_4 posted by (C)フォト蔵
大体よさそうですが、よく見ると文字の垂直方向の中央と矢印の画像の位置が揃っていません。 これは画像やフォントの大きさによるのですが、できれば揃えてしまいたいところです。
リストの記号として画像を指定した場合、その画像の位置をCSSで指定することはできません。 あえて揃えるなら、画像の大きさを空白部分を設けるなどして調整する必要があります。 また、そうした場合でも、フォントの大きさを変更した場合にレイアウトが崩れてしまうのを避けることはできません。
しかし、背景画像なら位置を指定することができます。 そこで、li要素の背景画像に矢印の画像を配置して、横に並ぶようにしてみます。 もうリストの記号は必要ないので、消してしまいましょう。
== CSS ==
#navigation {
list-style: none;
}
#navigation li {
float: left;
width: 3em;
background: transparent url(arrow.gif) no-repeat scroll left center;
padding-left: 12px;
margin-right: 15px;
}
== HTML ==
<ul id="navigation">
<li>編集</li>
<li>削除</li>
<li>追加</li>
</ul>
horizontal_nav_5 posted by (C)フォト蔵
いかがでしょうか、最初に思ったとおりの表示結果が得られたでしょうか。 上記のコードのままだとfloatの指定が残ってしまうので、 実際には#navigationでclearfixハックをする必要があるかと思います。 clearfixハックに関しては以下の記事が詳しいので、参考にどうぞ。
注意する点としては、ナビゲーションが複数行になってしまった場合に、 矢印の画像がその複数行分の高さの中央に配置されてしまうという問題があります。 そうなってしまいそうな場合は、矢印の画像の位置を調整するなどしていろいろ試してみてください。
また、上記の例ではli要素をfloatさせて水平方向に並べましたが、 display: inline; を指定することでも水平方向に並べることができます。 しかし、その場合は上下のマージンが指定できないこと、 また、widthが指定できないのでボタンのような表現がしづらいことに留意する必要があります。
常に論理的なマークアップを心がけるようにしておくと、 自然にシンプルな構成のHTML（XHTML）になるのではないかと思います。 頭の片隅で常に意識しておきたいですね。
追記
floatを指定した要素に対して、widthを指定していなかったのを修正しました。CSS2の仕様では、floatを指定したliに対しては必ずwidthを指定する必要があります。ご指摘いただきましてありがとうございました。