リストの前後の行間をなくす方法を教えてください。

Question

<LI>を使ってリストを作ると、その前後に行間ができてしまいます。この空白を狭くしたり、なくしたりする方法があれば教えていただきたいのです。よろしくお願いします。

elttac · Accepted Answer

　既定では，多くのブラウザで，li 要素の前後には空きはできないはずですが……。

おそらく，ul，ol，dl 要素の前後にできる空きを詰めたいのであれば，スタイルシートをお使いください。
　具体的には，ヘッダ（<head>...</head>）に次のように記述します。

<style type="text/css">
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
</style>

数値「0」が前後にできる空きの量の指定です。これを，1em にすると（単位をつけてください）1 行分，0.5em にすると 0.5 行分，のように空きます。
　また，ものによっては，

<style type="text/css">

</style>

と書いてありますが，今となってはたいした違いではありません（むしろ，前の書き方が今後主流になります）。

　スタイルシートについてもっとお知りになりたければ，参考 URL の「Let's begin CSS」あたりが参考になるでしょうか。

参考URL：http://www.tg.rim.or.jp/~hexane/ach/

taseki · Answer

> 上記の意味がよくわからないのですが、倍率指定だと文字の大きさも変わってくるということですか？（きっと違いますよね・・）倍率指定なら文字の大きさが変わっても対応した高さになる、ということです。すみません確かに説明不足でした。以下、順に説明します。まずは、そもそもline-heightは何か？ですが、名前のとおり「行の高さ」であって「行間」ではないことに注意しておいてください。つまり、「ある文字と、次の行にある文字との“すき間”の距離」ではなく、「文字の高さ＋その上下の余白」です。で、その指定の方法について、高さを直接 20pt だとか書く方法はご理解いただけると思います。倍率（1.2など）を指定する場合、割合（120%など）を指定する場合は、「何に対する倍率または割合なのか？」が重要です。それは「フォントサイズに対する倍率または割合」なのです。「元の“行の高さ”に対して○倍」ではありませんので、ご注意。たとえば font-size:10pt の要素に対して line-height:1.5 や line-height:150% と指定すると、行の高さは 10pt X 1.5 ＝ 15pt になります。 quadsさんには大変失礼なのですが、おそらくquadsさんは「デフォルトの行の高さに対する倍率または割合」だと勘違いなさっているかと…。それが指摘させていただいた2つのうちの1つ目です。「100%が規定値です」と書かれていて、それなら「line-height:100%」って無意味ですよね…。100% では「元のまま」なわけです。「行を低くする方法」として紹介されているわけですし、実際に line-height:100% を付ける前（既定値）よりも低くなりますから、100% が既定値ではないことと、掛け算の対象が「元の行の高さ」ではないことが、お解りいただけるかと思います。既定値は「normal」で、これはブラウザが適当に読みやすいよう調整します（私の経験では、文字の高さの1.2倍ぐらいが多い）。印刷業やDTPなどの世界では、文字の高さの1.5倍ぐらいが読みやすいとされています。印刷物もWebページも、多くの、特に「読ませる」主旨のページでは1.5倍ぐらいにしてあって、詰まっているとやはり読みにくいです。以下を表示させてみてください。 ---------------

┏┓国♪薔薇｜ｊｙ
┗┛国♪薔薇｜II

--------------- 指定しない＝デフォルトの normal（上）と line-height:100% （下）の違いがわかると思います。下は文字と文字が、くっ付きすぎています。これがページいっぱいにギッチリ詰まっていたら、かなり読みにくいです。ここまでを踏まえた上で、次に、倍率（1.2など）と割合（120%など）の違いについて。上のサンプルなど、あえて割合で指定しましたが、割合での指定方法は、実はあまり利用価値がないのです。これは具体例を見たほうが早いと思います。

ABC
DEF
GHI

上の2つはまったく同じ意味になります（もちろん表示結果も）。フォントサイズ 12pt の 150% ＝ 18pt ですよね。その計算を「人間がする」か「機械がする」かの違いでしかありません。むしろ、150% と書くと表示のたびに毎回計算をさせるわけで（負荷はわずかだとしても）やらせる意味も無いですし、逆に 18pt のほうがソースを見たときの明確さが、どちらかといえば高いでしょう。で、ここからが重要。 line-height にパーセント指定をしてしまう人は、そうすればブラウザが“動的に”調整してくれる、と勘違いしている場合が多いですが、実はそうではなく“固定”です。上の例のように、18pt と書いたのと同じ、つまり 18pt で固定されます。文字の大きさが途中で変化しても、「18pt」という値が継承されてしまいます。これに対して 1.5 のように倍率で指定すると、計算後の「18pt」ではなく「1.5」が継承されるので、文字の大きさにあわせて“動的に”調整してくれます。以下を表示させて見れば一目瞭然です。

むかしむかしのお話です。
ある日おばあさんが、
川で洗濯をしていると、
川上から大きな桃が、
どんぶらこ、どんぶらこ

途中でフォントサイズが 36pt に変われば、その 1.5倍の 54pt に“動的に”調整してくれます。もちろん上は極端な例ですが、他の要素（画像など）の影響もあることと、意外に勘違いしている人が多いことで、重なって読めないページが、結構多いです…。一般的に、line-height は倍率指定が推奨されていて、いわゆる「行送り」と呼ばれます。たいていのページでは line-height:1.5 が良いでしょう。

taseki · Answer

line-heightについて、恐縮ですがquadsさんにちょっと捕捉させていただきます。

●line-heightの既定値は 100% ではなく「normal」です。多くのブラウザはfont-sizeの100%より少し余裕を持たせています。
●また、指定できるのは、倍率（1.2など）、長さ（15ptなど）、割合（120%など）、などですが、推奨されるのは基本的に「倍率」指定です。
line-height:120%;
と
line-height:1.2;
はよく似ていますが、1.2と指定すると含まれる要素も「1.2倍」となりますが、120%と指定してしまうと計算後の数値が継承されてしまうので注意が必要です。
よく文字と文字が詰まりすぎたり重なってしまっている見苦しいページを見かけますが…、たいていこれが原因です。

参考URL：http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height

quads · Answer

marginとline-heightでの指定が考えられます。

line-heightを指定するタグはliだけで良いのですが、ブラウザ（NC4.6など）によっては認識が異なるのでul,olも同時に指定した方がよいと思われます。

ということで、同一HTMLソース内に記述する場合は、

<head></head>内に
<style type="text/css">

</style>

の指定でよいかと思います。
無論、100%が規定値です。パーセント指定でなくとも適用されます。
個人的に、特に理由がない限りパーセント指定が好ましいと思います。

li内で改行が行われている場合は、その行間にも適用されます。
なので、li自体の間隔のみを指定したい場合は、margin等で調整してください。

※外部ファイル参照での指定が推奨されますが。
※ドキュメントタイプにより厳密には推奨指定方法が異なります。
※また、metaタグの記述も必要です。（文字セットや使用属性のスクリプト言語指定）

追記。
スタイルシートの基礎を理解されていないようであれば、少しでも学ばれることをお勧めします。

taseki · Answer

以下のように書くと、liの上下が少し詰まります。 -----------------

あいうえお
かきくけこ
さしすせそ
たちつてと

----------------- ただし line-height は li 自体の間隔ではなく「行の高さ」です。なので、li と li の間隔も狭くなったように見えますが、1つの li の中の行間も狭くなります。「ul や ol 全体を詰める」、と考えたほうがいいかもしれません。

リストの前後の行間をなくす方法を教えてください。

既定では，多くのブラウザで，li 要素の前後には空きはできないはずですが……。

> 上記の意味がよくわからないのですが、倍率指定だと文字の大きさも変わってくるということですか？（きっと違いますよね・・）

line-heightについて、恐縮ですがquadsさんにちょっと捕捉させていただきます。

marginとline-heightでの指定が考えられます。

以下のように書くと、liの上下が少し詰まります。

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　既定では，多くのブラウザで，li 要素の前後には空きはできないはずですが……。