閉じる

CSSで行間を設定する

line-height

文章の行間を設定する場合、line-heightプロパティを使用します。
イラストレーターやフォトショップ等で設定する行間とは異なりますので、デザインと合わせる場合は注意が必要です。

line-heightの設定

行間をCSSで設定する場合は、下記のように記載します。

line-height:normal;

line-height:行間で設定する値;

上のline-height:normal;を設定すると、行間をブラウザが判断してくれますが、サイズによってはかなり狭く感じる時があります。

その場合は、値を設定します。


例えば、

に行間を設定する場合は


.sample10{
line-height:1.7;
}

のような形で設定します。

単位は、pxや%、emなどを使います。(単位をつかなくても設定できます。)

line-height:170%;

line-height:21px;

のような形です。


ただし、emや%では、設定した数値に制御できずに、文字が重なったりするケースもあるので、
.sample10のline-height:1.7 のように、単位をつけずに設定するのが推奨されています。

line-heightが効かない場合がある

line-heightは、基本ブロック要素に適用されます。
インライン、spanなどでは、設定しても反映されません。

spanに設定する場合は、

display:block;

display:inline-block

を使って、インライン要素をブロック化しましょう。

 

ピックアップ記事

  1. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る