CSSスキル - 第3章 Lesson8

文章の行間を指定するline-heightの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

line-heightプロパティを利用して、2行以上の文章の行間を調整するCSSについて、初心者向けに解説しています。



この動画で学べること

・文章の行間を指定する方法



文章の行間を指定する方法

文章の行間を指定するときには、line-hightというプロパティを使います。
<div>タグのが中の<p>に対してこのプロパティをかけてみましょう。
まずは、値にnormalと入れてみます。
これは、ブラウザで自動的に行間を指定させるものです。
ブラウザで見ても変わりはありません。


div p {
line-height: normal;
}



次に100pxと指定してみます。


div p {
line-height: 100px;
}



一度、保存してブラウザで見てみましょう。
大きな数字ですので、行間が大きく広がりました。
line-hightは、単位がない数字だけでも入力することができます。



div p {
line-height: 1.5;
}



このように書くと、フォントのサイズの1.5倍の行間が指定されます。
他にも、%で指定することもできます。
例えば200%と書くと、フォントのサイズ2倍の高さの行間になります。



div p {
line-height: 200%;
}