TOPページ >  文章を修飾する(背景色、画像、枠など...) > 文章の行間隔を指定する

文章の行間隔を指定する

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは ブロックタグやインラインタグで括られた領域内の文章の 行間隔(行の高さ)を指定することができます。style の line-height 指定を使います。

<タグ名 style="line-height:行の高さ">行の高さを指定する文章</タグ名>
  1. タグ名: P や DIV、SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
  2. 行の高さ:文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。相対サイズは、その場面で使われる書体の大きさが基準ですので、 部分的に文字の大きさが違う部分がある場合は、相対サイズを使用したほうが安全です。
    絶対サイズ意味
    inインチ( 1 in = 25.4 mm )
    cmセンチメートル
    mmミリメートル
    ptポイント( 1 pt = 1/72 in)
    pcパイカ( 1 pc = 12 pt )
    pxピクセル(表示上の 1 ドット幅)
    相対サイズ意味
    em基準書体の文字の高さ
    ex基準書体の文字 x の高さ
    %基準書体のサイズに対する百分率
    数字のみ基準書体サイズに対する倍率
    ※正確にはデバイス依存の相対サイズ

ソースのサンプルです。

<div style="line-height:1.8">
日本語のフォントは、行の高さとフォントサイズが同じになってしまうので、少し広く設定するとページが見やすくなるでしょう。指定方法は絶対サイズでも相対サイズでも構いませんが、相対サイズにしておくと、文字の大きさを変更した場合に、一緒に行の高さが広がります。このサンプルは、行の高さを基準書体の1.8倍に指定しています。
</div>

このソースを表示させると、次のようになります。

日本語のフォントは、行の高さとフォントサイズが同じになってしまうので、少し広く設定するとページが見やすくなるでしょう。指定方法は絶対サイズでも相対サイズでも構いませんが、相対サイズにしておくと、文字の大きさを変更した場合に、一緒に行の高さが広がります。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス