LTech

レッスン4: 文字の色と行間をマスターして、見やすさをデザインしよう！

文字の色、行間、文字間隔、配置を調整して読みやすいページを作ります。

🎯 学習目標

  • colorプロパティを使って文字の色を指定できるようになる
  • line-heightで行間を調整して読みやすい文章を作れるようになる
  • letter-spacingで文字間隔を調整できるようになる
  • text-alignでテキストの配置を自由に変更できるようになる

📘 目次

  1. 文字の色を変えてみよう
  2. 行間で読みやすさをアップ
  3. 文字間隔で印象を変える
  4. 文字の配置を調整する
  5. 今日のまとめ
  6. 演習：読みやすいページを作ろう
  7. 理解度チェック

📚 レッスン

1. 文字の色を変えてみよう

colorプロパティを使うと、文字の色を自由に変えることができます。

p {
  color: red;
}

この例では、すべての段落（<p>タグ）の文字が赤色になります。

色の指定方法

CSSでは、色をいくつかの方法で指定できます。

① 色名（キーワード）で指定

わかりやすい英語の名前で色を指定できます。

h1 { color: blue; }    /* 青色 */
h2 { color: red; }     /* 赤色 */
p { color: green; }    /* 緑色 */
  • メリット：覚えやすくて簡単
  • デメリット：色の種類が限られている
② 16進数（ヘックス）で指定

細かい色を指定したいときに使います。#の後に6桁の英数字で指定します。

h1 { color: #ff0000; } /* 赤色 */
h2 { color: #0000ff; } /* 青色 */
p { color: #333333; }  /* 濃いグレー */
span { color: #333; }  /* #333333の省略形 */
  • メリット：何万色でも自由に指定できる
  • デメリット：最初は覚えにくい
③ RGB関数で指定

赤・緑・青の組み合わせで色を作ります。

h1 { color: rgb(255, 0, 0); }   /* 赤色 */
h2 { color: rgb(0, 0, 255); }   /* 青色 */
p { color: rgb(100, 100, 100); } /* グレー */
色の調べ方
好きな色を見つけるには、HTMLカラーコードのようなサイトが便利です。視覚的に色を選ぶと、自動で16進数やRGBの値を教えてくれます。

2. 行間で読みやすさをアップ

line-heightプロパティは、文章の行と行の間隔（行間）を調整します。

p {
  line-height: 1.5;
}

この例では、文字の高さの1.5倍が行の高さになります。

行間の指定方法

指定方法 例 説明
数値（推奨） 1.5 文字サイズの1.5倍の行間。一般的に読みやすい
ピクセル 24px 24ピクセルの固定行間
パーセント 150% 文字サイズの150%（1.5と同じ効果）
読みやすい行間の目安
一般的に1.4〜1.6倍の行間が読みやすいとされています。1.5がバランスの良い値としてよく使われます。

3. 文字間隔で印象を変える

letter-spacingプロパティは、文字と文字の間隔を調整します。

h1 {
  letter-spacing: 2px;
}

この例では、文字と文字の間に2ピクセルの余白が追加されます。

文字間隔の使い分け

値 効果 使用場面
normal 標準の文字間隔 通常の文章
2px 文字間が広くなる タイトルを目立たせたい時
-1px 文字間が狭くなる 文字を詰めたいデザイン

4. 文字の配置を調整する

text-alignプロパティは、文字を左寄せ・中央寄せ・右寄せに配置できます。

h1 {
  text-align: center;
}

配置の種類

値 効果 使用場面
left 左寄せ（初期値） 通常の文章
center 中央寄せ タイトルやボタン
right 右寄せ 日付や署名
justify 両端揃え 新聞のような整った印象

今日のまとめ

  • colorプロパティで文字の色を変更できる（色名、16進数、RGBで指定）
  • line-heightで行間を調整し、読みやすさを向上させる（1.5倍が目安）
  • letter-spacingで文字間隔を調整し、デザインの印象を変える
  • text-alignで文字の配置を左寄せ・中央寄せ・右寄せに変更できる

📚 リファレンス

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

演習1：文字の色を変える

以下のCSSを右側のエディタで試してみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字の色を変える</title>
  <style>
    h1 {
      color: #2c3e50;  /* 濃い青グレー */
    }

    h2 {
      color: #e74c3c;  /* 赤色 */
    }

    p {
      color: #333;     /* 濃いグレー */
    }
    
    .color-name {
      color: green;    /* 色名で指定 */
    }
    
    .color-hex {
      color: #9b59b6;  /* 16進数で指定（紫色） */
    }
    
    .color-rgb {
      color: rgb(52, 152, 219);  /* RGB関数で指定（青色） */
    }
  </style>
</head>
<body>
  <h1>文字の色を変えてみよう</h1>
  
  <h2>さまざまな色の指定方法</h2>
  
  <p>これは濃いグレーの文字です。</p>
  
  <p class="color-name">これは色名（green）で指定した文字です。</p>
  
  <p class="color-hex">これは16進数（#9b59b6）で指定した文字です。</p>
  
  <p class="color-rgb">これはRGB関数（rgb(52, 152, 219)）で指定した文字です。</p>
</body>
</html>

演習2：行間を調整する

文章を読みやすくするために行間を調整してみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>行間の調整</title>
  <style>
    p {
      line-height: 1.6;  /* 読みやすい行間 */
    }

    .tight-text {
      line-height: 1;    /* 詰まった行間 */
    }

    .loose-text {
      line-height: 2;    /* 広い行間 */
    }
  </style>
</head>
<body>
  <h1>行間の違いを確認しよう</h1>
  
  <h2>標準の行間 (line-height: 1.6)</h2>
  <p>これは標準的な行間を持つテキストです。一般的に読みやすいとされる1.6を設定しています。長い文章を読むときに目が疲れにくく、次の行に移るときにスムーズに読み進めることができます。</p>
  
  <h2>詰まった行間 (line-height: 1)</h2>
  <p class="tight-text">これは詰まった行間を持つテキストです。行と行の間隔が狭いため、文字が詰まって見えます。文章量は多く見えますが、読みづらく感じることがあります。特に長文では目が疲れやすくなる可能性があります。</p>
  
  <h2>広い行間 (line-height: 2)</h2>
  <p class="loose-text">これは広い行間を持つテキストです。行と行の間隔が広いため、ゆったりとした印象を与えます。少ない文章でもスペースを取るため、重要な部分を強調したい場合に効果的です。</p>
</body>
</html>

演習3：タイトルに文字間隔を追加

文字間隔を調整して、タイトルの印象を変えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字間隔の調整</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h1 {
      letter-spacing: 3px;  /* 文字間を広く */
      text-align: center;   /* 中央寄せ */
    }

    h2 {
      letter-spacing: 1px;  /* 少し広く */
    }
    
    .normal-spacing {
      letter-spacing: normal;  /* 標準の文字間隔 */
    }
    
    .tight-spacing {
      letter-spacing: -1px;    /* 文字間を狭く */
    }
    
    .wide-spacing {
      letter-spacing: 5px;     /* 文字間をさらに広く */
    }
  </style>
</head>
<body>
  <h1>Webデザインの基礎知識</h1>
  
  <h2>文字間隔で印象が変わります</h2>
  
  <p class="normal-spacing">これは標準の文字間隔です。</p>
  
  <p class="tight-spacing">これは狭い文字間隔です。詰まった感じに見えます。</p>
  
  <p class="wide-spacing">これは広い文字間隔です。強調されたように見えます。</p>
</body>
</html>

演習4：完成形を作ってみよう

以下の完成形を参考に、右側のエディタで実際に作ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>読みやすいページ</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 2em;
    }
    
    h1 {
      color: #2c3e50;
      letter-spacing: 3px;
      text-align: center;
    }
    
    h2 {
      color: #e74c3c;
      letter-spacing: 1px;
    }
    
    p {
      color: #333;
      line-height: 1.6;
    }
    
    .highlight {
      color: #3498db;  /* 青色で強調 */
    }
  </style>
</head>
<body>
  <h1>Webデザインの基礎</h1>
  <h2>読みやすさの重要性</h2>
  <p>Webページでは、<span class="highlight">読みやすさ</span>が最も重要です。</p>
  <p>適切な色と行間を設定することで、ユーザーにとって快適な読書体験を提供できます。</p>
</body>
</html>

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. 文字の色を青色にするCSSはどれですか？

2. 読みやすい行間として一般的に推奨される値はどれですか？

3. テキストを中央寄せにするCSSはどれですか？

📘 次回予告

次回（レッスン5）は背景・ボーダーについて学びます。
背景色・画像、ボーダーなどのスタイルを学び、Webページを魅力的に彩るスキルを習得しましょう。

« 前のレッスンへ戻る レッスン5へ進む »

インラインエディタ