CSS質問：大手サイトを見ると何故ナビゲーションはリスト(<ul>、<li>)でつくられているんでしょうか？

質問

CSSコーディングで質問です。

大手の企業サイトを見ると、どこもナビゲーションはリスト(<ul>、<li>)でつくられていますが、これは何故なんでしょうか？
全部position:absoluteではどこかに難点でもあるのかな・・・
メインナビゲーションは10項目以上あるのですが、それ以外に別の場所に「お問い合わせ」「サイトマップ」「会員登録」などのナビゲーションがデザイン的にみて不規則な位置に並べる必要があります。
absoluteで全部やればダメかなと思うのですがどこかにダメな点があるんでしょうね。
もしかしてSEO的に見ると必要だとかあるのかな・・・

宜しくお願い致します。

回答No.3

tenderfeel · ベストアンサー

・メニューはテキスト（ページタイトルやカテゴリ）の「箇条書き」である
・読み上げブラウザへの配慮
・CSSを全部無効にしたとき見やすい

<a>タグをスペースも改行もなく一列に並べていなければ
リストじゃなくても問題はないように思います。

お礼

なるほど、得心がいく理由ばかりです！
CSSを無効にしたときに並ぶのも確かにみた記憶あります！
その他もなるほどです。
ありがとうございますm(_ _)m

回答No.4

abril

> ナビゲーションはリスト(<ul>、<li>)でつくられていますが、これは何故なんでしょうか？

私が使用する理由は、メニュー／ナビゲーションの概念そのものを表すタグが”現状では”用意されていないからです。
※<menu>タグはANo.2の回答者様も言及されている通り非推奨要素であり、W3Cでは<menu>タグのかわりに<ul>タグの使用を推奨している様ですし。
「デザイン的にみて不規則な位置に並べる」というのも、<ul>でマークアップしていても大概の事は実現可能ですし。

> 全部position:absoluteではどこかに難点でもあるのかな・・・

"position:absolute;"を「適切に」使用するのは別にかまいませんが、それはスタイルの定義の問題であって、HTML側で適切なマークアップをする事とはまた別の話です。質問者様が"position:absolute;"を適用したい箇所というのは、どうマークアップされているのでしょうか？<span>や<div>ですか？それとも<a>や<img>でしょうか？

もしその様なマークアップがずらずらと続いているとしたら、HTML側の論理構造という点から見ると問題があると思われます。特に<span><div>はそれ自体が論理的意味を与えられていないので。CSSでレイアウトをするにしても、先ずはHTMLの適切なマークアップありき、です。論理構造が適切であれば、仮にCSSを外して（デザインに依存しない状態の）HTMLだけで閲覧した際にも、ユーザはサイトの構造を把握しやすく情報取得自体には支障がないからです。

適切なマークアップが成された上で、必要な箇所での"position:absolute;"の適用がされている分には全く問題ないのですが、マークアップを適当な状態にしておいてただレイアウトのみの為に全てに"position:absolute;"を定義するのは本末転倒であると思います。
※質問者様のコーディングに対する評価ではありません。一般論としてです。

ところで、この質問は下記のスレッドから派生しているのでしょうか。
http://oshiete1.goo.ne.jp/qa3887530.html
あちらにはコメントがない様ですが、もう必要ないなら締めて頂きたいですね。

お礼

たくさん教えて頂けて本当にありがとうございます。

実は、今ずっとCSS制作に取り組んでいるんですが、要はパーツの配置の方法が見えてこずに困っております。

要は以下のURLのような配置をまずおこない、その上でその中のコンテンツ
を入れていきたいと考えております。

http://www.rocknmusic.net/test/haichi.html
※本URLは数日で消滅

コンテンツは上中下と分かれており、コンテンツの横の終わりには横1ピクセルのドットラインが天地100%で入っています。
そしてそれよりも右側は余白の背景色がコンテンツの上中下それぞれの天地と同じ高さで色分けされています。

position: absolute;はひとつひとつ絶対配置になるので手間ですし、ガチガチのテーブルと
似たようなものになってしまうので避けたかったのですが、他の方策を思いつかず、とにかくやってみました。
すると、フッターが困りました。

何故ならば、ミドルエリアはコンテンツ量によって天地が可変しますので、フッターの絶対位置指定ができないのです。

コンテンツエリアと余白エリアの間にある1ピクセルの仕切りドットラインはウィンドウサイズの天地がどうあれ100%で表示させたいですし、コンテンツエリア上中下(ヘッダー・ミドル・フッター)の天地幅と、余白の天地幅はそれぞれ同じにさせたいですし、いったいどうしたものかと思っております・・・・・

> ところで、この質問は下記のスレッドから派生しているのでしょうか。

派生しております。お礼はまだ書いておりませんが私は必ずお礼を書いて締めるようにする人間です。これはご了承ください。

補足

お礼書き込み後、色々やっていたら出来ました！
ただひとつだけ問題がありますが、それは別に質問します。
ありがとうございました

回答No.2

神崎 渉瑠（@taloo）

箇条書きリストだから<ul>なのかもしれませんが、他の人のことはわかりません。
私は同じ機能で推奨される方法ということで、<menu>ではなく<ul>を使ってます。
ページ一覧表という意味にしたいなら、<table>になると思いますよ。

position:absoluteは、ホームページビルダーの"どこでも配置モード"と同じ方法です。
最悪なページにならないように、注意して下さい。

> もしかしてSEO的に見ると必要だとかあるのかな・・・
SEOでもユーザビリティー上でも、必要になることがあります。

お礼

ありがとうございました！

回答No.1

SAYKA

ナビゲーション「リスト」だからリストでやっているんじゃない？
それに、リストだと指定できる物がいくつかあるからそういう関係も有ると思うよ。

http://www.google.co.jp/search?q=css%20clearfix%20li&hl=ja&lr=lang_ja

お礼

ありがとうございました！