- ベストアンサー
FC2ブログの改行幅の質問です。
あああああああああああああああ あああああああああああああああああああ ああああああああああああああああ こんな感じで文字と改行した文字の幅が狭かったので CSSに line-height:1.7; で幅を大きくしました。 そしたら あああああああああああああああ あああああああああああああああああ あああああああああああああああああああああ このように空白を開けた改行が大きすぎてしまいました。 空白を開けた改行のみを小さくしたいのですが HTMLやCSSにどう入力すればいいのでしょうか？ 説明が下手ですみません。 よろしくお願いします。
- fewewfewcf
- お礼率17% (10/57)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
すみません、完全に余談です。 >No.4 >この３つは継承の仕方に違いがありますが、単位無しにすると問題になる事がほとんどなくなる（期待通り表示される）と思いますので。 やっぱり訂正。 デザインの感性はデザイナー次第だから、どちらを期待するかはデザイナーが決める事ですね。 単位無し（倍率指定）では倍率を継承し、単位あり（em、%）では計算結果（pxやptに変換したもの）を継承します。 ------単位あり------------------------ p{ font-size: 16px } p{ line-height: 1.2em } p span.monologue { display: block; font-size: 12px } <p>吾輩は猫ではない。名前もある。<span class="monologue">（じゃあ何なんだよ。）</span></p> この場合、 .monologueのline-heightは、<p>に指定されたfont-sizeから計算した16×1.2＝「19.2px」を継承します。 ------単位なし------------------------ p{ font-size: 16px } p{ line-height: 1.2 } p span.monologue { display: block; font-size: 12px } <p>吾輩は猫ではない。名前もある。<span class="monologue">（じゃあ何なんだよ。）</span></p> この場合、 .monologueのline-heightは「倍率」を継承するため、.monologueに指定されたfont-sizeから計算しなおして12×1.2＝14.4pxとなります。 ------------------------ 改行が伴わない場合は、その行の最大値が行全体のline-heightとなります。 <p>の部分（.monologueの外側）のline-heightが最大となるため、19.2pxで表示されます。 p{ font-size: 16px } p{ line-height: 1.2 } p span.monologue { font-size: 12px } <p>吾輩は猫ではない。名前もある。<span class="monologue">（じゃあ何なんだよ。）</span></p> ご参考まで。
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
行間が広い所は段落ってことでいいですか？ <style> p{ line-height:1.2; margin-top:1.7em; } </style> <p>ああああああああああああああ。ウインドウ幅以上の（折り返しされる）長い文章、またはbrタグで改行</p> <p>いいいいいいいいい</p> --------- http://okwave.jp/qa/q7763818.html こちらのNo.1の回答で、単位をつけなければなりませんと書かれていますが、 line-height（と音声に関するプロパティの一部）は、単位無しの書き方ができます。 line-height: 1.2 line-height: 1.2em line-height: 120% この３つは、行間が同じになります。 私的には、em、%よりも単位無しで書くのをお勧めします。 この３つは継承の仕方に違いがありますが、単位無しにすると問題になる事がほとんどなくなる（期待通り表示される）と思いますので。
- too_bad
- ベストアンサー率53% (70/130)
はい3連続すみません・・・ よく文章を読まないとだめですね・・・ <head> <meta charset="utf-8"> <title></title> <style> <!-- p.hei { line-height: normal; } span.space { line-height: 5em; } --> </style> </head> <body> <p class="hei"> <span class="space">あああああああああああああああ</span><br /> あああああああああああああああああああ</p> <p> ああああああああああああああああ<br /> <span class="space">いいいいいいいいいいいいいいいいいいいいい<br /> うううううううううううううううううううう</span> <!-- 「い」の部分は「あ」との差は5emで、続けて配置されている「う」との差は10em。 --> </p> <p> あああああああああああああああ<br /> あああああああああああああああああああ </p> <p> ああああああああああああああああ</span> </p>
- too_bad
- ベストアンサー率53% (70/130)
そしてプロパティに対する値を見間違えたという(´・ω・｀)
- too_bad
- ベストアンサー率53% (70/130)
p.space { line-height: 17px; } <p class="space"> あああああああああああああああ<br /> あああああああああああああああああああ </p> <p class="space"> ああああああああああああああああ </p> こんな感じではいかがでしょ？
補足
僕は<p>で記事を囲んでいませんが・・・。