- 締切済み
リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- nekotora
- お礼率77% (27/35)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫入れ子の部分が引っ込まず、日本酒からロゼワインまで行頭が揃っています。 ≫私が試したときもそうでした。これを解決する方法があるのかどうか IEは、ブロック要素やマージンの解釈がずれているため、そのようなことがおきます。 下記のように修正しました。考え方は一緒です。 <style type="text/css"> <!-- p.image{width: 290px; float: left; margin-right: 60px;} ul + h2{ clear: both;} p.image + ul{margin-left:360px;} ul{border: red 1px solid;} --> </style>
- 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 とマイナス値にしてみました。 これで見た目は大丈夫のようです。 ありがとうございました。
関連するQ&A
- リスト（ul / li）タグの左インデントの解除
HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
- 画像の回り込みとリストの関係
画像にalign=leftをつけて、回り込み可能にしています。 画像の後ろにテキストを打ち込むと、きちんと右側に表示されます。 画像の縦幅よりオーバーした文字列は、きちんと画像下部以降へ表示されます。 （関係ないですが、hspace（？）で上下余白を5px程度指定しています） さて、私が質問したいことなんですが そのテキストの形が、 <UL> <LI>A</LI> <LI>B</LI> </UL> というような、リストの場合、通常のテキストのように 右側に回りこむのですが、インデントがうまくいっていないように思います。 （●部分が画像の下に隠れる（FireFoxだと上に被る）） テーブルを組んで、画像と引き離すことも考えましたが 画像の縦幅を越したテキストは画像の下部に表示させたいので断念しました。 リスト形式にしないで、「・」と手打ちで作ることも考えましたが ・ああああああ（略）ああああ（自動折り返し地点） あああああああ（略） となってしまうことに不満があります。（原稿に忠実にしなければいけなくて…） リストを使うことで、行頭を同じインデントにしたいのです。 分かりにくい説明ではありますが何か回避方法があれば、お教えください。 必要であれば補足もさせていただきます。 よろしくお願いいたします。
- 締切済み
- HTML
- [正規表現][入れ子]ネストされたリストをインデントに置換したい
[正規表現][入れ子]ネストされたリストをインデントに置換したい preg_replaceかpreg_replace_callbackを使って、 ネストされたリストタグを全角空白によるインデントに書き換えたく思っています。 （携帯表示するため） 1階層目のliならインデントひとつ。 2階層目のliならインデントふたつ。 ・ ・ ・ という具合にしたいのです。 以下は全角空白をわかりやすくするために□で置き換えました。 ---------------------------------------------------------------------------- 【現在のHTML】 文章1 文章2 <ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul> <ul> <li> <ul> <li>リストあ</li> <li>リストい</li> <li>リストう</li> </ul> </li> </ul> ---------------------------------------------------------------------------- 【置換完了後のブラウザ表示】 文章1 文章2 □リストA □リストB □リストC □□リストあ □□リストい □□リストう ---------------------------------------------------------------------------- 【置換完了後のHTMLのイメージ】 文章1 文章2 <div> <div>□リストA</div> <div>□リストB</div> <div>□リストC</div> </div> <div> <div> <div> <div>□□リストあ</div> <div>□□リストい</div> <div>□□リストう</div> </div> </div> </div> ---------------------------------------------------------------------------- どうぞ、よろしくお願い致します。
- ベストアンサー
- PHP
- HTMLタグ リストの入れ子とNetscapeについて
HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ（IE8、Opera、Safari、FireFox）では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか？ それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。
- ベストアンサー
- HTML
- リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は？
HTMLの<li>タグでリスト文章をつくるとき、list-style-positionでoutsideにしているボックスの外にリストマーカーが配置されてしまうので論外ですし、かと言ってinsideにしても<li>タグ内の文章の二行目以降がリストマーカーと同列に配置されてしまい、<li>内の文章よりも左側にリストマーカーがはみ出してくれないのでリストマーカーが<li>内の文章に埋没してしまって見にくくて困っており、回避策を探しております。 リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法はないのでしょうか？ 【現在の問題な状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 【希望する正しい状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 宜しくお願いいたします。
- 締切済み
- HTML
- インデントについて
基本的な質問ですが、リストのインデントの仕方について皆さまはどうされていらっしゃいますか？ リストの中の1行をインデントする場合に前の行の終了タグ</li>の前に新規リスト<ul><li>hoge</li></ul></li>を入れれば表示上は改行されますが、リストの行の中に新規リストを入れるのはマークアップ上正しいのでしょうか? また、段落のインデントは段落の前後にblockquoteを入れてインデントをかけるという方法もありますが、引用文でもないものを表示効果のねらいでblockquoteを使うのは正しいのでしょうか? いずれも、各行内にクラスを割り当ててCSSでマージンを設定する方が妥当なのでしょうか？
- ベストアンサー
- HTML
- MTのリストマークが消えない！！！
MTでブログ作成をしてます。 ３カラムのメインページの左サイドにリストメニューを置き、リストマークを画像に消したいのですが、どうしてもできません。 ＃メイン <div id="links-left-box"> ～略～ <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> ～略～ </div> ＃スタイルシート #links-left-box ul{ list-sytle-type:none; } お手数ですが、どなたかお教えいただければ幸いです。
- ベストアンサー
- ブログ
- リストの回り込みについて（マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。
- ベストアンサー
- HTML
- cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS（親リストの指定） ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。
- 締切済み
- HTML
- リストの高さを揃えたい
リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。（図があります） どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです （HTML） <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> （CSS） .sample{ text-align: left; valign: top; padding: 0px; border: none; }
- ベストアンサー
- CSS
お礼
ありがとうございました。 参考にさせて頂きます。