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

Pocket

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

スポンサーリンク

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

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

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

ブラウザ出力結果

文字間隔は文字の大きさの0.5倍となっています。多分。

文字間隔は文字の大きさの2倍となっています。多分。

地球儀を回して世界100週旅行
キミがはしゃいでる まぶしい瞳で
光の後ろ側 忍び寄る影法師
なつかしの昨日は 今雨の中に
やさしくなりたい やさしくないたい
虚しさばかりじゃ

愛なき時代に生まれたわけじゃない
キミといきたい キミを笑わせたい
愛なき時代に生まれたわけじゃない
強くなりたい やさしくなりたい

強くなりたい 強くなりたい
我慢ばかりじゃ誤魔化しばかりじゃ
愛なき時代に生まれたわけじゃない
キミにあいたい キミを笑わせたい
愛なき時代に生まれたわけじゃない
強くなりたい やさしくなりたい
愛なき時代に生きてるわけじゃない
手を繋ぎたい やさしくなりたい

line-height に指定できる単位

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

単位サイズ意味
in絶対サイズインチ
cm絶対サイズセンチメートル
mm絶対サイズミリメートル
pt絶対サイズポイント
pc絶対サイズパイカ。1pc=12pt
em相対サイズ基準書体の文字の高さ
ex相対サイズ基準書体の文字xの高さ
%相対サイズ基準書体のサイズに対する割合
数字のみ相対サイズ基準書体のサイズに対する倍率
スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>