3.CSS

学習目標

CSS の役割を理解し、HTML に見た目を加えられる
セレクターとプロパティの仕組みを理解し、狙った要素にスタイルを指定できる
ボックスモデル（ブラウザーが要素を配置する仕組み）を理解している
クラスを使って、特定の要素だけにスタイルを指定できる

自己紹介ページは白い背景に黒い文字だけのシンプルな見た目で、普段目にするウェブサイトとはかなり違います。

この差を埋めるのが CSS（Cascading Style Sheets）です。HTML が「何が書いてあるか」を、CSS が「どう見せるか」を担当します。

1. CSS の適用方法

1-1. `<style>` タグ

自己紹介ページ（または以下のコード）を index.html として用意してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
</head>
<body>
  <main>
    <h1>田中太郎</h1>
    <p>エンジニア / 東京都在住</p>

    <h2>自己紹介</h2>
    <p>Web 開発に興味があります。最近は JavaScript を勉強中です。</p>

    <h2>趣味</h2>
    <ul>
      <li>読書</li>
      <li>映画鑑賞</li>
      <li>ランニング</li>
    </ul>

    <h2>リンク</h2>
    <ul>
      <li><a href="https://github.com">GitHub</a></li>
    </ul>
  </main>

  <footer>
    <p>&copy; 2025 田中太郎</p>
  </footer>
</body>
</html>

ブラウザーで開くと、装飾のない白黒のページが表示されます。ここに CSS を加えます。

まず <head> の中に <style> タグを追加してください。

<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>

ブラウザーで再読み込みすると、ページの背景色が水色に変わります。

<h1>田中太郎</h1>
<p>エンジニア / 東京都在住</p>

body {
background-color: lightblue;
}

1-2. 外部ファイル `style.css`

<style> タグに書く方法は手軽ですが、HTML ファイルが長くなると CSS と HTML が混ざって読みにくくなります。実際の開発では、CSS を別のファイルに書いて HTML から読み込むのが一般的です。

style.css という新しいファイルを作成し、先ほどの CSS を移動してください。

body {
  background-color: lightblue;
}

index.html の <style> タグを削除し、代わりに <link> タグで CSS ファイルを読み込みます。

<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
  <link rel="stylesheet" href="style.css">
</head>

ブラウザーで再読み込みして、先ほどと同じ表示になることを確認してください。

<link> タグの href には CSS ファイルのパスを指定します。index.html と style.css が同じフォルダーにあれば、ファイル名だけで指定できます。詳しくはパスとフォルダー構成で扱います。

1-3. コメント

/* ... */ で囲んだ部分は コメント として扱われ、ブラウザーには反映されません。

/* ページ全体の背景色 */
body {
  background-color: #f5f5f5;
}

メモを残したり、一時的にスタイルを無効化したりするために使います。

2. セレクターとプロパティ

CSS は「何を」「どうする」の組み合わせで書きます。

2-1. CSS の書き方

h1 {
  color: blue;
}

この CSS は「<h1> タグの文字色を青にする」という意味です。それぞれの部分には名前があります。

h1: セレクター。どの要素にスタイルを適用するかを指定する部分です。タグ名をそのままセレクターとして使う書き方を 要素セレクター と呼びます。
color: プロパティ。何を変えるかを指定します（ここでは文字色）。
blue: 値。どう変えるかを指定します（ここでは青色）。

{ } の中に プロパティ: 値; のペアを書きます。1つのセレクターに対して、プロパティはいくつでも指定できます。

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

p { ... } と書けばページ内のすべての <p> タグに適用されます。

2-2. 色の指定

文字色 は color、背景色 は background-color で指定します。style.css を以下の内容に書き換えてください。

body {
  color: #333;
  background-color: #f5f5f5;
}

ブラウザーで再読み込みすると、ページ全体の背景が薄いグレーに、文字色が濃いグレーになります。

<main>
<h1>田中太郎</h1>
<p>エンジニア / 東京都在住</p>

<h2>自己紹介</h2>
<p>Web 開発に興味があります。</p>
</main>

body {
color: #333;
background-color: #f5f5f5;
}

色の指定方法はいくつかありますが、よく使うのは以下の2つです。

色名: red、blue、white など、英語の色名をそのまま書く方法です。
16進数カラーコード: #333、#f5f5f5、#2c3e50 のように # に続けて色を数値で指定する方法です。

カラーコードを覚える必要はありません。「CSS color picker」で検索すると、色を選んでコードをコピーできるツールが見つかります。

2-3. フォントと文字

文字サイズ は font-size、太さは font-weight、行間は line-height で指定します。2-2 で書いた body に font-family と line-height を追加し、h1・h2・p のセレクターも新しく追加して、style.css を以下の状態にしてください。

body {
  color: #333;
  background-color: #f5f5f5;
  font-family: sans-serif;
  line-height: 1.8;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 22px;
}

p {
  font-size: 16px;
}

px はピクセルという単位で、画面上のサイズを表します。数値が大きいほど文字が大きくなります。

line-height: 1.8 は文字サイズの 1.8 倍の行間という意味です。body に指定すると、ページ全体の行間がゆったりして読みやすくなります。

font-family: sans-serif はフォントの種類を指定するプロパティです。sans-serif はゴシック体系のフォントを意味します。

ブラウザーで再読み込みすると、行間が広がってフォントが変わり、読みやすくなっているのが分かります。

<main>
<h1>田中太郎</h1>
<p>エンジニア / 東京都在住</p>

<h2>自己紹介</h2>
<p>Web 開発に興味があります。最近は JavaScript を勉強中です。</p>
</main>

body {
color: #333;
background-color: #f5f5f5;
font-family: sans-serif;
line-height: 1.8;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
p { font-size: 16px; }

2-4. フッター

フッターは著作権表示や連絡先など、主役ではない情報を置く場所です。本文より目立たないように見せてみます。

style.css に以下を追加してください。

footer {
  color: #999;
  font-size: 14px;
  text-align: center;
}

ブラウザーで再読み込みすると、フッターの文字が薄いグレーになり、サイズが小さくなり、中央寄せになります。本文との差がつき、「ここはメインの情報ではない」という印象になります。

<main>
<h2>リンク</h2>
<p>GitHub のリンクなどがここに入ります。</p>
</main>
<footer>
<p>&copy; 2025 田中太郎</p>
</footer>

footer {
color: #999;
font-size: 14px;
text-align: center;
}

text-align: center はテキストの配置を中央にするプロパティです。left（左寄せ、初期値）や right（右寄せ）も指定できます。

3. ボックスモデル

セクション2で色やフォントを変えましたが、テキストがページの端にぴったり寄っていたり、要素同士の間隔が詰まっていたりと、まだ窮屈な見た目です。これを調整するには、ブラウザーが要素をどう配置しているかを知る必要があります。

3-1. 要素はすべてボックス

ブラウザーは HTML の各要素を 四角い領域（ボックス） として扱います。<h1> も <p> も <ul> も、画面上ではすべて見えない四角い枠を持っています。

これを実際に確認してみます。ブラウザーで自己紹介ページを開き、開発者ツール を使って <h1> の要素を選択します（ブラウザーの開発者ツール）。要素のボックスが色つきで表示され、見出しや段落が四角い領域を持っていることが分かるはずです。

3-2. ボックスの構造

各ボックスは4つの層で構成されています。

ボックスモデル

content: テキストや画像など、要素の内容そのものです。
padding: コンテンツの周りにつく内側の余白です。背景色は padding の範囲まで広がります。
border: padding の外側を囲む枠線です。太さ・スタイル・色を指定できます。
margin: ボックスの最も外側にある余白で、隣のボックスとの間隔になります。背景色は border より外には広がりません。

開発者ツールで要素を選択すると、この4層が色分けされて表示されます。content は青、padding は緑、border は黄、margin はオレンジです。

3-3. padding と margin

padding はコンテンツの周りに余白をつけます。本文の領域である <main> に背景色と padding を追加してみます。

main {
  background-color: white;
  padding: 32px 24px;
}

background-color: white で main の領域が白い箱として見えるようになり、padding: 32px 24px で内側に余白が入ります。値を2つ書くと、1つ目が上下、2つ目が左右になります。ブラウザーで再読み込みすると、白い領域の端とテキストの間にゆとりができます。

<main>
<h1>田中太郎</h1>
<p>エンジニア / 東京都在住</p>
</main>

body {
background-color: #f5f5f5;
}

main {
background-color: white;
padding: 32px 24px;
}

h1 {
margin: 0;
}

ただし、<h1> にはブラウザーが初期設定で margin がついているため、main の上端に想定外の余白ができることがあります。style.css に h1 { margin: 0; } を追加して取り除くと、padding だけで余白をコントロールできるようになります。

margin はボックスの外側に余白をつけます。本文とフッターの間隔をあけてみます。

footer {
  margin-top: 40px;
  padding: 16px 24px;
}

margin-top: 40px で main の下に 40px の間隔ができます。padding: 16px 24px でフッター内部にも余白が入ります。

方向を個別に指定するには、-top、-right、-bottom、-left をつけます。全方向にまとめて指定する場合は padding: 16px のように1つの値を書きます。

3-4. border

border は要素の周りに枠線を引きます。太さスタイル色 の3つを指定します。

h2 {
  font-size: 22px;
  padding-bottom: 8px;
  border-bottom: 3px solid #2c3e50;
}

border-bottom: 3px solid #2c3e50 は「下辺に太さ 3px の実線を濃紺で引く」という意味です。見出しの下に線が入り、セクションの区切りが明確になります。

<h2>自己紹介</h2>
<p>Web 開発に興味があります。</p>

h2 {
font-size: 22px;
padding-bottom: 8px;
border-bottom: 3px solid #2c3e50;
}

border は padding や margin と同じく、-top、-right、-bottom、-left で方向を個別に指定できます。全方向にまとめて指定する場合は border: 1px solid #ccc のように書きます。

線のスタイルは solid（実線）以外に dashed（破線）や dotted（点線）もあります。

/* 実線 */
border: 2px solid #333;

/* 破線 */
border: 2px dashed #333;

/* 点線 */
border: 2px dotted #333;

4. クラス

ここまでは要素セレクター（タグ名）を使ってきました。しかし、同じタグでも場所によって見た目を変えたい場面が出てきます。

4-1. 要素セレクターの限界

自己紹介ページには <p> が複数あります。<h1> の下にある「エンジニア / 東京都在住」も <p> ですし、本文の「Web 開発に興味があります。」も <p> です。

p {
  font-size: 16px;
}

この CSS は すべての <p> に適用されます。「<h1> の下の肩書きは小さめに、本文の <p> は通常サイズに」と分けたくても、要素セレクターだけでは対応できません。

4-2. クラスセレクター

HTML の要素に class 属性をつけると、CSS からその名前で指定できるようになります。

index.html の <h1> の下にある <p> に class を追加してください。

<h1>田中太郎</h1>
<p class="subtitle">エンジニア / 東京都在住</p>