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にした場合:リストマーカーがボックスモデル内には入って配置して
くれるのの、文章がインデントされてしまう問題がある
宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
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ですが。
ご協力ありがとうございます。
No.5
- 回答日時:
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と同じになりますが、
> 【現在の問題な状態】
> 【希望する正しい状態】
何が言いたいのかわかりません。
補足をお願いします。
詳細にありがとうございますm(_ _)m
> list-style-positionのデフォルト値はブラウザ依存です。
> (実際に、いくつかのブラウザのデフォルト値がinsideです)
はい、仰るとおりだと思います。規定値はブラウザに依存しています。
あくまでもW3Cの勧告を取り入れるかどうかはブラウザ次第ですから。
> また、outsideはulの外に出すという意味ではなく、liのブロックの外に出すという意味ですので
はい、その通りです。私はulの外に出ると書いていませんので間違いにあたりませんが書かれていることはその通りだと思います。
リストマーカーが出ないのでどこかの記述が影響しているのだと調査し続けます。
ありがとうございました。
No.4
- 回答日時:
具体的に「文章」として、「こう成ってるのをこうしたい」と書き込めば良いのでは?
問題点の例と自分の望む表示の内容を此処に直接。
例)
(標準表示)(・がリストマーカと思って。)
・文字列
(自分のしたい表示)
・ 文字列
~・と文字列の間に半角スペースでインデント~
こんな感じで・・・
本当に「どう表示」したいのか不明。
No.3
- 回答日時:
>二行目以降の文章は相変わらずリストマーカーの真下からスタート
え??意味が判りません。
それってlist-style-positionをinsideにしてるからですよね?
ulの内側にlistのマークを表示させて折り返しの挙動はlist-style:outside;じゃないんでしょうか?
そもそも【希望する正しい状態】の書き方にしても
「~してしまってしまう問題がある」
「~されてしまう問題がある」ですし、
【現在の問題な状態】と同じで問題の報告のみで、どこにも希望する状態が書かれていません。
どうされたいんですか??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/06/15 14:11
- Visual Basic(VBA) WordのVBAについて 5 2023/01/11 14:38
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- 計算機科学 速度・加速度の問題です。お詳しい方教えてください。 4 2022/08/24 20:49
- Excel(エクセル) エクセルの数式について教えてください。 7 2023/06/18 10:16
- Excel(エクセル) [テーマのフォント]、[見出しのフォント]、[本文のフォント]とは何ぞや? 2 2023/02/27 09:18
- 大学受験 勉強で暗記する時に、赤シートを使っており、文字を隠したい場合は、緑のマーカーで引いた部分が黒くなり、 1 2023/07/02 23:57
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
このQ&Aを見た人はこんなQ&Aも見ています
-
これまでで一番「情けなかったとき」はいつですか?
これまでの人生で一番「情けない」と感じていたときはいつですか? そこからどう変化していきましたか?
-
フォントについて教えてください!
みなさんの一番好きなフォントは何ですか? よく使うフォントやこのフォント好きだなあというものをぜひ教えてください!
-
治せない「クセ」を教えてください
なくて七癖という言葉どおり、人によっていろいろなクセがありますよね。 あなたには治せないクセがありますか?
-
【選手権お題その1】これってもしかして自分だけかもしれないな…と思うあるあるを教えてください
「出身中学と出身高校が混ざったような校舎にいる夢を見る」「まぶたがピクピクしてるので鏡で確認しようとしたらピクピクが止まってしまう」など、 これってもしかして自分だけかもしれないな…と思うあるあるを教えてください
-
冬の健康法を教えて!
温度変化が大きくなり、風邪をひきやすいこれからの季節。 どんなことに気をつけていますか?
-
illustratorの効果の取り消し方法
画像編集・動画編集・音楽編集
-
htmlのolやulなどlistにtitleやcaptionをつけられますか?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・「みんな教えて! 選手権!!」開催のお知らせ
- ・漫画をレンタルでお得に読める!
- ・【選手権お題その2】この漫画の2コマ目を考えてください
- ・2024年に成し遂げたこと
- ・3分あったら何をしますか?
- ・何歳が一番楽しかった?
- ・治せない「クセ」を教えてください
- ・【大喜利】看板の文字を埋めてください
- ・【大喜利】【投稿~12/17】 ありそうだけど絶対に無いことわざ
- ・【選手権お題その1】これってもしかして自分だけかもしれないな…と思うあるあるを教えてください
- ・【穴埋めお題】恐竜の新説
- ・我がまちの「給食」自慢を聞かせてっ!
- ・冬の健康法を教えて!
- ・一番好きな「クリスマスソング」は?
- ・集合写真、どこに映る?
- ・自分の通っていた小学校のあるある
- ・フォントについて教えてください!
- ・これが怖いの自分だけ?というものありますか?
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・10代と話して驚いたこと
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストを2つに分割して、それぞ...
-
display:table;を多段表示させたい
-
リンク文字同士の間隔を開ける...
-
リスト(ul / li)タグの左イン...
-
CSSのデクレッシェンド(>)と...
-
liタグの中に<p>タグやら<dl>を...
-
背景色を行ごとに変えるには?
-
文法チェックの<A>と</A>の間が...
-
レスポンシブWebデザインでリン...
-
HTMLで画像を3つ並べる方法
-
Listの中に<br>を入れてはダメ...
-
htmlの<ol>タグで、数字などを...
-
リストで行間を指定したい
-
左メニューをCSSで固定したい
-
navの横並びにsnsアイコンを付...
-
(HP作成)メニューバーのプル...
-
更新履歴の作り方
-
タイトルの横にサブタイトルが並ぶ
-
画像を縦に4つ並べたい場合
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの数字のフォントサイズ...
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
HTML5のfooterに見出しを付けて...
-
HTMLで組織図を作成する方法
-
htmlの<ol>タグで、数字などを...
-
divタグ内のコンテンツが重なっ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
<table>の高さ固定。情報増加時...
-
タイトルの横にサブタイトルが並ぶ
-
ulとliで囲った文字の一部を変...
-
レスポンシブWebデザインでリン...
-
画像にリンクを張ると画像がず...
-
ドロップダウンの残像
-
【CSS】メニュー上部に固定させ...
-
リンク文字同士の間隔を開ける...
おすすめ情報