ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

行間を調整する

行間を調整する方法

行間を広くしたり狭くしたり、調整を行うにはプロパティにline-heightを指定します。

.gyoukan {
line-height:指定する値;
}

例えば、下の文の行間を調整するとします。

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

少し窮屈で読みづらいですね。
行の間隔が狭くて、読むのに目が疲れてしまいます。

そこで、line-heightを使って行間を調整します。

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

適切な行間に調整することにより、スッキリと読みやすくなりました。
このように、line-heightを使うことにより読みやすい文章を作ることが可能です。

行間を調整した図

行間の調整方法

行間を調整するには、line-heightに値を指定します。

指定する値にはpx以外にも%やemなどが使われる場合があります。このあたりは好みの問題なので、どれを使っても問題はありません。

例えば150%で指定する場合には、行間(行の高さ)がフォントサイズの1.5倍となります。

※私はよくpxやemで値を指定しています。%はあまり使用していません。

[CSSの記述例]
.gyoukan {
line-height:35px;
}
[HTMLの記述例]

<!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です。

覚えておきたいポイント

文書は見やすく、読みやすく

行間を調整することにより、見やすく読みやすい文書にすることができます。ギュウギュウに詰まった文書では読みづらく、目が疲れてしまいます。せっかくホームページに来てくれた人もすぐに帰ってしまうかもしれません。
読みやすく美しいホームページにするためにも、行間は適切に調整するようにしましょう。

文字の間隔を調整する
« 前のページへ 文字の中央揃えや左・右揃え

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。