- ベストアンサー
liタグの中に<p>タグやら<dl>を入れるのはあり？
それともなしでしょうか？ たとえば、作品実績みたいなのを羅列するとき 「画像」 「タイトル」 「簡単な説明」 を乗せたいときはどうしますか？ <ul> <li> <p>画像</p> <dl> <dt>タイトル</dt> <dd>説明</dd> </dl> </li> </ul> こんな感じを考えたのですが・・・ <li>（作品）ごとにボーダーボトムで区切りたいかなと考えております。 <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか？ </ul>
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#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>
その他の回答 (4)
- warez
- ベストアンサー率57% (29/50)
li 要素の中にはほとんど何でも入れられますね。 個人的にはシンプルに <hn>タイトル</hn> <img> <p>説明文</p> と書きそうです。テーブルに入れてもいいと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
＞皆さんならどうしますか？ ということで私的な意見を挙げます。 構造上順位付のない並列データを羅列するのであれば、おかしいとは 言えませんが、画像と説明文書が表示されるのであれば、私なら テーブルにしますけど。 だってワープロで同じ場面があったときに、箇条書きにします？ 表を使う方が文書としてすっきりしますよね。 まぁ好みもあるでしょうけどね。 SEOだなんだとしがらみがあったり、DOMで生成していたりするなら 別ですが、ベタ打ちのHTMLならここであえてliにこだわる必要は ないかとおもいます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> <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で１つの作品だけというのは、私はこの場合は適切ではないと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html )をチェックする癖をつけましょう。変なアドバイスやマニュアルを読むより確実です。 ≫<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、 仕様書を読みもせずにアドバイスする人もいるということです。 仕様書は機械でも読み取れるように書かれているため、慣れないと難しいですが、見てれば慣れます。見なけりゃ慣れない!! 10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2 )より引用 <!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 は含みうる属性値が書かれている。
お礼
画像までつけてくださって本当にありがとうございます。 とてもわかりやすかったです！ 本当にありがとうございました。