レッスン3：CSSの基本——色とフォントでページを装飾する

このレッスンで学ぶこと

CSSの役割と基本的な書き方を理解する
外部CSSファイルを作ってHTMLにリンクできる
セレクタ・プロパティ・値の関係を説明できる
色・背景色・フォント・サイズの基本プロパティを使える
クラスを使った特定箇所の装飾ができる

レッスン2では、HTMLで文章をマークアップして自己紹介ページを完成させました。ただし、このページはまだ装飾がなく、地味な見た目のままです。このレッスンでは、CSSを使ってページに色やフォントを当てていきます。同じHTMLが、CSSで一気に変わる体験をしてもらいます。

CSSとは何か

CSSは Cascading Style Sheets の略で、Webページの見た目を整えるための言語です。HTMLが「文章の構造」を担うのに対し、CSSは「装飾」を担います。

色、背景、文字の大きさ、余白、レイアウトなど、ページの見た目に関するほとんどすべてはCSSで指定します。HTMLとCSSが分業することで、構造はそのままにデザインだけを変えることが可能になります。

💡 ポイント 同じHTMLでもCSSを差し替えれば、完全に違うデザインのページに変身させられます。役割を分けておくことの大きな利点です。

CSSの3つの書き方

CSSをHTMLに適用する方法は、大きく3つあります。

1つ目はインラインスタイルです。タグの style 属性に直接書く方法です。

<p style="color: red;">赤い文字</p>

2つ目は内部スタイルです。<head> 内の <style> タグの中に書く方法です。

<head>
  <style>
    p { color: red; }
  </style>
</head>

3つ目は外部スタイルシートです。CSSだけを別のファイル（.css）に書き、HTMLからリンクする方法です。

<head>
  <link rel="stylesheet" href="style.css">
</head>

実務でも本コースでも、3つ目の「外部スタイルシート」を基本にします。HTMLとCSSをファイルで分けておくと、複数ページで同じCSSを使い回せて、保守もしやすくなるからです。

ステップ1：style.cssファイルを作る

レッスン1〜2で作った my-website フォルダをVSCodeで開いてください。index.html と画像ファイルがある状態です。

このフォルダに、新しく style.css というファイルを作ります。VSCodeのサイドバーで「新しいファイル」アイコンをクリックし、ファイル名に style.css と入力してEnterを押してください。

style.css には、まず動作確認用に次のコードを書きます。

body {
  background-color: #f5f5f5;
}

これは「body要素の背景色を、#f5f5f5（薄いグレー）にする」という意味です。#f5f5f5 の表記については、このレッスンで後ほど説明します。

ファイルを保存（Ctrl + S または Command + S）してください。

ステップ2：HTMLからCSSをリンクする

このままではHTMLとCSSはつながっていません。index.html の <head> 内に、CSSファイルを読み込むタグを追加します。

<title> タグの下に、次の1行を追加してください。

<head>
  <meta charset="UTF-8">
  <title>森田 彩花のプロフィール</title>
  <link rel="stylesheet" href="style.css">
</head>

<link> タグは、外部ファイルをHTMLに読み込むためのタグです。rel="stylesheet" は「スタイルシート（CSS）を読み込みます」という意味で、href 属性に読み込むCSSファイルの場所を指定します。<link> も <img> と同じく終了タグのない自己終結タグです。

保存してから、ブラウザで index.html を再読み込みしてください。背景がうっすらグレーに変わっていれば、CSSの読み込みは成功です。

⚠️ 注意 背景が変わらない場合、<link> タグの href 属性のファイル名に間違いがないか確認してください。style.css の名前と href="style.css" の文字列が一字一句同じである必要があります。HTMLとCSSのファイルが同じフォルダにあることも確認しましょう。

CSSの基本構文

CSSの書き方は、次の3つの要素からできています。

セレクタ {
  プロパティ: 値;
}

セレクタ：どの要素に対してスタイルを適用するか（例：body、h1、p）
プロパティ：何を変えるか（例：color、background-color、font-size）
値：どう変えるか（例：red、#f5f5f5、24px）

プロパティと値の組み合わせは「宣言」と呼ばれ、宣言の終わりには必ずセミコロン ; を付けます。波括弧 { } でセレクタごとの宣言をまとめます。

例を見てみましょう。

h1 {
  color: #2c3e50;
  font-size: 32px;
}

p {
  color: #555;
  font-size: 16px;
  line-height: 1.7;
}

このCSSは「すべてのh1要素は文字色を濃紺、サイズを32pxに」「すべてのp要素は文字色をグレー寄り、サイズを16px、行間を1.7倍に」という指定です。

色の指定方法

CSSで色を指定する方法は、いくつかあります。

色名で指定：red、blue、green、white、black など、英単語の色名が使えます。直感的ですが、細かい色味の調整は難しいです。

16進数（カラーコード）で指定：#ff0000（赤）、#0000ff（青）のように # で始まる6桁の16進数で指定します。Web制作ではこの形式が最もよく使われます。

rgbで指定：rgb(255, 0, 0) のように、赤・緑・青の明るさを0〜255の数値で指定します。

h1 {
  color: red;            /* 色名 */
}
h2 {
  color: #2c3e50;        /* 16進数 */
}
p {
  color: rgb(85, 85, 85); /* rgb */
}

📝 補足 16進数は最初は読みづらく感じますが、慣れれば直感的に色を作れるようになります。VSCodeでは色コードを書くと、コードの隣に色のプレビューが小さく表示され、クリックで色選択パレットも出せて便利です。

ステップ3：自己紹介ページに装飾を当てる

style.css を以下の内容に書き換えてみてください。レッスン2で作った自己紹介ページが、ぐっと整った見た目になるはずです。

body {
  background-color: #f5f5f5;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #333;
  line-height: 1.7;
}

h1 {
  color: #2c3e50;
  font-size: 32px;
}

h2 {
  color: #2c3e50;
  font-size: 24px;
  border-bottom: 2px solid #2c3e50;
}

p {
  font-size: 16px;
}

a {
  color: #2980b9;
}

保存して、ブラウザを再読み込みしてください。背景が薄いグレー、見出しが濃紺、h2の下に線が引かれ、リンクが青になります。一気にWebページらしくなったはずです。

ここで使ったプロパティを確認しましょう。

background-color：背景色
font-family：フォント（書体）。複数指定すると、最初のものが使えなければ次、と順に試される
color：文字色
font-size：文字の大きさ
line-height：行間（数値だけだとフォントサイズの倍数）
border-bottom：下側の罫線（線の太さ・種類・色をまとめて指定）

💡 ポイント font-family で「Hiragino Sans」「Yu Gothic」「sans-serif」と並べて指定するのは、左から順に「使える環境ならこのフォント、使えなければ次のフォント」という意味です。sans-serif のような総称名を最後に書いておくと、どのパソコンでも何かしら適切なフォントが選ばれます。

クラスを使って特定の場所だけ装飾する

「すべてのp要素」ではなく「特定のp要素だけ」装飾したい場合は、クラスを使います。

HTML側でタグに class 属性を付けます。

<p class="lead">このページでは、わたしの自己紹介と趣味を書いています。</p>
<p>はじめまして。森田 彩花と申します。</p>

CSS側では、クラス名の前にドット . を付けてセレクタにします。

.lead {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

これで、class="lead" が付いたp要素だけが、特別な装飾を受けます。クラスは1つの要素に複数指定することもでき、また同じクラス名を複数の要素に付けることもできます。

📝 補足 似たものに id 属性を使ったID指定（#myid）もありますが、IDはページ内に1回だけしか使えない決まりがあります。基本はクラスを使う、と覚えておけば十分です。

実習：自己紹介ページにクラスを使った装飾を追加する

index.html の冒頭の段落を以下のように書き換えてください。

<h1>森田 彩花のページ</h1>

<img src="profile.jpg" alt="森田 彩花のプロフィール写真">

<p class="lead">このページでは、わたしの自己紹介と趣味、よく見ているWebサイトを紹介しています。</p>

そして style.css の最後に、次のCSSを追加してください。

.lead {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

保存して再読み込みすると、紹介文の段落だけが太字で大きめに、濃紺色で表示されます。同じp要素でも、クラスを付けることで個別にスタイルを変えられることが体験できます。

CSSのコメント

CSSにメモを残したいときは、/* */ で囲んでコメントとして書けます。コメントはブラウザに無視されるので、自分や別の作業者へのメモとして自由に使えます。

/* 全体の見た目 */
body {
  background-color: #f5f5f5;
}

/* 紹介文を強調 */
.lead {
  font-size: 18px;
  font-weight: bold;
}

長いCSSになるとどこに何を書いたかわかりにくくなるので、セクションごとにコメントを入れる習慣をつけましょう。

まとめ

このレッスンでは、以下のことを学びました。

CSSはWebページの装飾を担当する言語である
CSSは外部ファイル（.css）に書き、HTMLから <link> でリンクするのが基本である
セレクタ・プロパティ・値の3要素でCSSを書く
色・背景色・フォント・サイズなど、基本プロパティで装飾の大部分が作れる
クラスを使えば、特定の要素だけにスタイルを当てられる

次のレッスンでは、要素の余白や枠線、サイズなどを扱う「ボックスモデル」を学びます。Webページのレイアウトを組むうえでの最重要概念です。

確認クイズ

このレッスンの理解度をチェックしましょう。