Web のきほん

CSS のきほん：色・余白・レイアウトを整える

CSS の書き方、セレクタ、色と文字、余白のしくみ（ボックスモデル）、Flexbox での横並び、スマホ対応まで。HTML で作ったページを「ちゃんとしたサイト」に仕上げます。

更新日：2026-09-25

この記事で分かること

CSS を HTML に「つなぐ」方法
セレクタ（どの要素に適用するか）の考え方
色・文字・余白の指定と、余白のしくみ（ボックスモデル）
Flexbox で要素を横に並べる方法
スマホでも崩れないようにする方法（レスポンシブ）

前の記事で作った自己紹介ページを、この記事で「見られるサイト」に仕上げます。所要時間の目安は 90 分です。

CSS とは

CSS（Cascading Style Sheets）は、HTML の 見た目 を決める言語です。「見出しは青くて大きく」「段落の間は少し空ける」「写真は丸く」といった指定を書きます。

HTML が骨組み、CSS が服、と考えるとわかりやすいです。同じ HTML でも、CSS を変えるだけでまったく違う見た目になります。

CSS を HTML につなぐ

CSS は別のファイルに書いて、HTML から読み込むのが基本です。index.html と同じフォルダに style.css を作り、HTML の head の中に次の1行を足します。

<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <link rel="stylesheet" href="style.css">
</head>

style.css に最初の指定を書いてみましょう。

h1 {
  color: #2f5bea;
}

保存してブラウザを更新すると、見出しが青くなります。これが CSS の基本形です。

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

セレクタ：どの要素に適用するか（h1 なら、すべての h1）
プロパティ：何を変えるか（color なら文字の色）
値：どう変えるか（#2f5bea は青系の色）

行の終わりの ; を忘れないでください。忘れると、その次の指定が効かなくなります。

セレクタ：どこに効かせるか

書き方	意味	例
`p`	すべての p 要素	`p { line-height: 1.8; }`
`.profile`	class="profile" がついた要素	`.profile { padding: 20px; }`
`#header`	id="header" がついた要素（ページに1つだけ）	`#header { background: #fff; }`
`.profile p`	.profile の中にある p	`.profile p { color: #555; }`
`a:hover`	マウスを乗せたときの a	`a:hover { text-decoration: underline; }`

実際の制作では class を使うのが基本 です。HTML 側に class="○○" と目印をつけて、CSS 側で .○○ として指定します。

<p class="note">これは補足です。</p>

.note {
  color: #777;
  font-size: 14px;
}

色と文字

body {
  color: #333;                 /* 文字の色 */
  background-color: #fffdf8;   /* 背景の色 */
  font-family: sans-serif;     /* ゴシック系のフォント */
  font-size: 16px;             /* 文字の大きさ */
  line-height: 1.8;            /* 行の高さ（読みやすさに効きます） */
}

色の指定は、#333 のような 16 進数、rgb(51, 51, 51)、red のような名前のどれでも書けます。#2f5bea のように6桁で書くのが一般的です。色を選ぶときは、ブラウザで「color picker」と検索すると便利なツールが出てきます。

文字の大きさは px（ピクセル）で始めて構いません。慣れてきたら rem（基準の何倍か）という単位も覚えると、スマホ対応が楽になります。

余白のしくみ：ボックスモデル

CSS でいちばんつまずきやすいのが余白です。すべての要素は「箱」でできていて、内側から順に次の4層があります。

┌─ margin（外側の余白）─────────────┐
│ ┌─ border（枠線）───────────────┐ │
│ │ ┌─ padding（内側の余白）─────┐ │ │
│ │ │        中身（content）      │ │ │
│ │ └─────────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘

.card {
  padding: 20px;              /* 中身と枠線の間 */
  border: 2px solid #ddd;     /* 枠線：太さ 種類 色 */
  margin: 16px 0;             /* 上下 16px、左右 0 の外側余白 */
  border-radius: 12px;        /* 角を丸くする */
}

覚え方：padding は内側、margin は外側。「箱と文字の間を空けたい」なら padding、「箱と箱の間を空けたい」なら margin です。

margin: 16px 0; のように2つ書くと「上下左右」、4つ書くと「上右下左」（時計回り）の順です。

Flexbox：横に並べる

要素を横に並べたいとき、今は Flexbox を使うのが標準です。親要素に display: flex; をつけるだけで、中の要素が横に並びます。

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.row {
  display: flex;
  gap: 12px;                  /* 箱と箱の間隔 */
  justify-content: center;    /* 横方向の配置：center / space-between など */
  align-items: center;        /* 縦方向の配置 */
}
.box {
  flex: 1;                    /* 余った幅を均等に分ける */
  padding: 20px;
  background: #e3f1fa;
  text-align: center;
}

justify-content と align-items の2つで、ほとんどの配置ができます。「中央に置きたい」ときは、この2つを両方 center にします。

スマホ対応：レスポンシブ

スマホの画面は幅が狭いので、横に並べたものが窮屈になります。画面幅によって指定を変えるのが「メディアクエリ」です。

/* 画面幅が 600px 以下のとき */
@media (max-width: 600px) {
  .row {
    flex-direction: column;   /* 縦に並べる */
  }
  body {
    font-size: 15px;
  }
}

また、HTML の head に次の1行が必要です。これがないとスマホで縮小表示されてしまいます。

<meta name="viewport" content="width=device-width, initial-scale=1">

確認は、Chrome で F12 を押して開発者ツールを開き、左上のスマホのアイコンを押すとできます。

やってみよう：自己紹介ページを整える

前の記事で作ったページに、次を追加してください。

style.css を作って HTML から読み込む
body に文字色・背景色・フォント・行間を指定する
自己紹介の部分を class="profile" の div で囲み、padding と border-radius でカードのようにする
趣味のリストを Flexbox で横並びにする
画像を border-radius: 50%; で丸くする
600px 以下のときは横並びを縦に戻す

完成したら、ブラウザの幅を狭くしたり広くしたりして、崩れないか確認してください。

つまずきやすいところ

CSS がまったく効かない → link タグの href のファイル名が合っているか、style.css が同じフォルダにあるか確認。
一部だけ効かない → その上の行の ; が抜けていることが多いです。
class の指定が効かない → CSS 側の . を忘れていないか（.profile であって profile ではない）。
思った余白にならない → padding と margin を逆にしていないか。開発者ツールで要素を選ぶと、余白が色分けで見えます。

まとめ

CSS は「セレクタ { プロパティ: 値; }」の形。
実際の制作では class を目印にする。
余白は padding（内側）と margin（外側）。
横並びは Flexbox、スマホ対応はメディアクエリ。

次は「JavaScript のきほん」で、ページに動きをつけます。

公開教材の一覧へ