- 締切済み
リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫正しい記述をしても、画像の右側に位置するとインデントされません。 ひょっとして、画像をfloatさせているのですか？ CSSの仕様では、floatはそれに続く要素のマージンと相殺しないことになっています。 そのため、次の例のように、floatに続く<ul>には、floatさせている要素より大きなマージンを設定する必要があります。 <!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 type="text/css"> <!-- p.image{width: 290px; float: left; margin-right: 60px;} ul + h2{ clear: both;} p.image + ul{margin-left:300px;} --> </style> </head> <body> <h1>画像とリスト</h1> <h2>商品1</h2> <p class="image"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="284" height="148" alt="goo"> </p> <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </li> </ul> <h2>商品２</h2> <p class="image"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="284" height="148" alt="goo"> </p> <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </li> </ul> </body> </html>
お礼
ORUKA1951様 丁寧なコメントありがとうございました。おっしゃる通り画像をfloatさせました。 画像の右側にはright-marginを取っています。 記述してくださった例では「goo」画像の右側に表示されているリストの 入れ子の部分が引っ込まず、日本酒からロゼワインまで行頭が揃っています。 私が試したときもそうでした。これを解決する方法があるのかどうか 分からずに悩んでいるところです。 昨日、私が「インデント」と書きましたのは、リストを入れ子にすると 入れ子になった部分が引っ込んで表示されるという意味でしたが、もし 誤解を招いていたら申し訳ございません。 引き続き、よろしくお願い申し上げます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HHMLが間違ってます。これでは、画像の横であろうとなかろうと、インデントしません。 ブラウザは次のように解釈します。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> ← この<ul>が現れた時点で、<ul>は<ull>内に書くことが出来ません。 <!ELEMENT UL - - (LI)+ -- unordered list --> です。内部にもてるのは(LI)だけですから、ここで<ul>は閉じられなければならないので、 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> </ul>・・・・・・・・・これが追加される。 <ul> 最終的に下記のようになります。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> </ul>・・・・・・・・・・・・ <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> <ul>・・・・・・・・・・・・・・が追加されるか </ul>・・・・・・・・・・・・・が無視される。 横幅が狭いときは、スタイルシートでliのmarginやpaddingでインデントの位置を調整すること。 【正しいHTML】分かりやすいように---でインデントさせておきます。 ----<ul> --------<li>日本酒</li> --------<li>ビール</li> --------<li>ワイン ------------<ul> ----------------<li>赤ワイン</li> ----------------<li>白ワイン</li> ----------------<li>ロゼワイン</li> ------------</ul> --------</li> ----</ul> が正解 なお、<li>には、 <!ELEMENT LI - O (%flow;)* -- list item --> →%flow <!ENTITY % flow "%block; | %inline;"> ですから、ブロック要素もインライン要素も入れられます。 【必ず仕様書を確認しましょう】 HTML 4.01 Specification (ja) http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html
お礼
ORUKA1951様 回答ありがとうございました。私の書いたリストの「入れ子」記述は 確かに間違っていますね。 内側のulが外側のulの、直接の子要素になっては間違いですね。 この方法でもWebブラウザにはリストとして表示され、インデントも 行われるので書いてしまいます。以後気をつけたいと思います。 正しい記述をしても、画像の右側に位置するとインデントされません。 いろいろ試してみます。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
全体を<div>で囲って<div>に対して位置指定すればよいのでは？ ＜サンプル＞（とりあえず右寄せにした例） <html> <head> <style type="text/css"> #list{float:right;} </style> </head> <body> <div id="list"> <ul> <li>日本酒</li> <li>ビール</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> </ul> </ul> </div> </body> </html>
お礼
fujillin様 回答ありがとうございました。早速試してみました。 リストは画像の右側というより、ページの右端に配置されるため 左側の画像(320×288)との間がかなり空いてしまいます。 そこでmargin-left:-600px とマイナス値にしてみました。 これで見た目は大丈夫のようです。 ありがとうございました。
お礼
ありがとうございました。 参考にさせて頂きます。