<li>の正しい使い方について

質問

<li>の使い方についてなんですが、
<ul>
<li class= "a"></li>
<li class= "b"></li>
<li class= "c"></li>
</ul>
みたいに、異なったコンテンツ(文章や画像、図表など)も<ul>で一括りにして、cssで<li>単位の整形するのって使い方として間違ってますか?
異なったコンテンツごとに<ul>か<div>など使うべきなのでしょうか?

回答No.2

ORUKA1951 · ベストアンサー

異なろうが、同じ種類だろうが、リストの項目なら<li></li>でマークアップすればよいだけです。
　そのマークアップが否かは、著者であるあなたしか分からない。
10 リスト( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html )

たとえば、日本の山の一覧をリストとしてマークアップしたいなら
<ol>
　<li>富士山
　　<ul>
　　　<li><img src="" width="" height="" alt=""></li>
　　　<li>緒元
　　　　<ul>
　　　　　<li>標高:</li>
　　　　　<li>緯度経度:</li>
　　　　　<li>県</li>
　　　</li>
　　　<li>日本を代表する山で火山である。</li>
　　</ul>
　</li>
・・・とリストとしてマークアップすることもあるでしょう。

＞異なったコンテンツごとに<ul>か<div>など使うべきなのでしょうか?
　これは根本的な部分でHTML/CSSを誤解されています。
　HTMLは、<h1>ここは見出し(heading)</h1><p>ここから、ここまでは一つの段落(paragraph)です。</p>　<blockquote>ここは引用</blockquote>と・・。あくまで文書構造をマークアップするのがHTMLです。
　そして、それをどのように表現するかがスタイルシートの役割です。何も指定しなければ、ブラウザが持つデフォルトのスタイルシートで表示されます。←ここを誤解されている人が多い。
　「異なったコンテンツ」という考え方ではなく、文章だろうが画像だろうが複数の項目からなるリスト的な項目ならリストでマークアップすることがあるでしょう。要はそのコンテンツがリストの項目(List Item)であるか否かだけが重要なのです。

　もう一点!!、DIVはHTMLで用意されている要素では文書構造が表せない時に!!
『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』のものです。
　例えば、
<div class="header">
　ここはこの記事のヘッダ部分
　<div class="nav">
　　ここはナビゲーション
　</div>
</div>
<div class="section">
　ここからは、この記事の主題である本文
</div>
　と言う風に使えということ!!
　ちなみにこれは理解できない人が多く、その反省から「文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」し、DIVは安易に使えなくなります。
　HTMLとスタイルシートは使い分けること
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

＞異なったコンテンツごとに<ul>か<div>など使うべきなのでしょうか?
　答えはお分かりだと思います。コンテンツで決まるのではなく、その文書の中でのコンテンツの「立ち位置」によって判断されるべきです。

お礼

ご回答ありがとうごいます。
デザインも考えながらマークアップしてしまってますが、単純に分離してHTMLとcssは別々に考えたら良かったんですね。
DIV等の要素もなんとなく使っていましたが、html5の新要素を前に見た時にも色々と本来の意味があるんだと思い、ul、liにしろ使い道の区別に疑問持ったままでしたが、人が見ても分かるように心がけないといけないですね。
色々と勉強になりました。

回答No.3

tracer

No.1です。
ちなみになんですが、htmlの全てのタグには意味があります。
意味のないタグはひとつもありません。
そこで、divって何?って話になるかと思います。
divは、CSS用の要素であったりとか、適当なタグが見当たらない時に使うなどと誤解されている方が多いですが、それは誤りです。
divは「特別な意味がないこと」を指し示す要素です。

お礼

再度のご回答ありがとうごさいます。
解説してるサイトを色々見ても、翻訳や言葉の表現の違いかもしれませんが、微妙にニュアンスが違うんですよね。。。
html5に対応させていこうかと思っているので、もう一度
しっかりと読み直して要素の意味や目的を勉強してみます。
ありがとうございました。

回答No.1

tracer

htmlに限らず、文章作成全般に言えることですが、アウトラインという概念をご存知でしょうか?
ulはアウトラインに直接関与しませんが、考え方は同じだと思います。
リストの各項目が並列の関係であるならば、同じul内の直属の子として配置するのは適切だと思います。
冒頭に書いたとおり、これはhtmlコーディングやデザイン以前の、文章作成、編集、校正、推敲の段階での作業です。

なお、リストに並列関係でない子要素を並べるのは、文章的には誤りですが、html的には誤りではありません。特別なエラーは起きませんし、liの内容に決まりはありません。言ってみれば自由です。

お礼

ご回答ありがとうございます。
直接でなくとも間接的に関係する画像や文章などもあるので、
どこまでをul、liで一括りにしてもいいものか疑問に思い、デザインに制限が起きたり不都合な事もあるのかなと不安に思いましたが、特に大きな問題もないようなので安心しました。