【図解】CSSの「わからない」を卒業！タグ・要素・セレクターの違いから魔法のレイアウトFlexboxまで完全攻略

2026.02.11
【図解】CSSの「わからない」を卒業！

「CSSを勉強し始めたけど、似たような言葉が多くて混乱する…」 「なんとなく書いているけど、実はよくわかっていない」

そんな悩みを持っていませんか？ この記事では、CSSの基本用語を「料理」に例えてスッキリ整理し、最終的には「マウスを乗せると動くオシャレなボタン」を自力で作れるようになるところまで、一気に解説します！

CSSの3大用語を攻略（タグ・要素・セレクター）

まずは、よく混同されるこの3つの言葉を整理しましょう。料理に例えると一発でわかります。

用語の正体

  • タグ（Tag）：<p> や <h1> などの「記号」そのもの。
    • 例え：材料に貼られた「卵」というラベル
  • 要素（Element）： 開始タグから終了タグまでの中身すべて。
    • 例え：お皿に乗った「目玉焼き」という料理
  • セレクター（Selector）： CSSで「どこ」を変えるか指名する部分。
    • 例え：「目玉焼き」に塩を振れ！という指示

図解でチェック

Plaintext

  <p class="text"> こんにちは </p>
  |              |            |          |
  |   開始タグ   |    中身    | 終了タグ |
  |______________|____________|__________|
         |
      「要素」 (これ全部のこと)

狙った場所を指名する「セレクター」の使い分け

CSSを書くとき、特定の場所を狙い撃ちにするには主に3つの方法があります。

  1. タグ名で呼ぶ（要素セレクター）
    • p { ... }
    • ページ内の<p>タグ全部に効きます。「1年生全員集まれ！」という全体指示です。
  2. 名前で呼ぶ（クラスセレクター） ★一番重要！
    • .blue-text { ... } （頭に . をつける）
    • 特定の名前をつけた場所にだけ効きます。「青いバッジをつけた人だけ集まれ！」というグループ指名です。
  3. 背番号で呼ぶ（IDセレクター）
    • #main-header { ... } （頭に # をつける）
    • 世界に一つだけの特定の場所を指名します。

「箱」のルール：ボックスモデルと色

CSSでデザインを整えるときは、すべての要素が「見えない四角い箱」に入っていると考えます。

  • padding（パディング）： 箱の内側の余白。
  • margin（マージン）： 箱の外側の余白。
  • color / background-color： 文字の色と背景の色。
    • #3498db（16進数）や rgba(0,0,0,0.5)（透明度指定）で自由自在に操れます。

最強の配置ツール「Flexbox」

「要素を横に並べたい」「真ん中に置きたい」という時に使うのが Flexbox です。 使い方は、並べたいアイテムの**「親要素（外枠）」**にこう書くだけ！

CSS

.parent {
  display: flex;            /* Flexbox発動！ */
  justify-content: center;  /* 横方向の真ん中 */
  align-items: center;      /* 縦方向の真ん中 */
}

これで、中にある要素が魔法のように綺麗に整列します。

【実践】マウスで動く「魔法のボタン」を作ろう

これまでの知識をすべて詰め込んだボタンのコードです。

HTML

<div class="container">
  <button class="my-button">もっと見る</button>
</div>

CSS

.container {
  display: flex;
  justify-content: center; /* ボタンを画面中央に */
  height: 100px;
}

.my-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.3s; /* 変化をふわっとさせる */
}

/* マウスを乗せた時（ホバー）の動き */
.my-button:hover {
  background-color: #2980b9; /* 色を濃くする */
  transform: scale(1.1);    /* 少し大きくする */
}

初心者がつまずく「落とし穴」チェックリスト

動かない！と思ったらここをチェックしてみてください。

  1. ドットを忘れていないか？：CSSでクラスを呼ぶときは .name です。
  2. 全角スペースが混じっていないか？：コード内のスペースは必ず「半角」で！
  3. 親要素に書いているか？：Flexboxの指示は、並べたい要素の「親」に書きます。

まとめ

最初は難しく感じるCSSも、「誰に（セレクター）」「何を（プロパティ）」するかというルールの組み合わせに過ぎません。まずはこのボタンをコピーして、色やサイズをいじるところから始めてみてください。あなたのWebサイトが動き出すはずです！

コメント

PAGE TOP