プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：biwanoha
  • 質問日時：
  • 回答数：5件

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

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

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

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

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


</ul>

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

#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>
<!--
　　@media screen{
　　　div#photoList{
　　　　display: block;
　　　　border: solid green 1px;
　　　　margin: 1em 10% 1em 10%;
　　　　background-color: rgb(200,200,200);
　　　　padding:0px;
　　　}
　　　div#photoList > ol{
　　　　margin: 0px;
　　　　padding: 0px;
　　　}
　　　div#photoList > ol>li{
　　　　display:block;
　　　　width: 210px;
　　　　float:left;
　　　　border-style: solid;
　　　　border-color: black gray gray black;
　　　　border-width: 1px 4px 4px 1px;
　　　　padding: 5px;
　　　　height: 240px;
　　　　margin: 5px;
　　　　background-color: white;
　　　}
　　　div#photoList > ol>li dl{
　　　　margin:0px;
　　　}
　　　div#photoList > ol>li dl dt{
　　　　padding: 5px 10px;
　　　}
　　　div#photoList > ol>li dl>dd{
　　　　margin-left: 0px;
　　　　text-align: center;
　　　}
　　　div#photoList > ol>li dl dd+dd{
　　　　margin-left: 0px;
　　　　text-indent: 1em;
　　　　font-size: 0.8em;
　　　　line-height: 1.5em;
　　　　text-align: left;
　　　}
　　　div#photoList > hr{
　　　　clear: both;
　　　　margin: 0px;
　　　　visibility: hidden;
　　　}
　　}
-->
　</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>
「liタグの中に<p>タグやら<dl>を入」の回答画像5
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2008/12/28 13:11

No.4

  • 回答者： warez
  • 回答日時：

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



個人的にはシンプルに

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

と書きそうです。テーブルに入れてもいいと思います。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

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



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

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

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

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

No.2

  • 回答者： taloo
  • 回答日時：

> <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で１つの作品だけというのは、私はこの場合は適切ではないと思います。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　必ず仕様書(

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　は含みうる属性値が書かれている。
    • good
    • 1
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報