CSS2とCSS3の違いとは？初心者にもわかりやすく解説

CSSはウェブデザインの必須スキルですが、CSS2とCSS3の違いを理解していないと「どの機能が使えるのか？」で迷うことがあります。この記事では、CSS2とCSS3の違いをわかりやすく解説します。

1 仕様構造の違い

CSS2は単一の仕様書で定義されており、レイアウト・フォント・色・テーブル・メディアタイプなどが含まれます。

CSS3はモジュール化されており、機能ごとに独立した仕様として開発・標準化されています。例として、CSS3 SelectorsやCSS3 Transitions、CSS3 Flexboxなどがあります。

モジュール化により、ブラウザは一部のCSS3機能だけを先行実装できるようになりました。

2 新しいセレクタ

CSS3では、より柔軟なセレクタが追加されました。

CSS2のセレクタは、基本的に要素・クラス・ID・子孫などの簡単なものしか使えません。

3 レイアウト機能の拡張

CSS3では、新しいレイアウト方法が導入されました。

• Flexbox → 要素の並べ方・配置が簡単
• Grid → 2次元レイアウトの制御
• Media Queries → レスポンシブデザイン対応

CSS2では、主に float と position に頼るレイアウトしかできませんでした。

4 スタイル表現の強化

CSS3では、デザイン表現が大幅に進化しています。

5 フォント・テキスト機能

• CSS2 → フォントサイズ・スタイル・ファミリの基本指定のみ
• CSS3 → Webフォント（@font-face）や文字の装飾（text-shadow、word-wrapなど）が追加

6 互換性

CSS3はCSS2を包含しているため、CSS2のコードはそのまま使えます。ただし、CSS3の新しい機能（例: flexbox）は古いブラウザでは未対応のことがあります。

7 CSS3の便利なデモコード

ここでは、CSS3の代表的な機能を実際に試せるサンプルを紹介します。コピーしてそのままHTMLに貼り付けて動作を確認できます。

7.1 角丸・背景グラデーション・シャドウ

CSS3の代表的なデザイン機能の一つ、角丸とグラデーション、シャドウを組み合わせた例です。

<div class="demo-box">CSS3 Demo</div>

/* --------------------------------
 * 角丸・背景グラデーション・シャドウ
------------------------------- */

.demo-box {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: white;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  border-radius: 15px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

7.2 マウスオーバー時のトランジション

マウスを乗せたときにスムーズに色やサイズが変化します。

<div class="hover-box">Hover me!</div>

/* --------------------------------
 * マウスオーバー時のトランジション
------------------------------- */

.hover-box {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ff7e5f;
  color: white;
  border-radius: 8px;
  transition: background-color 0.5s ease, transform 0.3s ease;
}
.hover-box:hover {
  background-color: #feb47b;
  transform: scale(1.1);
}

7.3 Flexboxによる中央揃え

Flexboxを使うと、縦横ともに簡単に中央揃えができます。

<div class="flex-container">
  <div class="flex-item">1→</div>
  <div class="flex-item">2→</div>
  <div class="flex-item">>3→</div>
</div>

/* --------------------------------
 * Flexboxによる中央揃え
------------------------------- */

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100px;
  background-color: #eee;
}
.flex-item {
  background-color: #4facfe;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

8 まとめ

• CSS2 → 基本的なスタイル指定とレイアウト
• CSS3 → モジュール化された拡張仕様。アニメーション・グラデーション・角丸・高度なセレクタ・レスポンシブ対応など多彩な表現が可能

今回紹介したデモコードは、CSS3を実際に試すための基本例です。ぜひコピーしてブラウザで動作を確認してみてください。