リストのmargin（padding?）の設定について

[新着] Webテンプレートを仮オープンしました

0   名前： もすも ： 2006/03/17 09:20
リストのマークとテキストの間（テキストの左側）にある
スペースの設定の仕方について教えてください。

　●　　ほげほげほげほ

の場合の、‘●’と‘ほ’の間を調整したいのです。

ul{margin-left:***;}
とすると、リスト全体のマージンが設定されるので
li{margin-left:-***;}
としてみたら間だけが狭くなるのかと思いきや、‘●’も左によってしまいました。
（<li>はブロック要素だから当然なのでしょうか？）
こういう場合は普通どうやって指定するのでしょう？

いつもは大体<li>にbackground-imageを指定してポジションを微調整してしまうのですが...。

1   名前： Pid ： 2006/03/17 09:20
現状，リストマーカ（display: marker）の位置付けは微妙（CSS2.1 で削除）なので，CSS3 を待った方が良いでしょう（::marker 疑似要素が新たに含まれる）。それまでは，

> <li>にbackground-imageを指定してポジションを微調整

が無難だと思います。

※なお，ul はブロック要素ですが，li はブロック要素でもインライン要素でもありません。
2   名前： もすも  ： 2006/03/17 09:20
Pid さん　ありがとうございます。

> 現状，リストマーカ（display: marker）の位置付けは微妙（CSS2.1 で削除）なので，CSS3 を待った方が良いでしょう（::marker 疑似要素が新たに含まれる）。

すいません！
持ってる本のmarker-offsetプロパティのところに
‘マージン関連プロパティで指定するようになる予定である’
と書いてありました。
【予定】をすっかり読み飛ばしてました...。


>> <li>にbackground-imageを指定してポジションを微調整

> が無難だと思います。

そうですか...。
文字の大きさを決めてしまう場合は良いのですが、
可変にしたい場合はどうしたら良いのかな〜っと思っていたのですけど
仕方ないですね。そんなの指定したい人はいないのかな...。

>※なお，ul はブロック要素ですが，li はブロック要素でもインライン要素でもありません。

そうなんですか。知りませんでした。
ありがとうございます。
3   名前： Pid ： 2006/03/17 09:20
> 文字の大きさを決めてしまう場合は良いのですが、可変にしたい場合はどうしたら良いのかな〜っと

えーと，可変のときに何か問題が出ましたっけ？
4   名前： もすも  ： 2006/03/17 09:20
> えーと，可変のときに何か問題が出ましたっけ？

問題？ということではないのですが。

文字の大きさに対してリストマーカの画像を作るのですが、マーカが画像だと
可変の場合、サイズが合わなくなることが変だと思うからです。

list-type-typeで指定できるマーカだと、文字サイズに合わせてマーカの大きさも変わりますよね。
なので、文字サイズ可変の時はマーカは画像を使わないでリストにしたいな、と。
5   名前： Pid ： 2006/03/17 09:20
> list-type-typeで指定できるマーカだと、文字サイズに合わせてマーカの大きさも変わりますよね。

あ，なるほどです。

<ul>
<li><p>項目 1</p></li>
<li><p>項目 2</p></li>
</ul>

のように li 直下を何かで挟めば，li > p { margin-left: 2em; } のように余白を空けることはできますが，スタイルのために要素を増やすのは本末転倒な気がしますしね（まあ，理由をデッチ上げても良いのですが）。

WinIE 独自技術ならば，http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/filter/AlpImgLdr.htm や expression() を組み合わせて背景画像の動的なサイズ変更も可能ではあるのですが，すさまじく重そうです。

どうせ J(ava)Script を使うなら，list-style-image の値から img 要素を作成し，それを li 要素の最初の子要素にしてマーカに見せかけ，width と height を変更……ああ面倒 (^^;)。

すみません，良い方法が思い浮かびませんですた。
6   名前： もすも  ： 2006/03/17 09:20
Pidさん　またまたありがとうございます。

> li 直下を何かで挟めば，li > p { margin-left: 2em; } のように余白を空けることはできますが

お！っと思ったのですが、できませんでした...(^^;)。

スタイルを
<style type="text/css"><!--
ul{}
li{}
li > p { margin-left: 2em; }
--></style>

htmlを
<ul>
　<li><p>項目 1</p></li>
　<li><p>項目 2</p></li>
　<li>項目 3</li>
　<li>項目 4</li>
</ul>

っとしてみたのですが、項目1〜4まで‘●’と‘項’の間の余白は変わりませんでした。
で、li > p を子孫セレクタにしてみたところ、マーカごと2em分左によりました...。
何か大きな勘違いをしていますでしょうか（汗）？


> http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/filter/AlpImgLdr.htm

コレはすごく面白いですね！（やらないとは思うけど^^;）
勉強になりました。ありがとうございます。

7   名前： Pid ： 2006/03/17 09:20
> お！っと思ったのですが、できませんでした

o..rz。Mozilla/Firefox と Safari は >>5 で間隔が空くのに（どの道，IE は子セレクタに対応していないので，改善は必要だったのですが）。

と思いきや，Mozilla/Firefox，Safari，Opera は li 要素の padding-left で十分ですた。

<ul>
　<li>項目 1</li>
　<li>項目 2</li>
</ul>

li { padding-left: 4em;　}

ですから，後は IE への方法さえ見つかれば，アンダースコアハックなどで IE だけ分岐させれば良いと思います。今，IE が手元にないので検証できません（すみません）が，list-style-position: outside; を明示するとどうでしょうか。あるいは，li p の padding-left という手もあるかも…？
8   名前： もすも  ： 2006/03/17 09:20
> （どの道，IE は子セレクタに対応していないので，改善は必要だったのですが）。

すすすすみません。IEでしか確認しておりませんでした。
そしてIEは子セレクタに対応していないことを知りませんでした。
中途半端な状態で返信してしまい、申し訳ありません。

> ですから，後は IE への方法さえ見つかれば，アンダースコアハックなどで IE だけ分岐させれば良いと思います。
> 今，IE が手元にないので検証できません（すみません）が，list-style-position: outside; を明示するとどうでしょうか。

Ff、NNで確認したら思い通りの表示になりました！
list-style-position: outside; を明示してみたのですが、やはりマーカごとマージンが効いてしまいました。
ので、現状はこのままで良いかな、と思うことにしました。

大変勉強になりました。
ありがとうございます！

一覧へ戻る