あああああああああああああああ
あああああああああああああああああああ
ああああああああああああああああ
こんな感じで文字と改行した文字の幅が狭かったので
CSSに
line-height:1.7;
で幅を大きくしました。
そしたら
あああああああああああああああ
あああああああああああああああああ
あああああああああああああああああああああ
このように空白を開けた改行が大きすぎてしまいました。
空白を開けた改行のみを小さくしたいのですが
HTMLやCSSにどう入力すればいいのでしょうか?
説明が下手ですみません。
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
すみません、完全に余談です。
>No.4
>この3つは継承の仕方に違いがありますが、単位無しにすると問題になる事がほとんどなくなる(期待通り表示される)と思いますので。
やっぱり訂正。
デザインの感性はデザイナー次第だから、どちらを期待するかはデザイナーが決める事ですね。
単位無し(倍率指定)では倍率を継承し、単位あり(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>
ご参考まで。
No.4
- 回答日時:
行間が広い所は段落ってことでいいですか?
<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%
この3つは、行間が同じになります。
私的には、em、%よりも単位無しで書くのをお勧めします。
この3つは継承の仕方に違いがありますが、単位無しにすると問題になる事がほとんどなくなる(期待通り表示される)と思いますので。
No.3
- 回答日時:
はい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>
No.1
- 回答日時:
p.space {
line-height: 17px;
}
<p class="space">
あああああああああああああああ<br />
あああああああああああああああああああ
</p>
<p class="space">
ああああああああああああああああ
</p>
こんな感じではいかがでしょ?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
【FX】MT4で自作EAを使って自動...
-
リンク文字
-
fontサイズ指定の ”-(マイナ...
-
セレクトボックス内の文字の文...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
API Sleep関数について
-
Format 関数 表示書式指定文字...
-
800*600の画面でもちゃんと見え...
-
HLMT、CSSについて相談です。 ...
-
CSSでfont-weightを指定しても...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
cssファイルの名称付け
-
テキストエディタmiの表示文字...
-
入力規則のリストの文字の大き...
-
EXCEL VBA 印刷プレビューダイ...
-
似ているフォント(Win⇔Mac)
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
文字の位置、上下のマージンが...
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
CSSで14px/1.4の部分の記述は正...
-
Excel VBA メール作成について ...
-
API Sleep関数について
-
h1タグのパンくずリストへの設置
-
テキストファイルの行を指定し...
-
jquery.validationEngine.jsカ...
-
iframe 文字化け
-
全角半角含めて等幅で表示したい
-
HLMT、CSSについて相談です。 ...
-
HTMLで特定の文字だけ色を変え...
-
指定の文字だけ色を変える
おすすめ情報