line-heightを使うと何ができるの？
line-heightは行の高さを調整できるプロパティのことだよ
その行間によってWebページのレイアウトはもちろんのこと、文章を読む側の受けるイメージも変わってくるんだよ
まず先に具体例をみてもらおっか
ボタンをクリックすると文章の行間が変化します
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
印象が全く変わってくるね
狭いと緊張感があるし、広いとなんだか余裕を感じる
確かにそうかも
では見ていきましょう
1.行間を設定するline-height
1-1. line-heightの使い方
繰り返しになりますが、行間を指定する場合はline-heightプロパティを使います。
セレクター{
line-height: 値;
}<p>こんにちわ</p>p{
font-size: 20px;
line-height: 24px;
background-color: #ddd;
}この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
1-2.line-heightの単位の有無の差
line-heightは値につけるpxやemなどの単位の有無で子要素への継承が変化します。
<div>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
</div>こういった構成の文章を例とします。
単位ありver.
line-heighの値に単位を設定すると親要素の行間をそのまま子要素が継承します。
<div>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
</div>div{
font-size: 26px; /*divタグ内のfont-sizeを26pxにする*/
line-height: 30px; /*divタグ内の行の高さを30pxにする*/
}
div p{
font-size: 16px; /*divタグ内のpのfont-sizeを16pxにする*/
/*line-heightは30px*/
}
この例だとdivにはline-heigh : 30pxが指定されており、子要素のpにもline-heigh : 30pxが継承されています。
ちなみにdivの方の上下の余白は2pxづつ(line-height : 30px – font-size : 26px = 4px, 4px /2 =2px)で、pの方の余白は7pxづつ(line-height : 30px – font-size : 16px = 14px, 14px /2 =7px)が取られています。
この辺りの計算の話は後半にしております
単位なしver.
line-heighの値に単位を設定しないと親要素を引き継がず再計算されます。
またこの場合は、設定された文字サイズ×指定倍の行間が適用され子要素の方も再計算されます。
<div>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
</div>div{
font-size: 26px; /*divタグ内のfont-sizeを26pxにする*/
line-height: 3; /*font-sizeの3倍*/
}
div p{
font-size: 16px; /*divタグ内のpのfont-sizeを16pxにする*/
/*line-heightは3倍で48px*/
}
コチラの例ではdivのline-heighにはfont-size: 26pxの3倍の72pxが適用されていますが、子要素のpは再計算されてfont-size: 16pxの3倍の48pxが適用されています。
こちらはdivの方の上下の余白は23pxづつ(line-height : 72px – font-size : 26px = 46px, 46px /2 =23px)で、pの方の余白は16pxづつ(line-height : 48px – font-size : 16px = 32px, 32px /2 =16px)が取られています。
例を挙げて2種類見てきましたが、実際webデザインのテキストに使う場合は単位なしの方が好まれるようで行間が詰まっていても広すぎても見づらいのでフォントやデザインにもよりますが1.5〜1.9くらいがちょうど良い感じになります。
line-heightの実例
line-height : 1;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
line-height : 1.5;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
line-height : 2.8;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
あくまで一般の文章の場合です。書く文章によって変えて下さい
じゃあline-heightに単位をつけないで統一したらいいんじゃないの？
line-heightを単位ありで指定するメリットもちゃんとあるんだよ
<p>単位をつける必要性</p>p{
background-color: pink; /*p要素の背景色をピンクにする*/
color: #000; /*p要素の文字色を#000にする*/
font-size: 20px; /*p要素のfont-sizeを20pxにする*/
}単位をつける必要性
先ほどまとめたように垂直方向の中央に配置される性質を利用し高さが設定されている要素を中央に配置したい時には単位ありで指定し、高さとline-heightを同じにすると中央に配置する事ができます。
高さの記事についてはコチラ
p{
background-color: pink; /*p要素の背景色をピンクにする*/
color: #000; /*p要素の文字色を#000にする*/
font-size: 20px; /*p要素のfont-sizeを20pxにする*/
height: 100px; /*p要素のfont-sizeを26pxにする*/
}単位をつける必要性
このような場合に要素を中央に配置したいとします。
その際にline-heightを指定し、値を高さと同じに設定すると…。
p{
background-color: pink; /*p要素の背景色をピンクにする*/
color: #000; /*p要素の文字色を#000にする*/
font-size: 20px; /*p要素のfont-sizeを20pxにする*/
height: 100px; /*p要素のheightを100pxにする*/
line-height: 100px; /*heightと同じ数値を指定する*/
}単位をつける必要性
きちんと垂直方向に対して真ん中に設定する事ができています。
これは良く使うテクニックなので覚えておきましょう
見出しなどで垂直方向の真ん中に配置したい時は単位ありで使用し、逆に文章を書く時は単位なしで書きます。
そうなんだ！
でも本当はどちらかにしてくれたら覚えるのが楽なのになぁ
場合によってline-heightを使い分けるんだね
2.line-heightの基本的な考え方
ここからはline-heightの概念的な面ですので使い方が分かってもういいやって方は終了です。
2-1.line-heightの概念
line-heightの説明の例としてline-heightを60px、font-sizeを20pxで指定しています。
- STEP1何らかのテキストを書く
p{ font-size: 20px; background-color: #ddd; /*わかりやすい様に背景色をつけてあります*/ }テキストや文章を書くとそのfont-sizeの高さで箱が作られると考えるとわかりやすいかもしれません。
ここでは20pxの高さで箱がつくられている感じです。 - STEP2line-heightを設定する
p{ font-size: 20px; line-height: 60px; background-color: #ddd; /*わかりやすい様に背景色をつけてあります*/ }次にline-heightを設定するとテキストが中央に配置され、余白が設定されます。
これはline-heightからfont-sizeを引いて余った余白が上下に均等に分配されるためです。
この工程をまとめると以下の通りです。
2-2.折り返された時の注意
また少し長い文章を作成し、行が折り返された際はこのようになります。
行間の重なりも気を付けるポイントです
p{
line-height: 30px; /*p要素の行の高さを30pxにする*/
background-color: pink; /*p要素の文字の色をピンクにする*/
font-size: 18px; /*p要素のfont-sizeを18pxにする*/
}例として一文を取り出し背景色をつけてあります。
この場合だとp要素のfont-sizeが18pxでline-heightが30pxですので、余った12pxを上と下で分配する形となりそれぞれ6pxの余白ができます。
また次の行にも上と下に6pxの余白がつきます。これによって一行目の下側の余白と足され合計12px分の余白が空いている事にも気をつけましょう。
ちょっとややこしいね
逆にfont-sizeよりもline-heightが小さいと…
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
レイアウトが崩れたりするので注意です
3.まとめ
セレクター{
line-height: 値;
}- 値はpx, em, rem, %で指定
- 文字を書く場合は単位を指定しない方が良い
- 垂直方向に中央配置したい場合は高さ(height)と同じ値を指定し単位を付ける
- 文章を書く時に使いたい場合は単位なしで1.5〜1.9くらいを指定するとバランスが良く見える
コメント