- 締切済み
リストマーカーをボックス内に収めて、かつ、<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にした場合:リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 宜しくお願いいたします。
- touchy
- お礼率88% (704/796)
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 (5)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
list-style-positionのデフォルト値はブラウザ依存です。 (実際に、いくつかのブラウザのデフォルト値がinsideです) W3Cでもデフォルト値は「参考値」としていくつかあげていますが、この中にもリストアップされていません。 http://www.w3.org/TR/CSS21/sample.html また、outsideはulの外に出すという意味ではなく、liのブロックの外に出すという意味ですので、 <li>あいうえお<br> かきくけこ</li> この記述を ・あいうえお かきくけこ となるのがoutside ・あいうえお かきくけこ となるのがinsideです。 (全角スペースで調整、等幅フォントで見て下さい) ですから、 li{ list-style-position: outside; margin-left: 2em /* 数値は任意 */ } でいいと思います。(No.1と同じです) 必要なら、ul{padding-left:2em}などにしてもいいと思います。 これもNo.4、No.5と同じになりますが、 > 【現在の問題な状態】 > 【希望する正しい状態】 何が言いたいのかわかりません。 補足をお願いします。
具体的に「文章」として、「こう成ってるのをこうしたい」と書き込めば良いのでは? 問題点の例と自分の望む表示の内容を此処に直接。 例) (標準表示)(・がリストマーカと思って。) ・文字列 (自分のしたい表示) ・ 文字列 ~・と文字列の間に半角スペースでインデント~ こんな感じで・・・ 本当に「どう表示」したいのか不明。
- salonpath
- ベストアンサー率48% (194/399)
>二行目以降の文章は相変わらずリストマーカーの真下からスタート え??意味が判りません。 それってlist-style-positionをinsideにしてるからですよね? ulの内側にlistのマークを表示させて折り返しの挙動はlist-style:outside;じゃないんでしょうか? そもそも【希望する正しい状態】の書き方にしても 「~してしまってしまう問題がある」 「~されてしまう問題がある」ですし、 【現在の問題な状態】と同じで問題の報告のみで、どこにも希望する状態が書かれていません。 どうされたいんですか??
- myun0922
- ベストアンサー率30% (3/10)
UA毎にマーカーの表示位置や大きさ・続くテキストとの余白が異なるので、list-style-typeを使う場合はどうしても、完全に見栄えが同じにはなりません。 list-style-typeでマーカーを表示する場合は、ケースバイケースで微調整する事もありますが通常だいたいこんな感じで間に合ってます。 ul.hoge { margin: 0; padding: 0; } ul.hoge li { margin-left: 1.5em; padding: 0; } ※list-style-positionの初期値はoutsideなので省略してあります。 つまりNo.1様の仰っている事と同じかと。 list-style-positionをoutsideとし→親要素ulのmarginとpaddingをリセットし→子要素liのmargin-leftで調整する。 手元の環境では上記で支障なく表示されてるんですが。
お礼
優れた方とお見受けいたします。正しい把握かつ詳しく書いていただき誠にありがとうございますm(_ _)m しかし何故でしょうか、ダメなんです。insideですとリストマーカーが出るのですが、outsideではリストマーカーが出なくなるんです。 そういえばFirefoxではリストマーカーも出て二行目以降もちゃんとインデントされていますが・・・IEはダメですね・・・IE7ですが。 ご協力ありがとうございます。
- salonpath
- ベストアンサー率48% (194/399)
全称セレクタを使ってやたらめったらmarginやpaddingを0にしてませんか? 対象のliに、margin-left:2emあたりを追加してみてください。
お礼
投稿ありがとうございます。 しかしながらご案内の > 対象のliに、margin-left:2emあたりを追加してみてください。 これは意味が無いです。 リストマーカーとそれに続く<li>内に入る文章との隙間が空くだけで、 二行目以降の文章は相変わらずリストマーカーの真下からスタートします。 つまり解決しないです。
関連するQ&A
- リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- 締切済み
- HTML
- リスト(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
- CSSでliのマーカーの位置を変更したいです。
CSSでliのマーカーの位置を変更したいです。 liのマーカーをlist-style-imageで変更したのですが、文字とマーカーの差ができてしまいます。 そこでこのマーカーの位置をテキスト側(右側)に寄せたいのですが、うまくいかなく、困っています。
- ベストアンサー
- HTML
- list-style-image・・マーカーとコンテンツの距離
縦横15ピクセルのmarker.gifを使って、リストのマーカーに指定したいのですが・・・ たとえば、このようにすると、 ul { margin: 0px; padding: 0px; } li { background-color: lightgrey; margin: 0px 0px 5px 15px; padding: 0px; list-style-image: url("marker.gif"); list-style-position: outside; } IEやOperaでは、マーカーのすぐ左にコンテンツ(灰色の背景色つき)がくるのに対して、 Firefoxでは、マーカーとコンテンツの間に何ピクセルか隙間ができて、結果、マーカーが親エレメントより左側にはみ出してしまいます。 CSS2の仕様をしらべると、「marker-offset」というプロパティがあるようなのですが、まだブラウザが未対応のようで・・・ この隙間は、どういう定義なのでしょうか?規定値が決まっていたりするのでしょうか? また、変更することはできないのでしょうか?
- ベストアンサー
- HTML
- CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか? コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- 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
- リストを横に並べるとマーカーが消える
お世話になります。 標題の通りなのですが、cssでリストを横に並べると、マーカーが消えてしまいます。 マーカーを表示させたいのですが、できないのでしょうか? ちなみに今現在の指定は下記のような感じです。 ご教授よろしくお願い致します。 UL { list-style-image: url(hoge.gif); } LI { float: left; width: 50%; }
- 締切済み
- HTML
- リストの回り込みについて(マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、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
- HP作成時のリストやインデントの設定について
DreamweaverCS4を使っています。 文中にリストやインデントを挿入したいと思っています。 ------------------------------------ タイトル文1 ・文章1 ・文章2 タイトル文2 ------------------------------------ という感じに「文章~」の部分がリストになります。 ------------------------------------ <style type="text/css"> <!-- li,ul { margin: 0 0 0 1em; padding: 0; } li,ol { margin: 0 0 0 1em; padding: 0; } ------------------------------------ リストの前の空白部分の調整方法はネットで調べ上記の感じで調整できました。 ですが、リストにすると「タイトル文1~・文章1」や「・文章2~タイトル文2」の間のように 1行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか? 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リストの間隔の違いについてなのですが
リストの間隔の違いについてなのですが 【 HTMLの記述 】 <ol> <li>ほげほげ</li> </ol> 【 CSSの記述 】 ol li { list-style-position: inside; } 上記の場合、それぞれのプラウザで以下のように違いが出てきます。 <IE6,IE7,Firefox3の場合> 1. ほげほげ <IE8の場合> 1. ほげほげ これのIE8の間隔を狭めたいのですが可能なのでしょうか? outsideは使わない方法でよろしくお願いします。
- ベストアンサー
- HTML
お礼
詳細にありがとうございますm(_ _)m > list-style-positionのデフォルト値はブラウザ依存です。 > (実際に、いくつかのブラウザのデフォルト値がinsideです) はい、仰るとおりだと思います。規定値はブラウザに依存しています。 あくまでもW3Cの勧告を取り入れるかどうかはブラウザ次第ですから。 > また、outsideはulの外に出すという意味ではなく、liのブロックの外に出すという意味ですので はい、その通りです。私はulの外に出ると書いていませんので間違いにあたりませんが書かれていることはその通りだと思います。 リストマーカーが出ないのでどこかの記述が影響しているのだと調査し続けます。 ありがとうございました。