文章の行間隔を指定する
HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは ブロックタグやインラインタグで括られた領域内の文章の 行間隔(行の高さ)を指定することができます。style の line-height 指定を使います。
<タグ名 style="line-height:行の高さ">行の高さを指定する文章</タグ名>
- タグ名: P や DIV、SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
- 行の高さ:文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。相対サイズは、その場面で使われる書体の大きさが基準ですので、
部分的に文字の大きさが違う部分がある場合は、相対サイズを使用したほうが安全です。
絶対サイズ 意味 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>
このソースを表示させると、次のようになります。
日本語のフォントは、行の高さとフォントサイズが同じになってしまうので、少し広く設定するとページが見やすくなるでしょう。指定方法は絶対サイズでも相対サイズでも構いませんが、相対サイズにしておくと、文字の大きさを変更した場合に、一緒に行の高さが広がります。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス