[ HTML ] 文字間隔と行間（行の高さ）を設定する ( letter-spacing / line-height )

Tweet

Pocket

ここでは、HTML で文字と文字の間隔および、行の高さを設定するサンプルを掲載しています。

文字間隔と行の高さを設定する

文字の間隔と文字の高さを設定するサンプルになります。実際にどのようにブラウザ出力されるか確認することができます。

<div style="letter-spacing: 0.5em;">
      文字間隔は文字の大きさの0.5倍となっています。多分。
</div>
<hr>
<div style="letter-spacing: 2em;">
      文字間隔は文字の大きさの2倍となっています。多分。
</div>
<hr>
<!-- １行を１文字の半分とする。重なって表示されてしまう -->
<div style="line-height: 0.5em">
      地球儀を回して世界１００週旅行 
      キミがはしゃいでる まぶしい瞳で
      光の後ろ側 忍び寄る影法師
      なつかしの昨日は 今雨の中に
      やさしくなりたい やさしくないたい
      虚しさばかりじゃ
</div>
<hr>
<!-- 標準 -->
<div>
      愛なき時代に生まれたわけじゃない
      キミといきたい キミを笑わせたい
      愛なき時代に生まれたわけじゃない
      強くなりたい やさしくなりたい
</div>
<hr>
<!-- １行を２文字分とする -->
<div style="line-height: 2em">
      強くなりたい 強くなりたい
      我慢ばかりじゃ誤魔化しばかりじゃ
      愛なき時代に生まれたわけじゃない
      キミにあいたい キミを笑わせたい
      愛なき時代に生まれたわけじゃない
      強くなりたい やさしくなりたい
      愛なき時代に生きてるわけじゃない
      手を繋ぎたい やさしくなりたい
</div>
<hr>

ブラウザ出力結果

line-height に指定できる単位

上記のサンプルで指定した以外に、line-height に指定できる単位は下表の通りです。

Tweet

Pocket