ポートフォリオを作ろう②
CSSで色を付ける
Lesson 7 で作った骨組みに、CSSで色や配置を付けていきます。 HTMLは一切書き換えずに（ほんの少しだけ書き足して）、見た目をがらっと変えてみましょう。
1. ビフォーアフター
今回のゴールです。左が Lesson 7（HTMLだけ）、右が今回（CSSを追加）。HTMLの中身はほぼ同じです。
2. CSSの書き方
CSS は、「どこの」「何を」「どうする」を組み合わせて書きます。
h1セレクタ（どこの）{ colorプロパティ（何を）: red値（どうする）; } h1（見出し）の、color（文字の色）を、red（赤）にする」という意味です。1つのセレクタに、複数の指定をまとめて書くこともできます。それぞれの行の最後には ;（セミコロン）を付けます。
h1 {
color: red; /* 文字の色を赤に */
font-size: 40px; /* 文字の大きさを40ピクセルに */
}/* 〜 */ はコメントといって、メモ書きです。ブラウザには無視されるので、説明を書いておくのに使います。
3. HTMLとCSSをつなぐ
-
style.css を作る
VS Code で、
index.htmlと同じportfolioフォルダの中に、新しいファイルstyle.cssを作ります。フォルダの構成portfolio/ ├── index.html ├── style.css ← 新しく作る └── images/ -
index.html から style.css を読み込む
index.htmlの<head>の中に、次の1行を追加します。「このページの見た目はstyle.cssに書いてあるよ」という案内です。index.html（head の中）<title>Mayu Takahashi Portfolio</title> <link rel="stylesheet" href="style.css"> </head> -
section に「名札（class）」を付ける
2つの
<section>に、class="card"を書き足します。index.html（2か所とも）<section class="card">class は、タグに付ける名札のようなものです。「
cardという名札が付いた箱を、カードの見た目にしてね」と CSS で指定できるようになります。 同じ名札は、いくつのタグに付けてもかまいません。
4. ページ全体の色を決める
ここからは style.css に書いていきます。まずは、ページ全体（body）の背景色・文字色・文字の種類を決めます。
/* ページ全体 */
body {
margin: 0;
background-color: #17201b;
color: #f4f1e6;
font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif;
line-height: 1.8;
}| プロパティ | 意味 |
|---|---|
margin: 0 | ページのまわりに自動で付く余白をなくす |
background-color | 背景の色 |
color | 文字の色 |
font-family | 文字の種類（フォント）。左から順に、パソコンに入っているものが使われる |
line-height | 行の高さ。1.8 は「文字の大きさの1.8倍」で、読みやすくなる |
#17201b のような書き方をカラーコードと呼びます。# の後ろの6文字が、
赤・緑・青をどれくらい混ぜるかを表しています。red や white のように英語の色名でも指定できます。
VS Code では、カラーコードの横に小さな色見本が表示され、クリックするとパレットから色を選べます。
5. タイトル部分を飾る
body の下に続けて書きます。ヘッダーの背景をグラデーションにして、文字を中央にそろえます。
/* 一番上のタイトル部分 */
header {
background: linear-gradient(135deg, #f9d84a, #4cc38a);
padding: 48px 16px;
text-align: center;
color: #17201b;
}
header h1 {
margin: 0;
font-size: 36px;
}linear-gradient(135deg, 色1, 色2)：斜め135度の方向に、色1から色2へ変わるグラデーションpadding：箱の内側の余白（上下 48px・左右 16px）text-align: center：文字を中央ぞろえにするcolor: #17201b：明るい黄色・緑の背景でも読みやすいように、ヘッダーの文字を濃い色にするheader h1：「headerの中にあるh1」だけを指定する書き方
6. 紹介コーナーをカードにする
まず、本体（main）の幅を制限して、画面の中央に寄せます。
/* 中身を中央に寄せる */
main {
max-width: 720px;
margin: 0 auto;
padding: 32px 16px;
}
max-width: 720px で「幅は最大720ピクセルまで」、margin: 0 auto で「左右の余白を自動で均等に」。
この2つの組み合わせは、中央寄せの定番テクニックです。
次に、名札 card を付けた箱をカードの見た目にします。class を指定するときは、名前の前に .（ドット）を付けます。
/* 紹介カード */
.card {
background-color: #22302a;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.card h2 {
margin-top: 0;
color: #f9d84a;
border-left: 6px solid #4cc38a;
padding-left: 12px;
}
.card img {
display: block;
max-width: 100%;
height: auto;
margin: 16px auto 0;
border-radius: 12px;
}| プロパティ | 意味 |
|---|---|
border-radius | 角を丸くする |
margin-bottom | 箱の外側・下の余白（カード同士の間隔） |
box-shadow | 影を付けて、浮いているように見せる |
border-left | 左側だけに線を引く（見出しの左の緑の線） |
max-width: 100% | 画像が、スマホなどの狭い画面からはみ出さないようにする |
padding は箱の内側の余白（額縁の中の余白）、margin は箱の外側の余白（額縁と額縁の間隔）です。
CSS で最初につまずきやすいポイントなので、迷ったらこのたとえを思い出してください。
7. 仕上げと全体のコード
最後にフッターを整えます。
/* 一番下の部分 */
footer {
text-align: center;
padding: 24px;
color: #93a399;
font-size: 14px;
}完成した2つのファイルの全体はこちらです。
/* ページ全体 */
body {
margin: 0;
background-color: #17201b;
color: #f4f1e6;
font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif;
line-height: 1.8;
}
/* 一番上のタイトル部分 */
header {
background: linear-gradient(135deg, #f9d84a, #4cc38a);
padding: 48px 16px;
text-align: center;
color: #17201b;
}
header h1 {
margin: 0;
font-size: 36px;
}
/* 中身を中央に寄せる */
main {
max-width: 720px;
margin: 0 auto;
padding: 32px 16px;
}
/* 紹介カード */
.card {
background-color: #22302a;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.card h2 {
margin-top: 0;
color: #f9d84a;
border-left: 6px solid #4cc38a;
padding-left: 12px;
}
.card img {
display: block;
max-width: 100%;
height: auto;
margin: 16px auto 0;
border-radius: 12px;
}
/* 一番下の部分 */
footer {
text-align: center;
padding: 24px;
color: #93a399;
font-size: 14px;
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mayu Takahashi Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mayu Takahashi Portfolio</h1>
<p>はじめまして！ 私の好きなものを紹介します。</p>
</header>
<main>
<section class="card">
<h2>特技：鉄棒</h2>
<p>子どものころから鉄棒が大好きです。</p>
<img src="images/tetsubo.svg" alt="鉄棒のイラスト" width="300">
</section>
<section class="card">
<h2>今いちばんハマっているもの：Valorant</h2>
<p>5人対5人で戦う、チーム対戦型のシューティングゲームです。</p>
<img src="images/game.svg" alt="ゲームのイラスト" width="300">
</section>
</main>
<footer>
<p>© 2026 Mayu Takahashi</p>
</footer>
</body>
</html>8. デベロッパーツールで試す
「この色、もう少し明るいほうがいいかな？」と思ったら、Chrome のデベロッパーツールでその場で試すことができます。
-
F12 でデベロッパーツールを開く
自分のポートフォリオを Chrome で開き、F12 を押します。
-
調べたい部分を選ぶ
デベロッパーツール左上の矢印アイコンをクリックしてから、ページ上のカードなどをクリックします。
-
値を書き換えてみる
右側（または下側）の「スタイル」欄に、その部分に効いている CSS が表示されます。色や数値をクリックして書き換えると、すぐに画面に反映されます。
ここでの変更は保存されません（再読み込みすると元に戻ります）。気に入った値が見つかったら、VS Code の style.css に書き写しましょう。
何度でも気軽に試せる「お試しスペース」です。
自分らしくアレンジしよう
好きな色に変えてみましょう。迷ったら Claude Code に相談するのもおすすめです。
style.css の配色を、もっと明るくてやわらかい雰囲気にしたいです。
どのプロパティを、どんな色に変えるとよいか、候補をいくつか教えてください。確認クイズ
選択肢をクリックしてください。
Q1. 文字の色を変えるプロパティはどれ？
Q2. class="card" を付けたタグを CSS で指定するときの書き方は？
Q3. 箱の「内側」の余白を指定するプロパティは？
Q4. HTMLから CSS ファイルを読み込むときに使うタグは？
まとめ
- CSS は
セレクタ { プロパティ: 値; }の形で、「どこの・何を・どうする」を書く。 - HTML の
<head>に<link rel="stylesheet" href="style.css">を書いて読み込む。 - class はタグに付ける名札。CSS では
.名前で指定する。 paddingは内側、marginは外側の余白。- デベロッパーツール（F12）で、その場で見た目を試せる。
見た目が整いました！ 最後の Lesson 9 では、JavaScript でボタンを押すと動く仕掛けを付けて、ポートフォリオを完成させます。