閉じる

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. キーワード
    SEO(Search Engine Optimization)とはGoogleなどの検索エン…
  2. Webサイトやブログ内に企業用Facebook公開ページの投稿を埋め込んで表示できるFacebook…
  3. iPhoneの「カレンダー」アプリに見覚えがないアドレスで「今すぐクリックしてiPhoneを保護しま…
ページ上部へ戻る