はじめてのWeb開発 HTMLとCSSで自分のページを作ろう
第 4 章

CSS入門
― 色・フォント・余白でデザインしよう

HTMLで骨格ができたら、次はCSSでデザインを加えます。 CSSを使うと文字の色・大きさ・余白・背景色などを自由に変えられます。 この章ではCSSの基本ルールとよく使うプロパティを学びましょう。

1. CSSの基本的な書き方

CSSは次の形で書きます。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}
用語 意味 例
セレクタ 「どのタグに適用するか」を指定する h1　p　body
プロパティ 「何を変えるか」を指定する color　font-size
値 「どんな値にするか」を指定する red　16px

実際の例を見てみましょう。

h1 {
  color: navy;
  font-size: 32px;
}

これは「h1 タグの文字色を紺色にして、文字サイズを32pxにする」という意味です。 複数のプロパティを書くときは改行して並べ、それぞれ末尾に セミコロン（;） をつけます。

セミコロンを忘れずに
各行の末尾の ;（セミコロン）を忘れると、そのプロパティが効かなくなります。 「効いてないな」と思ったらセミコロン忘れを疑ってみてください。

2. CSSを書く場所

CSSをHTMLに適用する方法は主に2つあります。

方法① 外部ファイルとして読み込む（推奨）

別のファイル（例：style.css）にCSSを書き、HTMLから読み込みます。 HTMLとCSSを分けて管理でき、複数のページに同じデザインを適用できるため、 この方法が基本です。 

<!-- HTML の <head> 内に書く -->
<link rel="stylesheet" href="style.css">

方法② HTMLの中に直接書く

<head> の中に <style> タグを使って書く方法もあります。 小さなテストや1ページだけのデザインに向いています。 

<head>
  <style>
    h1 {
      color: navy;
    }
  </style>
</head>
次の第5章では外部ファイル方式を使います。 style.css というファイルを新しく作り、 profile.html から読み込みます。

3. 色の指定方法

CSSで色を指定する方法はいくつかあります。

色の名前で指定する

英語の色名をそのまま書けます。代表的なものを覚えておきましょう。

red
blue
green
navy
orange
purple
gray
white
black

16進数カラーコードで指定する（よく使う）

# に続けて6桁の英数字で色を指定します。 デザインツールやWebで「カラーコード」を調べると出てくる形式で、 現場でも最もよく使われます。 

color: #333333;        /* 濃いグレー（本文テキストによく使う） */
color: #2c5f8a;        /* 落ち着いた青 */
background-color: #f5f5f5;  /* 薄いグレーの背景 */
16進数カラーコードは「Google カラーピッカー」で検索すると、 好きな色のコードをかんたんに調べられます。

文字色と背景色のプロパティ

p {
  color: #333;              /* 文字の色 */
  background-color: #fffbe6; /* 背景の色 */
}
▼ 表示例

文字色が #333（濃いグレー）、背景色が #fffbe6（薄い黄色）の段落です。

4. フォントの設定

文字サイズ ― font-size

文字の大きさは font-size で指定します。 単位は px（ピクセル） が基本です。 一般的な本文サイズは 16px〜18px くらいです。 

h1 { font-size: 32px; }
h2 { font-size: 24px; }
p  { font-size: 16px; }
▼ 表示例

32px（h1のサイズ）

24px（h2のサイズ）

16px（本文のサイズ）

太さ ― font-weight

p {
  font-weight: bold;    /* 太字 */
  font-weight: normal;  /* 標準（太字を解除したいとき） */
}

行間 ― line-height

行と行の間隔を line-height で調整できます。 単位なしの数値（例：1.8）は「文字サイズの1.8倍」の意味です。 日本語は 1.7〜1.9 くらいが読みやすいとされています。 

p {
  line-height: 1.8;
}
▼ 行間の比較

line-height: 1.2（狭い）

Webページのデザインを学んでいます。行間が狭いと文章が詰まって読みにくく感じます。

line-height: 1.8（ゆったり）

Webページのデザインを学んでいます。行間が広いと文章がゆったりして読みやすくなります。

フォントの種類 ― font-family

フォントの種類は font-family で指定します。 複数書いておくと、最初のフォントが使えない場合に次のフォントで表示されます。 

body {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
sans-serif（サンセリフ）はゴシック体系のフォントを意味します。 フォント名を書き終えた最後に書いておくと、 指定したフォントが全部使えなかった場合の保険になります。

5. 余白 ― margin と padding

Webデザインで「見やすさ」を左右する重要な要素が余白です。 CSSの余白には margin と padding の2種類があり、役割が異なります。

ボックスモデル ― 要素の構造を知る

HTMLのすべての要素は、次のような入れ子構造になっています。 これをボックスモデルといいます。

margin（外側の余白）
border（枠線）
padding（内側の余白）
コンテンツ（テキストや画像）
プロパティ 役割 イメージ
margin 要素の外側の余白。他の要素との距離を作る。 本の「のど（余白）」
padding 要素の内側の余白。コンテンツと枠線の間隔。 箱の「緩衝材」

margin の書き方

/* 上下左右すべて同じ余白 */
p { margin: 20px; }

/* 上下・左右をそれぞれ指定（上下 左右） */
p { margin: 10px 20px; }

/* 上・右・下・左を個別に指定（時計回り） */
p { margin: 10px 20px 30px 40px; }

/* 方向を個別に指定するプロパティ */
p {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
}
0 には単位をつけない
値が 0 のときは 0px ではなく 0 と書くのが慣習です。 どちらでも動きますが、0 だけの書き方が一般的です。

margin と padding の違いを見てみよう

▼ 表示例

margin: 20px（外側に余白。青い枠と背景の間に隙間がある）

padding: 20px（内側に余白。文字と青い枠の間に隙間がある）

6. 幅と中央揃え

要素の幅 ― width

div {
  width: 600px;       /* 固定幅 */
  width: 80%;         /* 親要素の80%の幅 */
  max-width: 800px;   /* 最大幅（これより大きくならない） */
}

ブロックを中央に置く

margin: 0 auto を使うと、ブロック要素を横方向に中央揃えできます。 ページ全体のコンテンツ幅を制限して中央に表示するときによく使います。 

div {
  max-width: 800px;
  margin: 0 auto;  /* 上下0、左右auto（自動で均等に） */
}
▼ max-width + margin: 0 auto の効果
このボックスは中央に揃えられています

テキストの横位置 ― text-align

h1 { text-align: center; }  /* 中央揃え */
p  { text-align: left; }    /* 左揃え（デフォルト） */
p  { text-align: right; }   /* 右揃え */
▼ text-align の比較

左揃え（left）― 日本語の本文はこれが基本

中央揃え（center）― タイトルや見出しに

右揃え（right）― 日付や署名などに

7. 枠線 ― border

要素の周りに枠線を引くには border を使います。

p {
  border: 2px solid #333;  /* 太さ・種類・色 */
}
種類 見た目 コード例
solid（実線） border: 2px solid #333
dashed（破線） border: 2px dashed #333
dotted（点線） border: 2px dotted #333

角を丸くするには border-radius を使います。

div {
  border: 2px solid #2c5f8a;
  border-radius: 8px;  /* 角の丸み */
}
▼ border-radius の効果
角なし（0px）
少し丸い（6px）
大きく丸い（50px）

8. この章で学んだプロパティ一覧

プロパティ 意味 値の例
color 文字色 red / #333
background-color 背景色 #f5f5f5
font-size 文字サイズ 16px
font-weight 文字の太さ bold / normal
font-family フォントの種類 "Meiryo", sans-serif
line-height 行間 1.8
margin 外側の余白 20px / 0 auto
padding 内側の余白 16px 24px
width / max-width 幅 800px / 100%
text-align テキストの横位置 left / center
border / border-radius 枠線・角丸 2px solid #333

この章のまとめ

次の第5章では、ここで学んだプロパティをフル活用して 第3章で作った自己紹介ページに実際にCSSを当てていきます！