Webページで文章を読みやすくするには、行の高さや文字の揃え方を適切に調整することが大切です。
例えば、文章の行間が狭すぎるとギュウギュウに詰まって読みにくくなりますし、逆に広すぎてもバラバラに見えてしまいます。
また、文章を左揃え・中央揃え・右揃えにすることで、見た目のバランスを整えることができます。
この記事では、CSSの「行の高さ（line-height）」と「文章の揃え方（text-align）」 の基本を学びながら、実際に試してみましょう！
行の高さ（line-height）を設定しよう
line-height の基本
CSS の line-height プロパティを使うと、行の高さを調整できます。
次のような書き方があります。
p {
line-height: 1.5; /* 行の高さを1.5倍に */
}行の高さは次の3つの方法で指定できます。
| 指定方法 | 例 | 特徴 |
|---|---|---|
| 数値 | line-height: 1.5; |
フォントサイズの 1.5 倍の行の高さ |
| ピクセル（px） | line-height: 24px; |
行の高さを固定 |
| パーセント（%） | line-height: 150%; |
フォントサイズの 150% に設定 |
実際に試してみよう！
次のHTMLを作成して、index.html として保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>行の高さを試そう</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>行の高さの違いを見てみよう</h1>
<p class="small-line">この文章は行間が狭いです。文字が詰まりすぎて読みにくいかもしれません。</p>
<p class="normal-line">この文章は標準的な行間です。程よく余白があり、読みやすいですね。</p>
<p class="large-line">この文章は行間が広めです。ゆったりとした印象になりますが、広すぎると読みにくくなることもあります。</p>
</body>
</html>CSS（style.css）
次に、以下のCSSを作成し、先ほどのhtmlと同じフォルダにstyle.css として保存してください。
p.small-line {
line-height: 1;
}
p.normal-line {
line-height: 1.5;
}
p.large-line {
line-height: 2;
}いろいろと設定値を変えて、学んでみましょう！
文章の揃え方（text-align）を設定しよう
text-align の基本
text-align プロパティを使うと、文章の揃え方を変更できます。
指定できる値は次の通りです。
| 値 | 説明 |
|---|---|
left |
左揃え（デフォルト） |
center |
中央揃え |
right |
右揃え |
justify |
両端揃え（新聞のように均等に揃える） |
実際に試してみよう！
次のHTMLを作成して、index.html として保存してください。
<p class="left">この文章は左揃えです。</p>
<p class="center">この文章は中央揃えです。</p>
<p class="right">この文章は右揃えです。</p>
<p class="justify">この文章は両端揃えです。新聞のように、文章が均等に整えられます。</p>CSS（style.css）
次に、以下のCSSを作成し、先ほどのhtmlと同じフォルダにstyle.css として保存してください。
p.left {
text-align: left;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
p.justify {
text-align: justify;
}こちらも設定値を変えて、自由にイメージをつかんでみましょう！
問題集
Q1. 行の高さを調整するプロパティはどれ？
- text-align
- font-size
- line-height
Q2. 文章を中央揃えにするには？
- text-align: left;
- text-align: center;
- text-align: right;
Q3. 文章を均等に整列させるには？
- text-align: center;
- text-align: justify;
- text-align: right;
✅ 答え: Q1→3, Q2→2, Q3→2
まとめ
- 行の高さ（line-height） は、文章の可読性に影響する。
- 適切な line-height を設定することで、読みやすい文章が作れる。
- text-align を使うと、文章の揃え方を調整できる。
- 左揃え、中央揃え、右揃え、両端揃えの使い方を理解しよう。
コメントを残す