プロが教えるわが家の防犯対策術！

FC2ブログの改行幅の質問です。

解決済

  • 質問者：fewewfewcf
  • 質問日時：
  • 回答数：5件

あああああああああああああああ
あああああああああああああああああああ

ああああああああああああああああ


こんな感じで文字と改行した文字の幅が狭かったので

CSSに
line-height:1.7;

で幅を大きくしました。
そしたら


あああああああああああああああ

あああああああああああああああああ



あああああああああああああああああああああ


このように空白を開けた改行が大きすぎてしまいました。
空白を開けた改行のみを小さくしたいのですが
HTMLやCSSにどう入力すればいいのでしょうか？

説明が下手ですみません。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： taloo
  • 回答日時：

すみません、完全に余談です。



>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>


ご参考まで。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： taloo
  • 回答日時：

行間が広い所は段落ってことでいいですか？



<style>
p{
line-height:1.2;
margin-top:1.7em;
}
</style>


<p>ああああああああああああああ。ウインドウ幅以上の（折り返しされる）長い文章、またはbrタグで改行</p>
<p>いいいいいいいいい</p>

---------
http://oshiete.goo.ne.jp/qa/7763818.html
こちらのNo.1の回答で、単位をつけなければなりませんと書かれていますが、
line-height（と音声に関するプロパティの一部）は、単位無しの書き方ができます。

line-height: 1.2
line-height: 1.2em
line-height: 120%
この３つは、行間が同じになります。

私的には、em、%よりも単位無しで書くのをお勧めします。
この３つは継承の仕方に違いがありますが、単位無しにすると問題になる事がほとんどなくなる（期待通り表示される）と思いますので。

この回答への補足

僕は<p>で記事を囲んでいませんが・・・。

補足日時：2012/10/29 16:35
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： too_bad
  • 回答日時：

はい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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： too_bad
  • 回答日時：

そしてプロパティに対する値を見間違えたという(´・ω・｀)

    • good
    • 0
    • 件
通報する

No.1

  • 回答者： too_bad
  • 回答日時：

p.space {


line-height: 17px;
}


<p class="space">
あああああああああああああああ<br />
あああああああああああああああああああ
</p>
<p class="space">
ああああああああああああああああ
</p>

こんな感じではいかがでしょ？
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

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

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

ページトップページトップ

Q質問する（無料）

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

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

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

おすすめ情報