CSS入門 #1 - 色・文字・余白を変える

入門 | 11分 で読める | 2026.07.12

公式ドキュメント
CSS

今回やること

CSSは、HTMLに見た目を付けるための言語です。

HTMLで構造を書き、CSSで見た目を整える、と役割を分けることが基本です。

今回は、色、文字サイズ、余白を変更します。

CSSファイルを作る

HTMLと同じフォルダに style.css を作成します。

html-basic/
├── index.html
└── style.css

index.html の head にCSSを読み込みます。

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

最初のCSSを書く

style.css に次を書きます。

body {
  color: #1f2937;
  background-color: #f9fafb;
  font-family: sans-serif;
}

h1 {
  color: #2563eb;
  font-size: 32px;
}

p {
  font-size: 16px;
  line-height: 1.8;
}

ブラウザを更新し、文字色や背景色が変わればCSSの読み込みは成功です。

CSSの基本形

CSSは次の形で書きます。

selector {
  property: value;
}
部分例意味
selectorh1どのHTMLに当てるか
propertycolor何を変えるか
value#2563ebどう変えるか

余白を調整する

外側の余白は margin、内側の余白は padding です。

body {
  margin: 0;
  padding: 24px;
}

section {
  margin-top: 32px;
  padding: 24px;
  background-color: #ffffff;
}

margin は要素同士の距離、padding は箱の中の余白です。

カード風にする

自己紹介の section をカード風にしてみます。

section {
  margin-top: 24px;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

border-radius を使うと角を丸くできます。

よくあるミス

ミス起きること確認する場所
CSSファイル名が違うCSSが反映されないhref と実ファイル名
; を忘れる後続の指定が効かないことがある各行の最後
} を閉じ忘れるCSS全体が崩れる波括弧の対応
margin と padding を混同余白の位置が想定と違うDevToolsのBox Model

練習

次を変更してください。

  1. h1 の色を別の色にする
  2. body の背景色を薄い色にする
  3. section に border-radius を付ける
  4. 段落の line-height を変えて読みやすさを比べる

次のステップ

CSS入門 #2 - classとidでスタイルを当てる で、特定の要素だけにCSSを当てます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR