第 5 章

CSSを書いてみよう
― 自己紹介ページをデザインする

この章では、第3章で作った profile.html に CSSを当てて見た目を仕上げます。コードを少しずつ追加しながら、ページが変化していく様子を楽しみましょう！

完成イメージ

この章が終わると、次のような見た目になります。

▼ 完成プレビュー

山田花子

はじめまして！自己紹介ページへようこそ。

基本情報

名前：山田花子
出身：東京都
趣味：読書・料理・散歩

好きなもの

私が好きなものを紹介します。

コーヒー
SF小説
猫

ひとこと

Web制作をゼロから勉強中です。
よろしくお願いします！

リンク

おすすめのWebサイトはこちら

STEP 1 ― CSSファイルを作る

まず CSS を書くための新しいファイルを作ります。

VS Code の左パネルで practice フォルダを開く。
「新しいファイル」アイコンをクリックし、ファイル名を style.css と入力してEnterを押す。
ファイルが開いたら、今はまだ何も書かなくてOKです。

フォルダの中身はこうなります。

practice/
├── index.html      ← 第1章で作ったファイル
├── profile.html    ← 自己紹介ページ
└── style.css       ← 今作ったCSSファイル ← NEW

STEP 2 ― HTMLからCSSを読み込む

profile.html を開いて、<head> の中に CSSを読み込む1行を追加します。

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

Ctrl + S で保存したら、ブラウザで確認します。まだ style.css の中身が空なので見た目は変わりませんが、これで CSS ファイルとつながりました。

ファイル名のスペルに注意
href="style.css" のファイル名は、実際に作ったファイル名と 完全に一致している必要があります。大文字・小文字も区別されるので Style.css などにしないよう注意しましょう。

STEP 3 ― 全体の基本スタイルを設定する

style.css を開いて、ページ全体に適用するスタイルを書きます。 body セレクタを使うと、ページ全体に一括で設定できます。

/* 全体の基本スタイル */
body {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

保存してブラウザを更新（F5）してみましょう。

▼ STEP 3 後の変化

背景がうっすらグレー（#f5f5f5）になる
フォントがきれいなゴシック体になる
行間がゆったりする

/* … */ で囲んだ部分はCSSのコメントです。ブラウザには影響しないメモ書きができます。どのスタイルが何のためかを書いておくと、後で見直したときに助かります。

STEP 4 ― コンテンツを中央に揃える

ページの内容が画面の端から端まで広がっているので、読みやすい幅に制限して中央に配置します。そのためにHTMLにも少し手を加えます。

① profile.html を修正する

profile.html の <body> の中身全体を <div class="container"> で囲みます。

<body>
  <div class="container">

    <h1>山田 花子</h1>
    <p>はじめまして！自己紹介ページへようこそ。</p>

    <!-- … 中略 … -->

    <p><a href="https://www.google.com" target="_blank">おすすめのWebサイトはこちら</a></p>

  </div>
</body>

class="container" は、このタグに「container（コンテナ）」という名前をつけています。CSSでこの名前を使ってスタイルを当てます。クラス名はセレクタに .（ドット）をつけて指定します。

② style.css にスタイルを追加する

/* 全体の基本スタイル */
body { … }

/* コンテンツ幅と中央揃え */
.container {
  max-width: 680px;
  margin: 40px auto;
  background-color: #fff;
  padding: 32px 40px;
  border-radius: 8px;
}

▼ STEP 4 後の変化

コンテンツが画面中央にまとまる
白い背景のカードのような見た目になる
文字と枠の間に余白ができて読みやすくなる

STEP 5 ― 見出しをデザインする

名前（h1）とセクション見出し（h2）にそれぞれスタイルを当てます。

/* 名前（ページタイトル） */
h1 {
  font-size: 28px;
  color: #1a3f60;
  border-bottom: 3px solid #2c5f8a;
  padding-bottom: 10px;
  margin-top: 0;
}

/* セクション見出し */
h2 {
  font-size: 18px;
  color: #fff;
  background-color: #2c5f8a;
  padding: 6px 14px;
  border-radius: 4px;
  margin-top: 32px;
}

▼ STEP 5 後の変化

名前に下線が引かれ、濃い青になる
「基本情報」などのh2が青地に白文字のラベル風になる

STEP 6 ― 本文とリストを整える

挨拶文（.intro）、リスト（ul/ol）、リンク（a）にスタイルを当てます。

① profile.html：挨拶文にクラスを追加する

挨拶文の <p> タグに class="intro" を追加します。

<h1>山田 花子</h1>
<p class="intro">はじめまして！自己紹介ページへようこそ。</p>

② style.css にスタイルを追加する

/* 挨拶文 */
.intro {
  color: #555;
  font-size: 15px;
  margin-bottom: 28px;
}

/* リスト */
ul, ol {
  padding-left: 24px;
}

li {
  margin-bottom: 4px;
}

/* リンク */
a {
  color: #2c5f8a;
}

a:hover {
  color: #1a3f60;
  text-decoration: underline;
}

a:hover は「リンクにマウスを乗せたとき」のスタイルです。このように :hover をつけると、マウスオーバー時の見た目を変えられます。

STEP 7 ― フッターを追加する

ページの最後にコピーライト（著作権表示）を追加してみましょう。 HTMLとCSSの両方に追記します。

① profile.html：フッターを追加する

</div>（containerの閉じタグ）の直前に追加します。

    <p><a href="…">おすすめのWebサイトはこちら</a></p>

    <footer>
      <p>&copy; 2026 山田花子</p>
    </footer>

  </div>
</body>

② style.css：フッターのスタイル

/* フッター */
footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #888;
  font-size: 13px;
}

完成したコードを確認しよう

ここまで追加した style.css の全体像を確認しましょう。

/* 全体の基本スタイル */
body {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* コンテンツ幅と中央揃え */
.container {
  max-width: 680px;
  margin: 40px auto;
  background-color: #fff;
  padding: 32px 40px;
  border-radius: 8px;
}

/* 名前（ページタイトル） */
h1 {
  font-size: 28px;
  color: #1a3f60;
  border-bottom: 3px solid #2c5f8a;
  padding-bottom: 10px;
  margin-top: 0;
}

/* セクション見出し */
h2 {
  font-size: 18px;
  color: #fff;
  background-color: #2c5f8a;
  padding: 6px 14px;
  border-radius: 4px;
  margin-top: 32px;
}

/* 挨拶文 */
.intro {
  color: #555;
  font-size: 15px;
  margin-bottom: 28px;
}

/* リスト */
ul, ol {
  padding-left: 24px;
}

li {
  margin-bottom: 4px;
}

/* リンク */
a {
  color: #2c5f8a;
}

a:hover {
  color: #1a3f60;
  text-decoration: underline;
}

/* フッター */
footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #888;
  font-size: 13px;
}

チャレンジ ― 自分好みにカスタマイズしよう

基本のデザインができたら、次のことを試してみましょう。すべてこの章で学んだプロパティだけで実現できます。

background-color を変えてカラーテーマを自分の好みにする
h1 の font-size を大きくして名前をさらに目立たせる
.container に box-shadow: 0 2px 12px rgba(0,0,0,0.1); を追加して影をつける
新しいセクションをHTMLに追加して、そのスタイルもCSSで書く

この章のまとめ

外部CSSファイルは <link rel="stylesheet" href="…"> で読み込む
class="名前" でHTMLに名前をつけ、CSS で .名前 と書いてスタイルを当てる
body にスタイルを当てるとページ全体に適用される
a:hover でマウスオーバー時の見た目を変えられる
少しずつ変えて F5で確認 を繰り返すのが上達の近道

自己紹介ページが完成しました！おめでとうございます！
最後の第6章で、ここまでの学習を振り返りましょう。

第4章：CSS入門第6章：まとめ

CSSを書いてみよう― 自己紹介ページをデザインする

完成イメージ

山田 花子

基本情報

好きなもの

ひとこと

リンク

STEP 1 ― CSSファイルを作る

STEP 2 ― HTMLからCSSを読み込む

STEP 3 ― 全体の基本スタイルを設定する

STEP 4 ― コンテンツを中央に揃える

① profile.html を修正する

② style.css にスタイルを追加する

STEP 5 ― 見出しをデザインする

STEP 6 ― 本文とリストを整える

① profile.html：挨拶文にクラスを追加する

② style.css にスタイルを追加する

STEP 7 ― フッターを追加する

① profile.html：フッターを追加する

② style.css：フッターのスタイル

完成したコードを確認しよう

チャレンジ ― 自分好みにカスタマイズしよう

この章のまとめ

CSSを書いてみよう
― 自己紹介ページをデザインする

山田花子