Chapter 2: CSS で見た目を整える

CSS（Cascading Style Sheets）は，HTML で作った骨組みに色や余白，フォントなどの見た目を与えるスタイル指定の仕組みです。

この章では，Chapter 1 の自己紹介ページを装飾しながら，CSS の基本を学びます。

CSS を読み込む方法

HTML の <head> にスタイルシートへのリンクを追加します。

<link rel="stylesheet" href="styles.css" />

fes-training/html-css フォルダに styles.css を作成し，HTML と同じ場所に置きましょう。

セレクタとプロパティ

CSS は「どの要素に」「どのようなスタイルを適用するか」を記述します。

h1 {
  color: #1a73e8;
  font-size: 2.5rem;
}

h1 がセレクタ（対象）
color や font-size がプロパティ
#1a73e8 や 2.5rem が値

ハンズオン：自己紹介ページにスタイルを追加

styles.css に次のコードを追加し，ブラウザで変化を確認します。

body {
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.6;
  margin: 0;
  background: #f7f8fb;
  color: #222;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

h1 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

ul,
ol {
  padding-left: 1.5rem;
}

a {
  color: #0b66c3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

HTML 側で <body> の中身を <main> で囲んでいない場合は追加しましょう。

<body>
  <main>
    <!-- 既存の内容 -->
  </main>
</body>

よく使うプロパティ

プロパティ	意味	例
`color`	文字色	`color: #333;`
`background`	背景色	`background: #fff;`
`font-size`	文字サイズ	`font-size: 1rem;`
`margin`	外側の余白	`margin: 16px;`
`padding`	内側の余白	`padding: 24px;`
`border-radius`	角丸	`border-radius: 12px;`

Tip

rem はルート（<html>）要素の文字サイズを基準とした単位です。px 固定よりもレスポンシブなデザインにしやすいので覚えておきましょう。

練習課題

見出しの下に細い線を表示してみましょう。（ヒント：border-bottom）
footer に背景色を付け，中央寄せにしてみましょう。
section 同士の余白を margin-top 以外の方法（例：gap）で調整してみましょう。

次へ進む

スタイルが整ったら，Chapter 3: レイアウトとレスポンシブ対応へ進んで，さまざまな画面サイズに対応するレイアウトを身につけましょう。