行間を広くしたり狭くしたり、調整を行うにはプロパティにline-heightを指定します。
line-height:指定する値;
}
例えば、下の文の行間を調整するとします。
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
少し窮屈で読みづらいですね。
行の間隔が狭くて、読むのに目が疲れてしまいます。
そこで、line-heightを使って行間を調整します。
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
適切な行間に調整することにより、スッキリと読みやすくなりました。
このように、line-heightを使うことにより読みやすい文章を作ることが可能です。
行間の調整方法
行間を調整するには、line-heightに値を指定します。
指定する値にはpx以外にも％やemなどが使われる場合があります。このあたりは好みの問題なので、どれを使っても問題はありません。
例えば150％で指定する場合には、行間（行の高さ）がフォントサイズの1.5倍となります。
※私はよくpxやemで値を指定しています。％はあまり使用していません。
[CSSの記述例]line-height:35px;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>行間の調整</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p class=" gyoukan">むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。</p>
</body>
</html>
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。
上のサンプルでは、わかりやすいように広めの間隔を開けています。個人的には25pxくらいが丁度いいのではないかな～…と思います。（サンプルは35px）
でも、「絶対にこの間隔でなければならない」ということはないので、お好みの間隔で指定してOKです。
覚えておきたいポイント
文書は見やすく、読みやすく
行間を調整することにより、見やすく読みやすい文書にすることができます。ギュウギュウに詰まった文書では読みづらく、目が疲れてしまいます。せっかくホームページに来てくれた人もすぐに帰ってしまうかもしれません。
読みやすく美しいホームページにするためにも、行間は適切に調整するようにしましょう。
