LESSON 30分

ストーリー

先
先輩
セレクタが使えるようになったら、次はデザインの要、色とフォントだ

色って red とか blue って書けばいいんですか？

先
先輩
それも使えるけど、プロはもっと細かい色指定を使うんだ。16進数カラーコードっていうのを覚えよう

文字色（color）

p {
  color: red;              /* 色名 */
  color: #ff0000;          /* 16進数（同じ赤） */
  color: rgb(255, 0, 0);   /* RGB（同じ赤） */
}

色の指定方法

方法1: 色名

color: red;
color: blue;
color: green;
color: navy;
color: gray;

よく使う色名:

色名色
black黒
white白
red赤
blue青
green緑
gray灰色
navy紺
orangeオレンジ

方法2: 16進数カラーコード（推奨）

# + 6桁の16進数で色を指定します。

color: #333333;  /* 濃い灰色 */
color: #3498db;  /* 明るい青 */
color: #e74c3c;  /* 赤 */
color: #2ecc71;  /* 緑 */
形式説明
#RRGGBBR=赤、G=緑、B=青（00〜FF）
#333#333333 の省略形
#000黒（#000000）
#fff白（#ffffff）

方法3: RGB

color: rgb(52, 152, 219);    /* 明るい青 */
color: rgba(0, 0, 0, 0.5);   /* 50%透明の黒 */

rgba の a はアルファ値（透明度）です。0が完全透明、1が不透明です。

背景色（background-color）

body {
  background-color: #f5f5f5;  /* 薄い灰色 */
}

header {
  background-color: #2c3e50;  /* 濃い紺色 */
  color: white;               /* 文字は白 */
}

.highlight {
  background-color: #fff3cd;  /* 薄い黄色 */
}

おすすめの配色

読みやすい配色の基本

ルール説明
コントラスト背景と文字の色差を十分に取る
使う色は3色までメインカラー + サブカラー + アクセントカラー
白い背景に濃い文字最も読みやすい組み合わせ

よく使われる配色例

/* パターン1: クリーンな青系 */
body { background-color: #f8f9fa; color: #333; }
h1 { color: #2c3e50; }
a { color: #3498db; }

/* パターン2: 温かいオレンジ系 */
body { background-color: #fff8f0; color: #333; }
h1 { color: #d35400; }
a { color: #e67e22; }

フォント（font-family）

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

フォントの指定ルール

  1. 複数のフォントをカンマ区切りで指定（フォールバック）
  2. 最後に 総称ファミリー を指定
font-family: "第1候補", "第2候補", 総称ファミリー;

総称ファミリー

総称特徴例
sans-serifゴシック体（角ばった文字）Arial, メイリオ
serif明朝体（はね・はらいがある）Times, 游明朝
monospace等幅フォント（コード用）Courier, Consolas

先輩「日本語サイトなら sans-serif が一般的。読みやすいからね」

フォントサイズ（font-size）

h1 { font-size: 32px; }
h2 { font-size: 24px; }
p  { font-size: 16px; }
small { font-size: 14px; }
単位説明
pxピクセル（固定サイズ）
em親要素のフォントサイズに対する倍率
remルート要素のフォントサイズに対する倍率

初心者は px を使えばOKです。

フォントの太さ（font-weight）

p { font-weight: normal; }      /* 通常 (400) */
strong { font-weight: bold; }   /* 太字 (700) */
h1 { font-weight: 300; }        /* 細い */
値意味
normal / 400通常の太さ
bold / 700太字
100 〜 900数値で細かく指定

行間（line-height）

p {
  line-height: 1.8;  /* フォントサイズの1.8倍 */
}

行間を広くすると 読みやすく なります。日本語では 1.6 〜 1.8 が推奨です。

Google Fontsの使い方

Google Fonts を使うと、おしゃれなフォントを無料で使えます。

手順1: HTMLに読み込み用タグを追加

<head>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>

手順2: CSSで指定

body {
  font-family: "Noto Sans JP", sans-serif;
}

おすすめの日本語フォント:

  • Noto Sans JP: すっきりしたゴシック体
  • Noto Serif JP: 美しい明朝体

まとめ

ポイント内容
color文字色の指定
background-color背景色の指定
色の指定方法色名、16進数（#333）、rgb()
font-familyフォントの指定
font-size文字サイズ（px が基本）
font-weight太さ（normal / bold）
line-height行間（1.6〜1.8推奨）

チェックリスト

  • 16進数カラーコードの書き方を理解した
  • color と background-color を使い分けられる
  • font-family で複数のフォントを指定できる
  • font-size, font-weight, line-height を設定できる
  • Google Fontsの使い方を知った

次のステップへ

色とフォントが設定できるようになりました。次は、CSSの最も重要な概念の一つ「ボックスモデル」を学びましょう。

推定読了時間: 30分