CSSの色とフォントの基本

色の指定方法やフォントの設定を学んで、読みやすく美しいWebページを作りましょう。カラーコード、フォントサイズ、行間の調整方法をマスターします。

CSSって何？

CSS（Cascading Style Sheets）は、HTMLで作った文書に色や装飾を付けるための言語です[^css-basics]。

HTMLが「骨組み」なら、CSSは「服や化粧」のようなものです。

上のページは「素のHTML」です。見た目は地味ですが、これに CSS を適用すると…

CSSを使うと、文字の色や大きさを変えたり、レイアウトを整えたりできるよ！まずは基本から学んでいこう。

色とフォントでページを美しく！

HTMLとCSSの基本が分かったところで、今度は色とフォントを使ってページをもっと美しく、読みやすくしてみましょう。

色やフォントの選び方一つで、ページの印象がガラッと変わります！

色とフォントを工夫するだけで、同じ内容でもこんなに印象が変わるんだね！読みやすさも全然違うよ。

色の指定方法

CSSで色を指定する方法はいくつかあります。主な方法を覚えましょう。

1. カラーコード（16進数）

カラーコードは # で始まる6桁の文字と数字の組み合わせです。

2. 色名による指定

よく使われる色は色名で指定することもできます。

3. RGB値による指定

RGBは光の三原色（赤・緑・青）の組み合わせで色を表現します。

実践: 色指定を使ってみよう

以下のコメントを参考に、様々な色指定方法を使ってスタイルを適用してみてください：

解答例を見る

/* 基本のスタイル */
h1 {
  color: #2c3e50;
}

.sakura {
  background-color: #fdf2f8;
  border-left: 4px solid #ec4899;
  padding: 15px;
  margin-bottom: 20px;
}

.sakura h2 {
  color: hotpink;
}

.dandelion {
  background-color: rgb(255, 252, 240);
  border-left: 4px solid #f59e0b;
  padding: 15px;
  margin-bottom: 20px;
}

.dandelion h2 {
  color: gold;
}

.grass {
  background-color: rgb(240, 253, 244);
  border-left: 4px solid #10b981;
  padding: 15px;
}

.grass h2 {
  color: #059669;
}

色指定のポイント:

カラーコード（#ffffff）：正確な色が指定できる
色名（red, blue, green）：覚えやすく使いやすい
RGB（rgb(255, 0, 0)）：数値で色を理解しやすい
背景色との組み合わせを考えて読みやすさを重視

色の指定方法はたくさんあるけど、最初はカラーコードと色名を覚えておけば十分だよ！慣れてきたらRGBも使ってみてね。

フォントの設定

フォントを変更することで、ページの印象や読みやすさが大きく変わります。

font-family（フォントの種類）

font-family プロパティでフォントの種類を指定します。

font-size（文字サイズ）

font-size プロパティで文字の大きさを指定します。

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

font-weight プロパティで文字の太さを指定します。

実践: フォント設定を使ってみよう

以下のコメントを参考に、フォントの設定を練習してみてください：

解答例を見る

h1 {
  font-family: 'Hiragino Sans', sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #2c3e50;
}

.morning {
  background-color: #fff7ed;
  padding: 20px;
  margin-bottom: 20px;
}

.morning h2 {
  font-size: 22px;
  font-weight: 600;
  color: #ea580c;
}

.morning p {
  font-size: 16px;
  font-weight: normal;
}

.afternoon {
  background-color: #f0f9ff;
  padding: 20px;
  margin-bottom: 20px;
}

.afternoon h2 {
  font-size: 22px;
  font-weight: 600;
  color: #0369a1;
}

.evening {
  background-color: #f3e8ff;
  padding: 20px;
}

.evening h2 {
  font-size: 22px;
  font-weight: 600;
  color: #7c3aed;
}

フォント設定のポイント:

font-family: 読みやすいフォントを選ぶ
font-size: 内容の重要度に応じてサイズを変える
font-weight: 強調したい部分は太くする
色との組み合わせで視覚的な階層を作る

行間の調整（line-height）

line-height プロパティで行と行の間隔を調整することで、文章の読みやすさが大きく改善されます。

行間はとても大切だよ！狭すぎると読みにくくて、広すぎても読みにくくなっちゃう。1.5〜1.6くらいが読みやすいとされているんだ。

色選びのコツ

読みやすく美しいページを作るための色選びのポイントを学びましょう。

コントラストを意識する

文字色と背景色のコントラスト（明暗の差）が適切でないと、文字が読みにくくなります。

色の組み合わせを考える

同系色や補色を使った色の組み合わせで、統一感のあるデザインを作りましょう。

総合練習: 美しいページを作ろう

これまで学んだ色とフォントの知識を使って、統一感のある美しいページを作ってみましょう：

解答例を見る

/* 1. body要素に基本設定を適用 */
body {
  font-family: 'Hiragino Sans', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* 2. main-headerのスタイルを作成 */
#main-header {
  background-color: #6c5ce7;
  color: white;
  padding: 30px 20px;
  text-align: center;
}

/* 3. main-header h1のスタイルを作成 */
#main-header h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 4. main-header pのスタイルを作成 */
#main-header p {
  font-size: 16px;
  font-weight: 300;
}

/* 5. mainのスタイルを作成 */
main {
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 6. sectionの共通スタイルを作成 */
section {
  margin-bottom: 30px;
  padding: 25px;
  border-radius: 8px;
}

/* 7. diary-entryのスタイルを作成 */
.diary-entry {
  background-color: #fff7f0;
  border-left: 5px solid #ff7675;
}

/* 8. special-momentのスタイルを作成 */
.special-moment {
  background-color: #f0f8ff;
  border-left: 5px solid #74b9ff;
}

/* 9. tomorrow-planのスタイルを作成 */
.tomorrow-plan {
  background-color: #f0fff0;
  border-left: 5px solid #00b894;
}

/* 10. section h2の共通スタイルを作成 */
section h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* 11. diary-entry h2のスタイルを作成 */
.diary-entry h2 {
  color: #e17055;
}

/* 12. special-moment h2のスタイルを作成 */
.special-moment h2 {
  color: #0984e3;
}

/* 13. tomorrow-plan h2のスタイルを作成 */
.tomorrow-plan h2 {
  color: #00a085;
}

/* 14. main-footerのスタイルを作成 */
#main-footer {
  background-color: #2d3436;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

完成したページの特徴:

統一感のある色の組み合わせ
読みやすいフォントサイズと行間
適切なコントラストで視認性が良い
セクションごとに色分けされて見やすい

まとめ

色とフォントは、Webページの第一印象を決める重要な要素です。

今回学んだポイント

カラーコード、色名、RGB値による色指定

font-family、font-size、font-weightによるフォント設定

line-heightによる行間調整で読みやすさを向上

コントラストを意識した色選び

統一感のある色の組み合わせ

CSS color プロパティ - MDN MDNで詳しく学ぶ

チェックポイント！

カラーコード、色名、RGB値での色指定方法を理解した
`color`プロパティで文字色を変更できるようになった
`background-color`プロパティで背景色を設定できるようになった
`font-family`でフォントの種類を指定できるようになった
`font-size`で文字サイズを調整できるようになった
`font-weight`で文字の太さを変更できるようになった
`line-height`で行間を調整して読みやすさを向上させられるようになった
適切なコントラストを意識した色選びができるようになった
統一感のある配色でページをデザインできるようになった

最後まで読み終えました！えらい！