Webフロントエンド - 基礎

CSS3 しーえすえすすりー

スタイルシートセレクタアニメーションレスポンシブデザインフレックスボックスグリッドレイアウト

CSS3について教えて

簡単に言うとこんな感じ！

Webページの「見た目を整える言語」がCSSで、CSS3はその最新バージョンなんだ！文字の色・大きさ・レイアウトはもちろん、アニメーションや角丸ボタンも全部これで作れちゃうんだよ。「HTMLが骨格、CSS3がファッション」ってイメージが一番わかりやすいかも！

CSS3とは

CSS（Cascading Style Sheets） とは、Webページの見た目・デザインを定義するための言語です。HTMLが「このページにはタイトルがあって、画像があって、文章がある」という構造を記述するのに対し、CSSは「タイトルは赤い大文字で、画像は右寄せで、背景は薄いグレーで」といった見た目の指示を担当します。

CSS3 はそのCSSの第3世代の仕様群を指します。「1つの大きな仕様書」ではなく、モジュールと呼ばれる機能別の小さな仕様に分割されて策定されたのが大きな特徴です。角丸（border-radius）・影（box-shadow）・グラデーション・アニメーション・フレックスボックスレイアウト・グリッドレイアウトなど、現代のWebデザインに欠かせない機能の大半がCSS3で導入されました。

ビジネスの現場では、「スマホでも崩れないデザインにして」「ボタンにホバーアニメーションをつけて」といった要望を実現する土台がCSS3です。外注先やデザイナーと会話する際にも、CSS3がカバーする範囲を知っておくと発注の精度が上がります。

CSS3の主要モジュールと機能

CSS3は機能ごとにモジュールという単位で独立して仕様化されています。主要なものを整理すると次のとおりです。

モジュール名	できること	実務での使われ方
セレクタ Level 3	要素の選び方を細かく指定	「偶数行だけ色を変える」など
ボックスモデル	余白・枠・サイズの制御	レイアウトの基本
背景と境界線	角丸・影・グラデーション	カード型UIのデザイン
テキスト	行間・文字間・省略表示	読みやすい文章デザイン
フレックスボックス	1次元の柔軟なレイアウト	ナビゲーション・カード並び
グリッドレイアウト	2次元のマス目レイアウト	ページ全体の骨格
アニメーション	動きのある表現	ローディング・ホバー効果
トランジション	状態変化の滑らかな補完	ボタン色の変化など
メディアクエリ	画面幅で表示を切り替え	レスポンシブデザインの核心
カスタムプロパティ	変数として色・値を管理	デザインの一括変更

覚え方：「CSSはファッションコーディネーター」

HTMLが「人体（構造）」だとすれば、CSSは「服・アクセサリー・ヘアスタイル（見た目）」を担当するコーディネーターです。CSS3になって、「アニメーションするアクセサリー」や「画面サイズに合わせて着替える服」まで作れるようになったイメージです。

CSSの基本構文

/* セレクタ { プロパティ: 値; } という形で書く */

/* h1タグ（見出し）のスタイルを指定 */
h1 {
  color: #1e3a8a;        /* 文字色：ネイビー */
  font-size: 2rem;       /* 文字サイズ */
  border-radius: 8px;   /* 角を丸くする（CSS3で追加） */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 影（CSS3で追加） */
}

/* 画面幅600px以下のスマホ向け（メディアクエリ：CSS3） */
@media (max-width: 600px) {
  h1 {
    font-size: 1.2rem;
  }
}

歴史と背景

1994年 — Håkon Wium Lie（ホーコン・リー）がCSSのアイデアを提案。HTMLだけでは見た目の制御が難しかった
1996年 — W3C（World Wide Web Consortium）が CSS Level 1 を勧告。色・フォント・余白の基本機能
1998年 — CSS Level 2 勧告。位置指定（position）・z-index・メディアタイプなどが追加
2000年代前半 — ブラウザ間の実装差異が激しく「IE対応地獄」と呼ばれる時代。CSSが仕様どおり動かないことも多かった
2005年頃〜 — CSS3の各モジュールが段階的に策定開始。「一枚岩の仕様書」から「モジュール分割」へ方針転換
2011年 — border-radius・box-shadow・@font-face などCSS3の主要機能がモダンブラウザで安定動作し始める
2012年 — フレックスボックス の仕様が安定。レイアウト革命のはじまり
2017年 — CSS グリッドレイアウト が主要ブラウザで一斉サポート。2次元レイアウトが劇的に楽になる
現在 — 「CSS3」という表記は事実上「現代のCSS全体」を指す通称として使われており、W3C的には各モジュールがそれぞれ独立してバージョン管理されている

CSS3とHTMLの関係・他技術との比較

CSSはHTML・JavaScriptと並ぶWebの三本柱です。それぞれの役割を整理します。

CSS3 vs CSSフレームワーク（TailwindCSS・Bootstrap）

CSS3を直接書く代わりに、あらかじめスタイルが定義されたCSSフレームワークを使う手法も一般的です。

比較軸	素のCSS3	Bootstrap	Tailwind CSS
学習コスト	中〜高	低〜中	中
カスタマイズ性	最高	低〜中	高
デザインの個性	自由	Bootstrapっぽくなりがち	比較的自由
外注先での採用	ほぼ必須の知識	多い	急増中
向いている用途	独自デザイン重視	管理画面・業務系	モダンなSaaS系

規格・番号	内容
W3C CSS Snapshot 2023	CSS3各モジュールの現時点での勧告・草案状態をまとめた公式スナップショット
CSS Selectors Level 3	CSS3セレクタの公式仕様（W3C勧告）
CSS Flexbox Level 1	フレックスボックスレイアウトの公式仕様
CSS Grid Layout Level 1	グリッドレイアウトの公式仕様
CSS Animations Level 1	CSSアニメーションの公式仕様
Media Queries Level 4	レスポンシブデザインの根幹、メディアクエリの仕様