ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方

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>編集<

[webmarksjp]

webデザイン

[Hayato]

ナビゲーションの作り方

[yuki_2021]

Web標準的なナビゲーションの作り方Tips

[bigwest]

水平方向のナビ

[bluerabbit]

ul li を横に

[uzuki-first]

参考にします。なるほｄね

[yoshiii]

>>こっち　>>あっち　>>どっち　みたいなナビを論理的なマークアップで作る方法。

[Quadrifogrio]

floatの場合はwidth指定が必要

[denken]

floatさせるときはwidth必須(img要素などを除いて)な件についてぜひお伺いしたいが、たいていの実装はこの問題をスルーしてなんとか表示してくれるから困る。

[ysk_lucky-star]

li 要素に幅の指定は？ float プロパティは（一部の要素以外で）幅の明示が必要　／　と言うわけで書いた

[wakatakahawks]

使い古された手法だと思ってた。こんなにブクマされてるのが不思議…。display: inline;の時ソースの改行が半角スペースになるので<li>hogehoge</li><!--（ソースはここで改行）--><li>hogehoge</li>みたいにコメントを活用すると吉

[sisya]

リスト

[ag-commerce]

水平方向に並んだナビゲーションを作る場合、皆さんはどのようにマークアップされているでしょうか。とりあえず必要な項目を羅列してみましょう。それぞれの項目には矢印の画像を付加するものとします。

[bigchu]

パンクズ部分のスタイルで指定。でもなぁこれってcssはずすとかっこ悪いんだよなぁ、どんなときでも美しいのがイイ！

[OhYeah]

うわぁ来週の勉強会で説明するつもりだったないようだぁ！！てかずっと洗練されてるので、参考にさせてもらいます。

[yorihito_tanaka]

ulだ

[kminoru]

creafixについて後でしらべる。

[adamrocker]

CSSで実現する水平方向ナビゲーション。

[studio-m]

このサンプル"だけ"なら、liにdisplay:inlineで済んでしまいそうなので、もう少し掘り下げた方がいいかも

[hiro_y]

書きました。↑id:studio-m display:inline; についてもちょっと追記しましたー。そしてfloat指定したliにwidthが指定されていない件に関して修正いたしました。ご指摘ありがとうございました。