liタグの中に<p>タグやら<dl>を入れるのはあり？

解決済

質問者：biwanoha
質問日時：2008/12/21 19:15
回答数：5件

それともなしでしょうか？
たとえば、作品実績みたいなのを羅列するとき

「画像」
「タイトル」
「簡単な説明」

を乗せたいときはどうしますか？
<ul>
<li>
<p>画像</p>
<dl>
<dt>タイトル</dt>
<dd>説明</dd>
</dl>
</li>
</ul>

こんな感じを考えたのですが・・・
<li>（作品）ごとにボーダーボトムで区切りたいかなと考えております。

<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか？

</ul>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2008/12/26 01:16

#1 ORUKA1951です。

#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
　ディスプレイの幅が狭いときもtableのように、はみ出ません

　このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
DL definition list 定義リストでも良いかな？
・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
しかし、「（作品）ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
だとすると、
【注意】
　★分かりやすくするため全角スペースでインデントされています。
　　利用するときはタブに変換すること
　★これは、私のページ一部を抜粋したもの。画像は200px×150px
　★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
　★セレクタの使い方は調べること。
　★これはolですがulでもよい。
　★本来は、
　<div id="photoList">
　　<ol>
　　　<li>本体
　　　　<ul>
　　　　　<li><img src="./photo/R0011583.jpg" width="200" height="150"
　　　　　　　 alt="ディスプレイを開く"></li>
　　　　　<li>本体を正面から撮影したところ、パネルの下がカバー</li>
　　　　</ul>
　　　</li>
とマークアップしたほうがスマートでしょう。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿サンプルソース。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　<title>ディスプレイの分解:ノートパソコンの分解</title>
　<meta http-equiv="Content-Style-Type" content="text/css">
　<style>

　</style>
</head>
<body>
　<h1>ノートパソコンの分解</h1>
　<h2>ディスプレイの分解</h2>
　<div id="photoList">
　　<ol>
　　　<li>
　　　　<dl>
　　　　　<dt>本体</dt>
　　　　　<dd><img src="./photo/R0011583.jpg" width="200" height="150"
　　　　　　　　alt="ディスプレイを開く"></dd>
　　　　　<dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
　　　　</dl>
　　　</li>
　　　<li>
　　　　<dl>
　　　　　<dt>ビスの位置</dt>
　　　　　<dd><img src="./photo/R0011587.jpg" width="200" height="150"
　　　　　　　　alt="カバーを外す"></dd>
　　　　　<dd>電源スイッチカバーを外すとビスがでてくる。</dd>
　　　　</dl>
　　　</li>
　　　<li>
　　　　<dl>
　　　　　<dt>パネルを開く</dt>
　　　　　<dd><img src="./photo/R0011590.jpg" width="200" height="150
　　　　　　　　 alt="パネルを180度開く"></dd>
　　　　　<dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
　　　　</dl>
　　　</li>
　　　<li>
　　　　<dl>
　　　　　<dt>パネルを裏返しに</dt>
　　　　　<dd><img src="./photo/R0011597.jpg" width="200" height="150"
　　　　　　　　 alt="パネルを1裏返す"></dd>
　　　　　<dd>取り外したパネルを裏返しにする。</dd>
　　　　</dl>
　　　</li>
　　</ol>
　　<hr>
　</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

画像までつけてくださって本当にありがとうございます。
とてもわかりやすかったです！

本当にありがとうございました。

通報する

お礼日時：2008/12/28 13:11

No.4

回答者： warez
回答日時：2008/12/22 23:27

li 要素の中にはほとんど何でも入れられますね。

個人的にはシンプルに

<hn>タイトル</hn>
<img>
<p>説明文</p>

と書きそうです。テーブルに入れてもいいと思います。

- 0
- 件

通報する

No.3

回答者： yambejp
回答日時：2008/12/22 10:32

＞皆さんならどうしますか？

ということで私的な意見を挙げます。

構造上順位付のない並列データを羅列するのであれば、おかしいとは
言えませんが、画像と説明文書が表示されるのであれば、私なら
テーブルにしますけど。

だってワープロで同じ場面があったときに、箇条書きにします？
表を使う方が文書としてすっきりしますよね。
まぁ好みもあるでしょうけどね。

SEOだなんだとしがらみがあったり、DOMで生成していたりするなら
別ですが、ベタ打ちのHTMLならここであえてliにこだわる必要は
ないかとおもいます。

- 0
- 件

通報する

No.2

回答者： taloo
回答日時：2008/12/22 05:36

> <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、

SEOがその理由かもしれませんね。
理由はわかりませんが、私は問題はないと思います。
文法上も問題はありません。

スタイルシートを使わないときに、タイトルが最初に書かれているとわかりやすいと思うので、私ならタイトルを最初に持ってきます。

<style>
li {position: relative;}
li img{position:absolute;}

/* imgのheightに併せて個別指定。
全ての画像の高さが共通なら一括指定
li{ margin-top:120px} li img{top:120px;}
*/
li#title1{margin-top: 120px;}
li#title1 img{top:-120px;}
</style>

<ul>
<li id="title1">
　<h3>タイトル1</h3> （h1-6の適切な物）
　<p><img src="画像">説明</p>
</li>
</ul>

こんな感じでしょうか。
h3{padding-top: 120px;}にすれば img{top:0} で固定できますが、borderなどの指定がpaddingと干渉するため、使っていません。
liのマーク（list-style-image）の位置が、画像の横ではなくタイトルの横になります。
画像の横に出すのは何か方法があると思いますが。。。

dlを使う場合は、
<dl>
<dt>タイトル１</dt>
<dd class="img"><img></dd>
<dd class="explain">説明１</dd>
<dt>タイトル２</dt>
<dd class="img"><img></dd>
<dd class="explain">説明２</dd>
</dl>

こんな感じで作ると思いますが、
スタイルシートが複雑になりそうなので、作るのをやめました。m(_ _)m
意味的にはdlの方がいいのかなぁ。。。
liの中にdlで１つの作品だけというのは、私はこの場合は適切ではないと思います。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2008/12/21 19:34

　必ず仕様書(

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )をチェックする癖をつけましょう。変なアドバイスやマニュアルを読むより確実です。
≫<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、
　仕様書を読みもせずにアドバイスする人もいるということです。

　仕様書は機械でも読み取れるように書かれているため、慣れないと難しいですが、見てれば慣れます。見なけりゃ慣れない!!

10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)
　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より引用
<!ELEMENT LI - O (%flow;)* -- list item -->
・・・【以下略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
　Li要素は、O(%flow)を含みうる。%flowをクリックすると
<!ENTITY % flow "%block; | %inline;">
　ですから、ブロック要素、インライン要素を含むことが出来ると書いてある。

ちなみにOL/ULは
<!ELEMENT UL - - (LI)+ -- unordered list -->
・・・【中略】・・・
<!ELEMENT OL - - (LI)+ -- ordered list -->
・・・【以下略】・・・
で、LI要素しか含められない。文字もダメということ。

　同じところに書かれている
<!ATTLIST　は含みうる属性値が書かれている。