HTML

CSS 行間を空ける

投稿日:

ホームページで文章などを書くと、行間が無いので大変見難い文章になってしまいます。
それを防ぐためにCSSを使用して行間を空ける方法を説明します。
CSSで行間を空けるには、「line-height」プロパティを使用します。

■使用例

<STYLE Type="text/css">
BODY{
line-height: 150%;
}
TD{
line-height: 150%;
}
</STYLE>

「BODY」だけに行間を指定した場合は、テーブル内に反映されないので必要に応じて「TD」
も指定しましょう。

■実際の見え方

ine-height: 150%;を指定 ine-height: 200%;を指定
あいうえお
かきくけこ
さしすせそ
あいうえお
かきくけこ
さしすせそ

上の例では%を使用して指定しましたがpxを使用しても指定できます。
ただし、文字サイズによっては重なってしまい場合があるので、注意が必要です。

■使用例

<STYLE Type="text/css">
<!--

BODY{
line-height: 20px;
}
TD{
line-height: 20px;
}

-->
</STYLE>

  • この記事を書いた人
さすけ

さすけ

インフラエンジニアとして数々の大手サーバーを構築を実施し、現在はWebサーバーの構築、サイト作成を中心に活躍しています。

-HTML
-

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.