<ul><li>の位置

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

0   名前： りん ： 2006/07/14（金） 17:51  ID:okhPWgGZ
リストタグを入れると、勝手に隙間ができますが、
この隙間の間隔を設定することが出来るのでしょうか？

できれば、ＣＳＳで設定したいのですが、
ＣＳＳで可能かどうかわからないため、こちらに質問しました。

ご回答宜しく御願いします。
1   名前： 匿名 ： 2006/07/14（金） 17:51  ID:zqn32COP
> できれば、ＣＳＳで設定したいのですが、
むしろ、見た目は CSS で調整します。
margin と padding をいじると良いです。
2   名前： あの ： 2006/07/14（金） 17:51  ID:lKHRzitM
便乗ですみません。
リストで
-----------------------------
・あああ
・いいい
・ううう
-----------------------------
としたときの、マークと文字の間隔

・　　　　　　　　　　あああ
　　←この間隔→

の調整のことでしょうか？


自分もやってみて、
広くするにはpaddingを使えばいくらでもできるんですが
0pxにしても、ちょっとした隙間が空いてしまいます
（IEでしか確認してませんので、他のブラウザではどう見えてるかわかりません）

<style type="text/css">
<!--
ul{
background-color: #ff0000;
}
li{
background-color: #ffddee;
margin: 5px;
padding-left: 20px;
}
-->
</style>

で、わざとmarginとpaddingを設定し
わかりやすいように背景に色をつけてみて
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>

というようにまずしてみてから、
あとでmarginとpaddingを0pxにしてみたのですがダメでした。

あきらめて、list-style-imageで
右寄りに点を書いた16px*16pxの透過の画像を使ってますが
何かいい方法はありますでしょうか？
3   名前： カヅサツ ◆ThCi95HEzw ： 2006/07/14（金） 17:51  ［URL］  ID:O5hEMlpW
> 便乗ですみません。

謝るくらいなら最初からスレッド立てようよ。
4   名前： あの ： 2006/07/14（金） 17:51  ID:lKHRzitM
上記のことでテストしてたページ↓
http://www.geocities.jp/nyareap/test.html

IEでしか見たことなかったため
いい機会かなと思いましてfirefoxをインストールして見てみると…

list-style-imageでも一定の隙間が空くんですねorz
IEではあまり隙間なく見えるのに

仕方ない隙間なのでしょうか…
5   名前： あの ： 2006/07/14（金） 17:51  ID:lKHRzitM
あ、スレッド立てた方が良かったでしょうか

重複になるから良くないかと思いまして
便乗の方がマシかと考えたのですが…
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/07/14（金） 17:51  ［URL］  ID:O5hEMlpW
http://www.tagindex.com/cgi-lib/bbs/patio.cgi 65以降。
7   名前： あの ： 2006/07/14（金） 17:51  ID:lKHRzitM
りんさん

りんさんの質問と内容が違っているかもしれないのに
便乗質問してすみませんでした。
8   名前： りん ： 2006/07/14（金） 17:51  ID:m5QUDPaD
＞あのさん、いえいえ、助かりました。

私が言いたかった事は、下記のようなことです。

-----------------------------
・あああ
　　　・　AAAAA
　　　・　BBBBB
・いいい
・ううう
-----------------------------
としたときの、マークと文字の間隔

・あああ
　　・　　AAAA
　　・　　BBBB
←→　←→

上の２箇所の←→の間隔の調整のことです。
私は下記の様にしましたが・・上記のアルファベットの
で入力した箇所が特に分からないところです。

ul#menu { list-style-type: decimal;
background-color: #ffddee;
margin: 0px;
padding-left: 5px;
list-style-image: url(y07r_ff6600.gif);
}

li#menu { list-style-type:square;
background-color: #ffddee;
margin: 0px;
padding-left: 10px;
list-style-image:url(y07r_ff6600.gif);
}

<ul id="menu">
<li>あああ<ul>
<li>AAAAA</li>
<li>BBBBBB</li>
</ul></li><li>いいいいい</li>
<li>ええええええ
<ul>
<li>ｃｃｃｃｃ</li>
<li>ｄｄｄｄｄ</li>
</ul></li>
</ul>

前回は詳細を伝えられなくてすみませんでした。
宜しく御願い致します。
9   名前： カヅサツ ◆ThCi95HEzw ： 2006/07/14（金） 17:51  ［URL］  ID:O5hEMlpW
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
ul#menu{
	margin: 0px 0px 0px 18px;
	padding: 0px 0px 0px 0px;
}
ul#menu li{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
}
ul#menu ul{
	margin: 0px 0px 0px 18px;
	padding: 0px 0px 0px 0px;
}
ul#menu ul li{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 20px;
}
</style>
</head>
<body>
<ul id="menu">
	<li>あああ
		<ul>
			<li>AAAAA</li>
			<li>BBBBBB</li>
		</ul>
	</li>
	<li>いいいいい</li>
	<li>ええええええ
		<ul>
			<li>ccccc</li>
			<li>ddddd</li>
		</ul>
	</li>
</ul>
</body>
</html>

10   名前： りん ： 2006/07/14（金） 17:51  ID:m5QUDPaD
ソースまで書いてもらって、感謝です。
ありがとうございました。
なんとか、間隔を調節することができました。

ただ、リストマークを入れたのですが、
リストもリスト項目のマークも同じになってしまいました。

この場合は、どうしたらいいのでしょうか？


それから、すこし関係ないですが、
こんな場合は、新しいスレッドをCSSの方に立てた方が
いいですか？

11   名前： カヅサツ ◆ThCi95HEzw ： 2006/07/14（金） 17:51  ［URL］  ID:O5hEMlpW
> こんな場合は、新しいスレッドをCSSの方に立てた方がいいですか？

原則的に1スレッド1質問の方が、後々参照する人にとっては便利なことが多いです。

ただ、まったく関連しないとも言い切れないので、簡単に回答します。

要は >>0 も >>10 も子孫セレクタの使い方の問題です。

「ul#menu li」 と「ul#menu ul li」に、それぞれ違う値の list-style-image を指定してみましょう。

これでも判らないようでしたら、私は新規スレッドをオヌヌメします。
12   名前： りん ： 2006/07/14（金） 17:51  ID:okhPWgGZ
ありがとうございました。丁寧に説明してもらったので、
上手く２種類のリストマークを使い分けることが出来ました。


そうなんです・・私は　「子孫セレクタ」がほとんど分からないですよね。
その度に調べるのですが、画面上には反映されないことが多いです。

リストマークを教えてもらって、出来るようになったら、
すこし物足りなさを感じて、
せっかく教えてもらって恐縮なのですが、背景設定して、
ホーバーでマークが変わるように、ちょっと今から調べてやってみます。

どうもありがとうございました。
一覧へ戻る