- ベストアンサー
リストの前後の行間をなくす方法を教えてください。
tasekiの回答
- taseki
- ベストアンサー率66% (155/233)
> 上記の意味がよくわからないのですが、倍率指定だと文字の大きさも変わってくるということですか？（きっと違いますよね・・） 倍率指定なら文字の大きさが変わっても対応した高さになる、ということです。 すみません確かに説明不足でした。 以下、順に説明します。 まずは、そもそも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倍ぐらいにしてあって、詰まっているとやはり読みにくいです。 以下を表示させてみてください。 --------------- <html> <body> <p>┏┓国♪薔薇｜ｊｙ<br>┗┛国♪薔薇｜II</p> <hr> <p style="line-height:100%;">┏┓国♪薔薇｜ｊｙ<br>┗┛国♪薔薇｜II</p> </body> </html> --------------- 指定しない＝デフォルトの normal（上）と line-height:100% （下）の違いがわかると思います。下は文字と文字が、くっ付きすぎています。これがページいっぱいにギッチリ詰まっていたら、かなり読みにくいです。 ここまでを踏まえた上で、次に、倍率（1.2など）と割合（120%など）の違いについて。 上のサンプルなど、あえて割合で指定しましたが、割合での指定方法は、実はあまり利用価値がないのです。 これは具体例を見たほうが早いと思います。 <p style="font-size:12pt;line-height:150%;">ABC<br>DEF<br>GHI</p> <hr> <p style="font-size:12pt;line-height:18pt;">ABC<br>DEF<br>GHI</p> 上の2つはまったく同じ意味になります（もちろん表示結果も）。 フォントサイズ 12pt の 150% ＝ 18pt ですよね。その計算を「人間がする」か「機械がする」かの違いでしかありません。むしろ、150% と書くと表示のたびに毎回計算をさせるわけで（負荷はわずかだとしても）やらせる意味も無いですし、逆に 18pt のほうがソースを見たときの明確さが、どちらかといえば高いでしょう。 で、ここからが重要。 line-height にパーセント指定をしてしまう人は、そうすればブラウザが“動的に”調整してくれる、と勘違いしている場合が多いですが、実はそうではなく“固定”です。上の例のように、18pt と書いたのと同じ、つまり 18pt で固定されます。文字の大きさが途中で変化しても、「18pt」という値が継承されてしまいます。 これに対して 1.5 のように倍率で指定すると、計算後の「18pt」ではなく「1.5」が継承されるので、文字の大きさにあわせて“動的に”調整してくれます。 以下を表示させて見れば一目瞭然です。 <p style="line-height:1.5;fontsize:12pt;">むかしむかしのお話です。<br>ある日おばあさんが、<br>川で洗濯をしていると、<br>川上から<span style="font-size:36pt;">大きな桃</span>が、<br>どんぶらこ、どんぶらこ</p> <hr> <p style="line-height:150%;fontsize:12pt;">むかしむかしのお話です。<br>ある日おばあさんが、<br>川で洗濯をしていると、<br>川上から<span style="font-size:36pt;">大きな桃</span>が、<br>どんぶらこ、どんぶらこ</p> 途中でフォントサイズが 36pt に変われば、その 1.5倍の 54pt に“動的に”調整してくれます。 もちろん上は極端な例ですが、他の要素（画像など）の影響もあることと、意外に勘違いしている人が多いことで、重なって読めないページが、結構多いです…。 一般的に、line-height は倍率指定が推奨されていて、いわゆる「行送り」と呼ばれます。 たいていのページでは line-height:1.5 が良いでしょう。
関連するQ&A
- 行間の調整方法を教えてください
ブログのテンプレートをカスタマイズしてる中で、やり方が分からないところが出てきました。 <ul style="line-height:200%;"> <li>あああああああああああああああああ</li> <li>かかかかかかかかかかかかかかかかかかかかかかかかかかか</li> <li>さささささささ</li> </ul> 上記 ｈｔｍｌ は下図のように表示されます。リストが途中で折り返されるのは幅が広くとっていないからです。なお、数字は説明の便宜で付けています。 図で行間が均一になっています。 リストの間を、つまり、 「2と3の間の行間」、「5と6の間の行間」をもう少し広くしたいと思います。 その方法を教えてください。
- ベストアンサー
- ブログ
- リストで行間を指定したい
リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。 ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} ----- <p>情報</p> <ul> <li>その1</li> <li>その2</li> </ul>
- ベストアンサー
- HTML
- IE7で行間 助けてください
行間の差がありすぎます。IE7で１行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>
- ベストアンサー
- HTML
- cssでリストの行間をひろげるには？
cssでリストの行間をひろげる方法をお教えください。 ・あいうえお ・かきくけこ で、2行の間隔を1.5倍ほどにひろげたいのです。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- リストに画像入れると
<ul> <li><img src=…><li> <li><img src=…><li> </ul> のようにすると、IE6.0で、リストに行間が発生します。Netscape7だと画像はぴったりとくっついて並ぶのです。 IEでぴったりとくっつくにはどうしたらいいですか？
- ベストアンサー
- HTML
- cssのリストで、番号1と2の間の行間を「2」にする方法は？
css（スタイルシート）のリストで、番号1と2の間の行間を「2」にする方法をお教えください。1や2の文章群の段落は「1.5」になっています。 1。あああああああああああああああああああああああああああああああああああああああああああああああああああ。 （この部分を「2」にする） 2。えええええええええええええええええええええええええええええええええええええええええええええええええええええええええ。 （この部分を「2」にする） 3。ううううううううううううううううううううううううううううううううううう
- ベストアンサー
- 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行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか？ 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リスト間の隙間を無くす方法 jquery
jquery記述にてリスト間の隙間を無くす方法を探しています。 改行してあるリスト項目を <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> ↓ <ul> <li>aaa</li><li>aaa</li><li>aaa</li> </ul> このように隙間なく並べた場合と同じ状態にしたいのですが、どのような方法があるのでしょうか。 <li>aaa</li><!-- --><li>aaa</li> このようにコメントアウト入れようと思いましたがうまく入りませんでした。 もっと良い方法などあれば教えて頂きたく質問させていただきました。 記述など具体的にあれば大変助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストボックスで改行するたびにエキストラの行間ができてしまいます。
テキストボックスで改行するたびにエキストラの行間ができてしまいます。 いつもお世話になっています。 テキストボックスの中でふつうに文を書き、改行(ENTERキーを押す)すると何故か知りませんが余分な一行ぐらいの空白ができるのです。改行せずに書き続けると空白は全然できないのですが改行すると余分な空白が…（行間というのでしょうか？） いろいろいじってみても解決が見つからずぜひその空白行間を消す方法を誰か教えてくれたら・・と思っています。 よろしくお願いします。
- 締切済み
- Windows Vista
- リストを作りたいです
CSSを使ってリストを作っています。 <ul> <li>～～～</li> <li>～～～</li> <li>～～～</li> </ul> という感じにしています。 これを、リストの中にリストがあるようにしたいのですが、どうすればいいでしょうか？ ●花 □バラ □桜 □梅 ●果物 □イチゴ □バナナ □すいか ●乗り物 □バス □新幹線 □飛行機 ↑こういった表示にしたいと思っています。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
お礼が遅くなって申し訳ありません。 taseki様、実例比較までつけていただいた詳しい解説をありがとうございました。良く理解できました。 >倍率指定なら文字の大きさが変わっても対応した高さになる、ということです。 確かに、たまに文字が重なっているページを見かけることがありますが、倍率とパーセント指定の違いが原因だったんですね。 私の質問に対してご丁寧な回答をいただいたことに感謝いたします。