ホーム >>> HTML整理ノート

line-height 行間の設定

(設定値)
 <normal>・・・初期値、ユーザーの環境に依存(通常は約1.2倍)
 <単位で指定>・・・cm,mm,em,px、pt などの単位で指定
 <%> ・・・font-sizeを100%とした場合の割合。例えば、200%指定は現在のフォントサ      イズの2倍に、即ち行間が1行分だけあく(2emと等価)
 <数値>・・・font-sizeを1とした場合の割合を小数で設定。
        (例 1.6 ・・・160%と同じ)

Sample
        
このサンプルでは、FontSizeが14pxで,行間指定は 設定していません このサンプルでは、FontSizeが14pxで,行間指定は 14px に設定している。 このサンプルでは、FontSizeが14pxで、行間指定は 30px に設定している。 このサンプルでは、FontSizeが14pxで,行間指定は 14pt に設定している。
このサンプルでは、FontSizeが14pxで、行間指定は 8mm に設定している。 このサンプルでは、FontSizeが14pxで、行間指定は 1cm に設定している。 このサンプルでは、FontSizeが14pxで、行間指定は 1.2cm に設定している。 このサンプルでは、FontSizeが14pxで,行間指定は 90% に設定している。
このサンプルでは、FontSizeが14pxで、行間指定は 150% に設定している。 このサンプルでは、FontSizeが14pxで、行間指定は 0.9 に設定している。 このサンプルでは、FontSizeが14pxで、行間指定は 1.5 に設定している。 このサンプルでは、FontSizeが14pxで,行間指定は 0 に設定している。

  1. これは1行目
  2. これは2行目
  3. これは3行目
  4. これは4行目

リストにもline-height 行間の設定を利用できる

■line-heightを200%、150%、100%、80%、50%、10%に設定。見比べてください

Line:200%
Line:200%
Line:200%

Line:150%
Line:150%
Line:150%

Line:100%
Line:100%
Line:100%

Line:80%
Line:80%
Line:80%

Line:50%
Line:50%
Line:50%

■line-heightの活用

HomePage
HTML
CSS Style

Sample Source......................................................................>>>

<table border="1" style="font-size:12px;">
  <tr>
    <td>このサンプルでは、FontSizeが14pxで,行間指定は 設定していません</td>
    <td style="line-height:14px">このサンプルでは、FontSizeが14pxで,
          行間指定は 14px に設定している。</td>
    <td style="line-height:30px">このサンプルでは、FontSizeが14pxで、
          行間指定は 30px に設定している。</td>
    <td style="line-height:14pt">このサンプルでは、FontSizeが14pxで,
          行間指定は 14pt に設定している。</td>
  </tr><tr>
    <td style="line-height:8mm">このサンプルでは、FontSizeが14pxで、
          行間指定は 8mm に設定している。</td>
    <td style="line-height:1cm">このサンプルでは、FontSizeが14pxで、
          行間指定は 1cm に設定している。</td>
    <td style="line-height:1.2cm">このサンプルでは、FontSizeが14pxで、
          行間指定は 1.2cm に設定している。</td>
    <td style="line-height:90%">このサンプルでは、FontSizeが14pxで,
          行間指定は 90% に設定している。</td>
  </tr><tr>
    <td style="line-height:150%">このサンプルでは、FontSizeが14pxで、
          行間指定は 150% に設定している。</td>
    <td style="line-height:0.9">このサンプルでは、FontSizeが14pxで、
          行間指定は 0.9 に設定している。</td>
    <td style="line-height:1.5">このサンプルでは、FontSizeが14pxで、
          行間指定は 1.5 に設定している。</td>
    <td style="line-height:0">このサンプルでは、FontSizeが14pxで,
          行間指定は 0 に設定している。</td>
  </tr>
</table>
<ol style="line-height:0.8">
  <li>これは1行目
  <li>これは2行目
  <li>これは3行目
  <li>これは4行目
</ol>

<table style="font:16pt 'Times New Roman'" border="1" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td><p style="line-height:200%"><u>Line:200%</u><br>
    <u>Line:200%</u><br>
    <u>Line:200%</u></td>
    <td><p style="line-height:150%"><u>Line:150%</u><br>
    <u>Line:150%</u><br>
    <u>Line:150%</u></td>
    <td><p style="line-height:100%"><u>Line:100%</u><br>
    <u>Line:100%</u><br>
    <u>Line:100%</u></td>
    <td><p style="line-height:80%"><u>Line:80%</u><br>
    <u>Line:80%</u><br>
    <u>Line:80%</u></td>
    <td><p style="line-height:50%"><u>Line:50%</u><br>
    <u>Line:50%</u><br>
    <u>Line:50%</u></td>
    <td><p style="line-height:10%"><u>Line:10%</u><br>
    <u>Line:10%</u><br>
    <u>Line:10%</u></td>
  </tr>
</table>

<p>■line-heightの活用</p>
<div style="font:900 40pt 'Arial Black';line-height:20pt;">
    <div style="color:#404040;text-indent:50px;">
        HomePage</div>
    <div style="color:green;text-indent:100px;">
        HTML</div>
    <div style="color:red;text-indent:150px;">
        CSS Style</div>
</div>