第3回：CSSで「それっぽいデザイン」を作る

3月 16, 2026

授業目次

今日のゴール

  • CSSは「見た目を整えるための部品集」ではなく、問題を解決するための道具だと理解する
  • 余白、背景、幅、中央寄せ、ボタン風デザインを作れるようになる
  • margin と padding の違いを理解する
  • a タグがそのままではボタンっぽくならない理由を知る
  • 簡単なカードデザインを自力で作れるようになる

1. はじめに

前回は、CSSの基本的な書き方を学びました。

  • color
  • font-size
  • font-family
  • font-weight
  • text-align
  • border
  • border-radius

このあたりを使って、文字や線の見た目を変えることができるようになりました。

ただ、ここで多くの人が次に思います。

「文字の色や大きさは変えられるけど、まだ全然サイトっぽくならない」

これはとても自然な感覚です。

なぜなら、サイトっぽく見えるかどうかを大きく左右するのは
色よりも、余白や配置だからです。

今回は、CSSを「設定の暗記」として学ぶのではなく、

  • なんか見づらい
  • なんかダサい
  • 詰まって見える
  • ボタンに見えない
  • 真ん中に置きたい

という 実際に起こる問題を解決しながら 学びます。

2. 今日作るもの

今回は、次のような「カードデザイン」を作ります。

  • タイトルがある
  • 説明文がある
  • お問い合わせボタンがある
  • 背景がついている
  • 真ん中に配置されている
  • 少し余白があって見やすい

完成イメージはこんな感じです。

---------------------------------
|                               |
|         PROGCUBE              |
|                               |
|     WEB制作サービスです        |
|     ホームページ制作を         |
|     行っています              |
|                               |
|      [ お問い合わせ ]          |
|                               |
---------------------------------

最初からこれを作るのではなく、
ダサい状態 → 問題発見 → CSSで改善
という順番で進めます。

3. まずはHTMLだけで作ってみる

まずはHTMLだけで、最低限の内容を書いてみます。

<h1>PROGCUBE</h1>
<p>WEB制作サービス</p>
<p>ホームページ制作をしています。</p>
<a href="#">お問い合わせ</a>

表示はされます。
でも、これを見たときに多くの人がこう感じます。

  • 詰まっていて見づらい
  • どこがまとまりなのかわからない
  • お問い合わせがボタンに見えない
  • なんとなく「素のまま」感がある

ここで大事なのは、
CSSは見た目を飾るためだけではなく、見やすく整理するために使う
ということです。

4. 最初の問題：「詰まっていて見づらい」

HTMLだけだと、要素がただ並んでいるだけです。
情報同士の距離が近すぎると、人は読みにくく感じます。

ここで必要なのが 余白 です。

まず覚えたいこと

CSSでは余白に大きく2種類あります。

  • margin → 外側の余白
  • padding → 内側の余白

最初はこの違いが一番つまずきやすいです。
なのでここでしっかり整理します。

5. marginとは何か

margin は、要素の外側に作る余白 です。

例えば、文章と文章の間を少しあけたいとします。

p {
  margin-bottom: 20px;
}

これで、p タグの下に20pxの余白ができます。

このタイミングで出やすい疑問

疑問1

「なんで下だけ指定するの？」

答え：
今回ほしいのは「文章と次の要素の間のすき間」だからです。
上下左右全部を一気に指定することもできますが、
まずは「どこに余白がほしいのか」を考えることが大事です。

疑問2

「pxって何？」

答え：
px は大きさの単位です。
20px は「20ピクセルぶん」という意味です。
Web制作ではとてもよく使います。

6. 余白を入れてみる

<h1>PROGCUBE</h1>
<p>WEB制作サービス</p>
<p>ホームページ制作をしています。</p>
<a href="#">お問い合わせ</a>
p {
  margin-bottom: 20px;
}

これだけでも少し見やすくなります。

ここで生徒に伝えたいことは、

CSSは派手な装飾より先に、読みやすさを整えるために使うことが多い

ということです。

7. 次の問題：「まとまりがなくて、ただ並んでいるだけに見える」

見やすくはなったけれど、
まだ「1つのまとまり」として見えません。

ここで必要なのが 背景 と 内側の余白 です。

8. まずはまとまりを作るために div を使う

HTMLを少し変えます。

<div class="card">
  <h1>PROGCUBE</h1>
  <p>WEB制作サービス</p>
  <p>ホームページ制作をしています。</p>
  <a href="#">お問い合わせ</a>
</div>

このタイミングで出やすい疑問

疑問3

「divって何？」

答え：
div は、要素をまとめるための箱です。
意味を持つタグではありませんが、CSSを当てるためのグループとしてよく使います。

疑問4

「classって何？」

答え：
class は名前です。
この場合、card という名前をつけることで、
このまとまりだけにCSSを当てやすくしています。

9. 背景をつける

まとまりを見せるために、背景色をつけます。

.card {
  background: white;
}

これだけだと、少し箱っぽく見えてきます。

このタイミングで知っておきたいこと

  • 背景色は要素そのものにつく
  • 文字に色をつける color とは別物
  • background は背景を変えるためのCSS

10. 次の問題：「背景はついたけど、中身が端にくっついて窮屈」

ここで初めて padding の出番です。

padding は 内側の余白 です。
つまり、箱のふちと中身の間にすき間を作ります。

.card {
  background: white;
  padding: 20px;
}

これで、カードの中身が少し内側に入り、見やすくなります。

11. marginとpaddingの違い

ここはかなり重要です。

margin

要素の外側の余白

padding

要素の内側の余白

イメージとしてはこうです。

[ margin ][ border ][ padding ][ 内容 ][ padding ][ border ][ margin ]

初心者はここでかなり混乱しやすいです。
なので授業ではこう伝えるとわかりやすいです。

  • 要素どうしの距離をあけたい → margin
  • 箱の中をゆったりさせたい → padding

このタイミングで出やすい疑問

疑問5

「じゃあ余白は全部paddingじゃだめ？」

答え：
だめではありませんが、使い分けが必要です。
「外の距離」なのか「中の距離」なのかで役割が違います。

12. 次の問題：「画面いっぱいに広がって、カードっぽくない」

背景と余白がついたことで箱っぽくはなりました。
でも、横幅が広すぎるとカードには見えません。

ここで使うのが width です。

.card {
  background: white;
  padding: 20px;
  width: 400px;
}

これで、カードの横幅を400pxにできます。

このタイミングで出やすい疑問

疑問6

「なんで幅を決めるの？」

答え：
画面いっぱいに広がると、カードというよりただの大きな帯に見えてしまうからです。
適度な幅を決めることで、まとまりとして認識しやすくなります。

疑問7

「400pxって決め打ちでいいの？」

答え：
今は練習なので大丈夫です。
あとでレスポンシブ対応や相対単位も学びますが、
最初は「見た目がどう変わるか」を理解することが先です。

13. 次の問題：「左に寄っていて、なんかバランスが悪い」

カードができても、左上に寄っているとまだ完成感が出ません。
ここで「中央に置きたい」という気持ちが出てきます。

このとき使うのが

margin: 50px auto;

です。

.card に追加します。

.card {
  background: white;
  padding: 20px;
  width: 400px;
  margin: 50px auto;
}

このタイミングで知っておきたいこと

margin: 50px auto; は、

  • 上下に50px
  • 左右は自動調整

という意味です。

左右を auto にすると、要素が中央に寄ります。
ただし、幅が決まっている要素 でないと中央寄せになりません。

このタイミングで出やすい疑問

疑問8

「なんで auto で真ん中に来るの？」

答え：
残った左右の空きを、自動で均等に分けるからです。

疑問9

「width がないと中央にいかないのはなぜ？」

答え：
幅が自動のままだと、要素が最初から横いっぱいに広がっていて、
「左右に余った空き」がないからです。

14. 次の問題：「お問い合わせがボタンに見えない」

a タグはリンクです。
そのままだと、ただの文字にしか見えません。

<a href="#">お問い合わせ</a>

これをボタンっぽく見せたい。
ここで必要になるのが

  • 背景
  • 文字色
  • 余白
  • 丸み
  • display

です。

15. まずは見た目を整える

a {
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

ここで気づくはずです。

「あれ？ 背景はついたけど、なんか変」

なぜかというと、a タグは初期状態では インライン要素 だからです。

16. displayとは何か

ここで display を学びます。

a {
  display: inline-block;
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

これで、a タグにも余白がついて、ボタンっぽく見えるようになります。

このタイミングで出やすい疑問

疑問10

「displayって何？」

答え：
要素の見え方・並び方の性質を決めるものです。

疑問11

「なんで a タグに padding だけじゃダメなの？」

答え：
a タグはインライン要素なので、
ブロック要素のような見た目の調整が少ししづらいです。
inline-block にすることで、文字のように横並びしつつ、
箱のような調整もしやすくなります。

疑問12

「blockじゃだめなの？」

答え：
だめではありません。
ただし block にすると横幅いっぱいに広がりやすく、
今回のような「小さめのボタン」には inline-block が使いやすいです。

17. さらに見た目を整える

a タグには下線がつくことがあります。
リンクっぽさを消してボタンらしくしたいなら、これも使います。

a {
  display: inline-block;
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}

このタイミングで知っておきたいこと

  • text-decoration: none; は下線を消す
  • これでリンク文字っぽさが減る
  • ボタンに見せたいときによく使う

18. bodyにも背景をつける

カードだけ白だと、背景との違いが出にくい場合があります。
そこで、ページ全体にも薄い背景色をつけます。

body {
  font-family: sans-serif;
  background: #f0f0f0;
}

これで、白いカードが浮いて見えやすくなります。

このタイミングで出やすい疑問

疑問13

「bodyってページ全体？」

答え：
はい。
body は実際に画面に表示される中身全体を包んでいる部分です。
そこに背景色をつけると、ページ全体の背景が変わります。

19. 完成コード

HTML

<div class="card">
  <h1>PROGCUBE</h1>
  <p>WEB制作サービス</p>
  <p>ホームページ制作をしています。</p>
  <a href="#">お問い合わせ</a>
</div>

CSS

body {
  font-family: sans-serif;
  background: #f0f0f0;
}.card {
  background: white;
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
}p {
  margin-bottom: 20px;
}a {
  display: inline-block;
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}

20. この授業で学んだこと

今回は、プロパティをただ暗記したのではなく、
デザイン上の問題を解決しながら CSSを使いました。

学んだことは次の通りです。

  • 詰まって見える → margin
  • 箱の中が窮屈 → padding
  • まとまりがない → background
  • 横に広すぎる → width
  • 真ん中に置きたい → margin: 0 auto
  • ボタンに見えない → display: inline-block
  • 角を少しやわらかくしたい → border-radius

つまり、CSSは

「こういう見た目にしたい」を実現するための道具

です。

21. よくあるミス

① class名が違う

HTMLで

<div class="card">

と書いているのに、CSSで

.cards {

になっていると当たりません。

② 幅を指定していないのに中央寄せしようとする

margin: 0 auto;

は便利ですが、幅が決まっていないと効きません。

③ aタグに背景をつけたのに変な見た目になる

display: inline-block; を入れていない可能性があります。

④ margin と padding が混ざる

最初はかなり混ざります。
迷ったら次の基準で考えましょう。

  • 外との距離 → margin
  • 中のゆとり → padding

22. 宿題

宿題1

今日作ったカードデザインを、自分の内容に置き換えて作ってください。

条件

  • タイトルを自分の名前にする
  • 説明文を2つ入れる
  • お問い合わせボタンを作る
  • background
  • margin
  • padding
  • width
  • border-radius
  • display

を使う

宿題2

カードを1つではなく、3パターン作ってみてください。

例

  • 自己紹介カード
  • 商品紹介カード
  • サービス紹介カード

目的は、CSSをコピペで終わらせず、
中身が変わっても同じ考え方で作れるようになること です。

23. 発展課題

余裕がある人は、次の調整もしてみてください。

  • タイトルを中央寄せにする
  • ボタンの色を変える
  • カードの角をもっと丸くする
  • カードの幅を変える
  • 余白を増やしたり減らしたりして見た目の違いを確認する

大事なのは、
CSSは数字を少し変えるだけでも印象が変わる
ということを体感することです。

24. 次回予告

次回は、複数の要素を並べる方法を学びます。

例えば

  • カードを横に並べたい
  • 画像と文章を横並びにしたい
  • 複数のメニューをきれいに並べたい

こういったときに必要になるのが Flexbox です。

今回の内容で「1つをきれいに整える」感覚を身につけ、
次回は「複数をきれいに並べる」感覚に進みます。

← 週一覧に戻る