初心者向け: 概要と特徴、学習順ガイド

CSSのセレクタ・プロパティ・レイアウト・学習順を整理した入口ページです。

CSSの歴史・系譜・設計思想といった背景は、IT用語 & 歴史辞典の「CSS」を実現したスタイルシート言語」で詳しく解説しています。本ページはCSSを書くための実用情報に絞っています。

CSSとは何か

CSS（Cascading Style Sheets）は、1994年にホーコン・ウィウム・リーさんが提案したHTML文書の見た目を定義するためのスタイルシート言語です。文字の色・大きさ・配置・余白・アニメーションなど、ウェブページのデザインに関わる全てをCSSで指定します。現在はW3Cが仕様を策定しており、Flexbox・Grid・Custom Propertiesなどの機能がモジュール単位で追加され続けています。

HTMLが「ページの構造と内容」を担い、CSSが「ページの見た目」を担うという分業体制が現代のウェブ開発の基本です。この分業によって、同じHTMLに異なるCSSを当てるだけでデザインを全変更でき、HTMLのコードが見た目の指定で汚染されません。

HTMLとCSSの役割分担

CSSの名前にある「Cascading（カスケーディング）」は、複数のスタイル定義が重なったときの優先順位の決まり方を指しています。これがCSSの最大の特徴であり、初学者がつまずきやすい部分でもあります。

ファイル拡張子

CSS のソースコードは以下の拡張子のファイルに保存します。

.css — CSS スタイルシート

最初に知っておく 5 つのポイント

HTMLとCSSは別の言語 — HTMLが「構造と内容」を定義し、CSSが「見た目」を定義します。同じHTMLに対して別のCSSを当てるだけでデザインを全変更できます
「カスケーディング」が中心概念 — 複数のスタイルが同じ要素に当たったとき、どれを優先するかを「詳細度」と「記述順」で決める仕組みです。詳細度を理解するとデバッグが格段に速くなります
継承で記述を減らせる — 親要素に設定した『color』や『font-family』は子要素に自動的に引き継がれます。『body』に一度設定すれば、ページ全体のフォントや色をまとめて管理できます
レイアウトはFlexboxとGridが主流 — 現代のウェブではFloatを使ったレイアウトより、Flexbox（1方向）とGrid（2次元）を使うことが多くなっています。まずこの2つを習得すると実務に直結します
歴史と系譜を知ると設計判断が変わる — CSSには「なぜこういう仕様なのか」という背景があります。詳しくはIT用語 & 歴史辞典「CSS — 『構造と見た目の分離』を実現したスタイルシート言語」を参照してください

CSSの特徴 — カスケーディング、詳細度、継承

CSSには他のプログラミング言語とは異なる独自の仕組みがあります。この3つを早めに理解しておくと、後々のトラブルに対処しやすくなります。

カスケーディング（Cascading）— 複数のスタイルが重なったとき

ひとつのHTML要素に対して複数のCSSルールが適用されるとき、どのスタイルを最終的に使うかを決める仕組みです。

/* 外部ファイルで定義 */
p { color: black; }

/* 後から追加 */
p { color: blue; }

同じ詳細度のルールが複数ある場合、後から書かれたものが優先されます。上の例では color: blue が適用されます。

詳細度（Specificity）— どのセレクタが強いか

セレクタの種類によって「強さ（詳細度）」が決まっています。詳細度が高いルールが、後から書かれたルールよりも優先されます。

セレクタの種類	詳細度（強さ）	例
インラインスタイル（style属性）	最強	`style="color: red"`
IDセレクタ	強	`#header`
クラス・属性・疑似クラス	中	`.nav` `[type="text"]` `:hover`
要素セレクタ・疑似要素	弱	`p` `div` `::before`
全称セレクタ	最弱	`*`

/* IDセレクタ（強） */
#title { color: blue; }

/* 要素セレクタ（弱）— 後から書かれていても負ける */
h1 { color: red; }

上の例では、<h1 id="title"> に対して color: blue が適用されます。後から書かれた h1 ルールは詳細度で負けるためです。詳細度の計算方法については詳細度（Specificity）で詳しく解説しています。

継承（Inheritance）— 親から子へ引き継がれるプロパティ

一部のCSSプロパティは、親要素から子要素へ自動的に引き継がれます。

body {
	color: #333;
	font-family: sans-serif;
}

body に設定した color や font-family は、ページ内の全ての要素に自動的に引き継がれます。一方で margin や border などは継承されません。

	継承される主なプロパティ	継承されない主なプロパティ
例	`color`, `font-size`, `font-family`, `line-height`, `text-align`	`margin`, `padding`, `border`, `width`, `height`, `background`

CSSの特徴とトレードオフ

	内容
HTMLと分離できる	デザインをHTMLファイルとは別に管理でき、複数ページに同じスタイルを適用できる
記述がシンプル	プログラミング言語ではないため、条件分岐やループなどの概念がなく比較的読みやすい
ブラウザ間の差異	ブラウザによってデフォルトのスタイルが異なる。クロスブラウザの確認が必要になることがある
グローバルスコープ	CSSは基本的にページ全体に影響する。意図しない要素にスタイルが当たることがある
カスケーディングの複雑さ	複数のルールが絡み合うと、なぜそのスタイルになるのか追跡しにくくなることがある

CSSの適用方法 — インライン、styleタグ、外部ファイル

HTMLにCSSを適用する方法は3つあります。

1. インラインスタイル — 要素に直接書く

<p style="color: red; font-size: 18px;">テキスト</p>

HTML要素の style 属性に直接CSSを書く方法です。詳細度が最も高く、他のスタイルを上書きします。ただし、同じスタイルを複数の場所に書き直す必要があるため、管理しにくくなりがちです。

2. styleタグ — HTMLファイル内に書く

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

HTMLファイルの <head> 内に <style> タグを置き、その中にCSSを書く方法です。そのHTMLファイルにだけ適用されます。

3. 外部ファイル — .cssファイルに書いてlinkタグで読み込む

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

適用するCSSは次の通りです。

/* style.css */
p { color: red; font-size: 18px; }

CSSを独立した .css ファイルに書き、<link> タグで読み込む方法です。複数のHTMLページで同じスタイルを共有できます。実際のウェブ開発では最も一般的な方法です。

3つの方法の比較

外部ファイルの書き方や読み込み方の詳細は.cssファイルの作成と実行方法で解説しています。

セレクタの基本

セレクタとは、CSSのスタイルを「どのHTML要素に適用するか」を指定する記述です。

要素セレクタ — タグ名で指定

/* すべての p 要素に適用 */
p { color: #333; }

/* すべての h1 要素に適用 */
h1 { font-size: 24px; }

クラスセレクタ — class属性で指定

/* class="highlight" の要素に適用 */
.highlight { background-color: yellow; }

このCSSを適用するHTMLです。

<p class="highlight">このテキストが黄色くなります</p>

IDセレクタ — id属性で指定

/* id="header" の要素に適用 */
#header { background-color: #333; color: white; }

IDはページ内に1つだけが原則です。同じIDを複数の要素に付けると、HTMLとしては不正な状態になります。

子孫セレクタ — スペースで階層を指定

/* nav の中にある a 要素に適用（直下でなくてもよい） */
nav a { text-decoration: none; }

隣接セレクタ — + で直後の要素を指定

/* h2 の直後にある p 要素にだけ適用 */
h2 + p { margin-top: 4px; }

よく使うセレクタ一覧

セレクタ	意味	例
`*`	全ての要素	*
`要素名`	指定したタグの全要素	element
`.クラス名`	指定したclass属性を持つ要素	class
`#ID名`	指定したid属性を持つ要素	id
`A B`	AのすべてのB子孫	descendants
`A > B`	Aの直下のB	subelement
`A + B`	Aの直後のB	adjacent
`A ~ B`	Aの後ろにある全てのB	tilde
`[属性名]`	指定した属性を持つ要素	attribute
`:hover`	マウスオーバー時	:hover
`:nth-child(n)`	n番目の子要素	:nth-child
`:not(A)`	Aでない要素	:not
`::before`	要素の前に疑似コンテンツを追加	::before
`::after`	要素の後ろに疑似コンテンツを追加	::after

ボックスモデル — margin, padding, border

CSSでは、全てのHTML要素を「箱（ボックス）」として扱います。ボックスは内側から順にcontent（コンテンツ） → padding（内余白） → border（枠線） → margin（外余白）という4つの領域で構成されています。

.box {
	width: 200px; /* コンテンツ幅 */
	padding: 20px; /* 内側の余白（上下左右） */
	border: 2px solid #333; /* 枠線 */
	margin: 16px; /* 外側の余白（上下左右） */
}

box-sizing に注意

デフォルトでは width はコンテンツ領域だけの幅です。padding や border を加えると要素全体の幅はさらに広がります。

/* デフォルト（content-box）: width 200px + padding 40px + border 4px = 実際は244px */
.box-default {
	width: 200px;
	padding: 20px;
	border: 2px solid #333;
}

/* border-box: padding と border を width の内側に収める */
.box-border {
	box-sizing: border-box;
	width: 200px; /* padding と border を含めて 200px になる */
	padding: 20px;
	border: 2px solid #333;
}

box-sizing: border-box はリセットCSSで *, *::before, *::after に一括適用する書き方があります。詳細はbox-sizingで解説しています。

margin・padding・borderの各ページ: margin / padding / border

色と背景

CSSで色を指定する方法は複数あります。全て同じ色を表現できます。

/* カラーネーム */
color: red;
color: navy;

/* 16進数（#RRGGBB） */
color: #ff0000; /* 赤 */
color: #3498db; /* 青系 */

/* 16進数の省略形（#RGB） */
color: #f00; /* #ff0000 と同じ */

/* rgb() 関数 */
color: rgb(255, 0, 0); /* 赤 */
color: rgb(52, 152, 219); /* 青系 */

/* rgba() — 不透明度を追加 */
color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */

/* hsl() — 色相・彩度・明度 */
color: hsl(0, 100%, 50%); /* 赤 */

背景の指定

.section {
	background-color: #f5f5f5; /* 背景色 */
	background-image: url('/img/sample1.jpg'); /* 背景画像 */
	background-size: cover; /* 画像をコンテナに合わせて拡大縮小 */
	background-position: center; /* 画像の位置 */
	background-repeat: no-repeat; /* 繰り返しなし */
}

各プロパティの詳細: color / background-color / background-image / background-size

フォントとテキスト

テキストの見た目を制御するプロパティです。

body {
	font-family: "Helvetica Neue", Arial, sans-serif; /* フォント（カンマ区切りで優先順） */
	font-size: 16px; /* 文字サイズ */
	font-weight: bold; /* 太さ: normal / bold / 100〜900 */
	font-style: italic; /* スタイル: normal / italic / oblique */
	line-height: 1.6; /* 行の高さ（単位なし推奨） */
	color: #333; /* 文字色 */
}

p {
	text-align: center; /* 揃え: left / right / center / justify */
	text-decoration: underline; /* 装飾: none / underline / line-through */
	letter-spacing: 0.05em; /* 文字間隔 */
	word-spacing: 4px; /* 単語間隔 */
}

各プロパティの詳細: font-family / font-size / font-weight / line-height / text-align

CSSの単位

CSSでは、サイズや距離を指定するための単位が複数用意されています。大きく分けて絶対単位（物理的な大きさが固定）と相対単位（何かを基準にした大きさ）の2種類があります。

絶対単位

単位	意味	用途
`px`	ピクセル。画面上の1ドットに相当	最も一般的な絶対単位。画面表示向け
`cm`, `mm`	センチメートル、ミリメートル	印刷向けのスタイルで使われることがある
`pt`	ポイント（1pt = 1/72インチ）	印刷向け。DTPの世界では標準的な単位

相対単位

単位	基準	使いどころ
`em`	親要素のフォントサイズ	テキスト関連のサイズ指定。入れ子で累積するため注意が必要
`rem`	ルート要素（`<html>`）のフォントサイズ	入れ子に影響されないため、`em` より扱いやすい場面が多い
`%`	親要素の対応するプロパティ	幅や高さの指定でよく使う。`width: 50%` は親の幅の半分
`vw`	ビューポート幅の1%	画面幅に連動するサイズ指定。`100vw` = 画面の横幅いっぱい
`vh`	ビューポート高さの1%	画面高さに連動するサイズ指定。`100vh` = 画面の高さいっぱい
`fr`	利用可能な空間の割合	CSS Grid 専用。`1fr 2fr` で 1:2 の比率に分割

html { font-size: 16px; } /* rem の基準 */

.text-sm { font-size: 0.875rem; } /* 14px 相当 */
.text-base { font-size: 1rem; } /* 16px 相当 */
.text-lg { font-size: 1.25rem; } /* 20px 相当 */

.container { width: 90%; max-width: 1200px; }
.hero { height: 100vh; } /* 画面の高さいっぱい */

ウェブ開発では『px』と『rem』を使う機会が多いです。『px』は直感的で分かりやすく、『rem』はルート要素のフォントサイズを変えるだけで全体のスケールを調整できます。レスポンシブデザインでは『%』、『vw』、『vh』も登場します。

display と visibility

要素の表示・非表示と、表示形式を制御するプロパティです。

display の主な値

/* block: 1行を占有、幅・高さを指定できる（divのデフォルト） */
.block { display: block; }

/* inline: 文中に配置、幅・高さは効かない（spanのデフォルト） */
.inline { display: inline; }

/* inline-block: 文中に配置しつつ幅・高さも指定できる */
.inline-block { display: inline-block; }

/* none: 要素を非表示（スペースごと消える） */
.hidden { display: none; }

/* flex: フレックスコンテナにする */
.flex { display: flex; }

/* grid: グリッドコンテナにする */
.grid { display: grid; }

visibility との違い

/* display: none — 要素が消え、スペースも詰まる */
.gone { display: none; }

/* visibility: hidden — 要素は見えないが、スペースはそのまま残る */
.invisible { visibility: hidden; }

詳細: display / visibility

position

要素の配置方法を指定します。position プロパティの値によって、top / right / bottom / left の効き方が変わります。

値	動作
`static`	デフォルト。通常の文書フローに従って配置。`top`等は効かない
`relative`	通常位置を基準に、`top`等でずらせる。元のスペースは保持
`absolute`	直近の `position: static` 以外の祖先要素を基準に絶対配置。文書フローから外れる
`fixed`	ビューポート（画面）を基準に固定配置。スクロールしても位置が変わらない
`sticky`	通常フローに従いつつ、スクロール時に指定位置で固定される

/* ページ右下に固定するボタン */
.to-top-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
}

/* 親要素の右上に重ねるバッジ */
.parent {
	position: relative; /* absolute の基準点になる */
}
.badge {
	position: absolute;
	top: 0;
	right: 0;
}

詳細はpositionで解説しています。

Flexbox

Flexbox（フレックスボックス）は、要素を1次元（横方向または縦方向）に並べるためのレイアウト機能です。ナビゲーション、カード並び、ボタングループなど、横並びのレイアウトに適しています。

/* コンテナ側の設定 */
.container {
	display: flex; /* フレックスコンテナにする */
	flex-direction: row; /* 並び方向: row（横）/ column（縦） */
	justify-content: space-between; /* 主軸方向の揃え方 */
	align-items: center; /* 交差軸方向の揃え方 */
	gap: 16px; /* アイテム間の余白 */
}

/* アイテム側の設定 */
.item {
	flex: 1; /* 余ったスペースを均等に分配して伸びる */
}

次のコードも別の記述例です。

<div class="container">
  <div class="item">碇シンジ</div>
  <div class="item">綾波レイ</div>
  <div class="item">惣流・アスカ・ラングレー</div>
</div>

justify-content と align-items の主な値

プロパティ	値	効果
`justify-content` （主軸方向）	`flex-start`	先頭揃え（デフォルト）
	`flex-end`	末尾揃え
	`center`	中央揃え
	`space-between`	両端に置き、残りを均等配置
`align-items` （交差軸方向）	`flex-start`	先頭揃え
	`center`	中央揃え
	`stretch`	コンテナの高さに引き伸ばす（デフォルト）

各プロパティの詳細: flex（ショートハンド） / flex-direction / justify-content / align-items

Grid

CSS Gridは、要素を2次元（縦横同時）に配置するためのレイアウト機能です。ページ全体のレイアウトや、タイル状のカードグリッドに適しています。

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; /* 3列（均等分割） */
	grid-template-rows: auto auto; /* 2行（内容に合わせた高さ） */
	gap: 16px; /* セル間の余白 */
}

次のコードも別の記述例です。

<div class="grid-container">
  <div>碇シンジ</div>
  <div>綾波レイ</div>
  <div>惣流・アスカ・ラングレー</div>
  <div>渚カヲル</div>
  <div>葛城ミサト</div>
</div>

fr 単位と repeat()

/* repeat(3, 1fr) は 1fr 1fr 1fr の省略形 */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3列均等 */
}

/* 固定幅 + 残りを伸縮 */
.sidebar-layout {
	display: grid;
	grid-template-columns: 240px 1fr; /* サイドバー固定 + メインコンテンツ */
}

GridはFlexboxと組み合わせて使うこともできます。「ページ全体のレイアウトはGrid、その中の要素の並びはFlex」というパターンが成立します。

各プロパティの詳細: align-content / gap / column-gap / row-gap

レスポンシブデザイン — メディアクエリ

メディアクエリは、画面サイズや解像度などの条件に応じてCSSを切り替える仕組みです。スマートフォン・タブレット・デスクトップで異なるレイアウトを提供するために使います。

/* デフォルト（モバイル向け） */
.container {
	width: 100%;
	padding: 16px;
}

/* 画面幅が768px以上のとき */
@media (min-width: 768px) {
	.container {
		max-width: 960px;
		margin: 0 auto;
		padding: 24px;
	}
}

/* 画面幅が1200px以上のとき */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

モバイルファーストの考え方

デフォルトスタイルをモバイル向けに書き、min-width で画面が大きくなるにつれてスタイルを追加していく書き方をモバイルファーストと呼びます。逆に max-width でデスクトップから狭めていく書き方もあります。どちらが正解というわけではなく、プロジェクトの性質によって使い分けられています。

代表的なブレイクポイント

ブレイクポイントとは、レイアウトが切り替わる画面幅の境界値です。デバイスの種類に応じて設定されることが多く、以下は広く参考にされている値です。

デバイス	画面幅の目安	メディアクエリの例
スマートフォン	〜767px	デフォルトスタイル（モバイルファーストの場合）
タブレット	768px〜1023px	`@media (min-width: 768px)`
デスクトップ	1024px〜	`@media (min-width: 1024px)`
ワイドスクリーン	1200px〜	`@media (min-width: 1200px)`

これらは絶対的な基準ではなく、プロジェクトごとにコンテンツの見え方に合わせて調整します。数値を暗記するよりも、「画面を狭めたときにレイアウトが崩れる幅」を見つけてブレイクポイントにする、という考え方が実用的です。

ビューポートメタタグ

レスポンシブデザインを機能させるには、HTMLの <head> に以下のメタタグが必要です。

<meta name="viewport" content="width=device-width, initial-scale=1">

このタグがないと、スマートフォンのブラウザがページをデスクトップ幅で描画し、全体を縮小して表示します。メディアクエリが意図通りに機能するための前提条件です。

/* Flexboxのレスポンシブ切り替えの例 */
.items {
	display: flex;
	flex-direction: column; /* モバイルは縦並び */
}

@media (min-width: 768px) {
	.items {
		flex-direction: row; /* タブレット以上は横並び */
	}
}

アニメーションとトランジション

CSSには動きを付けるための機能が2つあります。transition（トランジション）は状態の変化を滑らかにし、animation（アニメーション）はより複雑な動きを定義します。

transition — 状態変化を滑らかにする

.btn {
	background-color: #3498db;
	color: white;
	padding: 10px 20px;
	transition: background-color 0.3s ease; /* 変化するプロパティ・時間・イージング */
}

.btn:hover {
	background-color: #2980b9; /* ホバー時に滑らかに色が変わる */
}

animation — @keyframes で動きを定義する

/* 動きの定義 */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 要素に適用 */
.message {
	animation-name: fadeIn; /* 使う @keyframes の名前 */
	animation-duration: 0.4s; /* 1回分の時間 */
	animation-timing-function: ease; /* イージング */
	animation-fill-mode: forwards; /* 終了後に最終状態を保持 */
}

各プロパティの詳細: transition / transition-duration / animation / animation-name / animation-duration

ブラウザの開発者ツール — CSSデバッグの基本

CSSの問題を解決するとき、最も頼りになるのがブラウザに内蔵された開発者ツール（DevTools）です。全ての主要ブラウザ（Chrome、Firefox、Safari、Edge）に搭載されており、リアルタイムでCSSの適用状態を確認・変更できます。

開発者ツールの開き方

ブラウザ	Windows / Linux	macOS
Chrome / Edge	`F12` または `Ctrl + Shift + I`	`Cmd + Option + I`
Firefox	`F12` または `Ctrl + Shift + I`	`Cmd + Option + I`
Safari	—	`Cmd + Option + I`（開発メニューを有効化後）

あるいは、調べたい要素を右クリックして「検証」（Inspect）を選ぶと、その要素を選択した状態で開発者ツールが開きます。

Elementsパネル — 適用されているスタイルの確認

開発者ツールの「Elements」パネル（Firefoxでは「インスペクター」）では、選択した要素に適用されている全てのCSSルールを確認できます。

打ち消し線のスタイル — カスケーディングや詳細度で負けて上書きされたプロパティ。「なぜこのスタイルが効かないのか」の答えがここにある
Computedタブ — 最終的に適用された計算済みの値。カスケーディング・継承・デフォルト値の全てを考慮した結果が表示される
ボックスモデル図 — margin、border、padding、contentの各領域が数値付きで視覚化される。余白の問題を調べるときに重宝する

スタイルのリアルタイム編集

開発者ツール上でCSSの値を直接書き換えると、ページに即座に反映されます。色を変えてみる、余白を調整してみる、『display: none』で要素を隠してみるなど、試行錯誤しながらデザインを詰められます。

この変更はブラウザの表示上だけのもので、元のCSSファイルには影響しません。気に入った変更が見つかったら、開発者ツールで確認した値をCSSファイルに書き写す流れになります。

「スタイルが当たらない」ときの調べ方

CSSが意図通りに適用されない場合、開発者ツールで以下の手順で原因を特定できます。

対象の要素を右クリック →「検証」で選択
Stylesパネルで、自分が書いたCSSルールが表示されているか確認。表示されていなければセレクタが間違っている
プロパティに打ち消し線が付いていれば、より詳細度の高いルールに負けている。どのルールが勝っているかも表示されている
Computedタブで最終的な値を確認。継承された値なのか、デフォルト値なのかも分かる

開発者ツールを使いこなせるようになると、CSSの問題解決が格段に速くなります。「なぜこの見た目になっているのか」を推測ではなく事実として確認できるようになるためです。

よくあるミスと解決方法

よくあるミス1: スタイルが当たらない（セレクタの書き間違い）

クラスセレクタに . を付け忘れたり、IDセレクタに # を付け忘れるミスです。

/* NG: クラスに . がない — <p> 要素全体に当たってしまう */
highlight { color: red; }

/* OK */
.highlight { color: red; }

よくあるミス2: position: absolute が意図しない場所に配置される

position: absolute は、直近の position: static 以外の祖先要素を基準に配置されます。親要素に position: relative が設定されていないと、さらに上の要素（最終的には html 要素）が基準になります。

/* NG: 親に position がない — <html> が基準になってしまう */
.parent { width: 200px; height: 100px; }
.child { position: absolute; top: 0; right: 0; }

/* OK: 親に position: relative を付ける */
.parent { position: relative; width: 200px; height: 100px; }
.child { position: absolute; top: 0; right: 0; }

よくあるミス3: margin: auto が効かない

margin: auto は block 要素に width が指定されている場合にのみ中央寄せが効きます。

/* NG: width がないと中央寄せされない */
.box { margin: 0 auto; }

/* OK */
.box { width: 600px; margin: 0 auto; }

よくあるミス4: floatを使ったレイアウトが崩れる

float を使った要素は通常のフローから外れます。親要素の高さが0になって背景や境界線が消える現象（「親の高さが潰れる」）が起きることがあります。レイアウトにはFlexboxやGridを使う方法があります。

よくあるミス5: z-index が効かない

z-index は position が static 以外の要素にだけ効きます。

/* NG: position がないと z-index は効かない */
.overlay { z-index: 100; }

/* OK */
.overlay { position: relative; z-index: 100; }

コメントの書き方

CSSでコメントを書くための記法。コメントはブラウザに無視され、コードの意図を伝えたり、一時的にスタイルを無効化（コメントアウト）したりするために使います。

コメントの種類

種類	書き方	概要
ブロックコメント	/* テキスト */	1行でも複数行でも使える唯一の記法です。『/』から『/』までの範囲がコメントになります。

『//』はCSSの仕様に存在しないコメント記法です。一部のブラウザが誤動作する可能性があるため使用しません。

サンプル

/* ナビゲーション */
nav {
  display: flex;
  gap: 16px;
}

/*
  カード コンポーネント
  ホバー時に影をつけてリフトアップの演出をします。
*/
.card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* background-color: #f0f0f0; */ /* コメントアウト例 */
}

コメントの内容は自由です。主な使い道としては「なぜこう書いたか」「何をしているか」「TODO」「メモ」などのパターンが多く見られますが、必要だと思った内容を自由に記載してしまって問題ありません。詳細はコメント解説ページで解説しています。

ステップ	テーマ	ページ
1	環境構築と文法の基本	【環境構築】CSSの開発環境 .cssファイルの作成と実行方法 CSS文法の基本（プロパティと値）
2	セレクタ	element（要素セレクタ） class（クラスセレクタ） id（IDセレクタ） descendants（子孫セレクタ）
3	ボックスモデル	margin padding border box-sizing width height
4	色と背景	color background-color background-image background（ショートハンド）
5	フォントとテキスト	font-family font-size font-weight line-height text-align
6	表示形式と配置	display visibility position top right bottom left z-index
7	Flexbox	flex-direction justify-content align-items flex-wrap flex-grow flex-shrink flex-basis
8	Grid	gap align-content order
9	トランジションとアニメーション	transition transition-duration animation animation-name transform
10	疑似クラスと疑似要素・その他	:hover :nth-child ::before ::after var()（カスタムプロパティ） calc()

概要

CSS（Cascading Style Sheets）= HTMLの見た目を定義するスタイルシート言語。1994年にホーコン・ウィウム・リーさんが提案し、1996年にW3C勧告として公開された。「構造と見た目の分離」という設計思想に基づいており、HTMLが「何を表示するか」、CSSが「どう見せるか」を担当する。

3つの核心概念

カスケーディング — 同じ要素に複数のスタイルが当たったとき、後に書かれたものが優先（詳細度が高い方が勝つ）
詳細度 — IDセレクタ > クラスセレクタ > 要素セレクタの順に強い
継承 — color / font-* などは親から子へ引き継がれる。margin / border 等は引き継がれない

3つの適用方法

インラインスタイル（style 属性）— 詳細度が最強。管理しにくい
styleタグ — そのHTMLファイルにだけ効く
外部 .css ファイル — 複数ページで共有できる。最も一般的

主要なレイアウト機能

ボックスモデル — content → padding → border → margin の4層構造
Flexbox — 1方向の並び（横並び・縦並び）に強い
Grid — 縦横2方向のレイアウトに強い
position — absolute は直近の non-static 祖先が基準。fixed は画面固定
メディアクエリ — 画面幅に応じてスタイルを切り替える。モバイルファーストが主流

主要な単位

絶対単位: 『px』（ピクセル）、『pt』（ポイント、印刷向け）
相対単位: 『em』（親要素基準）、『rem』（ルート要素基準）、『%』（親基準）、『vw』/『vh』（画面基準）、『fr』（Grid専用）
ウェブ開発では『px』と『rem』が最も一般的

歴史と進化

1994年にホーコン・ウィウム・リーさんが提案、1996年にCSS1がW3C勧告
CSS2（1998年）で『position』『z-index』等が追加、CSS3からモジュール単位で独立した改訂方式に移行
「CSS4」は存在しない。Selectors Level 4、Flexbox Level 1のようにモジュールごとにレベルが異なる
詳しい歴史・系譜はIT用語 & 歴史辞典「CSS」を参照

デバッグの基本

ブラウザの開発者ツール（F12 / Cmd+Option+I）でCSSの適用状態をリアルタイムに確認・変更できる
打ち消し線 = カスケーディングで負けたプロパティ。Computedタブ = 最終的に適用された値
「なぜこの見た目になっているか」を推測ではなく事実として確認できるようになる

初めに押さえるとよいこと

セレクタ・詳細度・カスケーディングの仕組みを理解すると、「なぜスタイルが当たらないのか」のデバッグが速くなる
ボックスモデルと box-sizing: border-box はほぼ全てのレイアウトで登場する
Flexboxを使いこなせると、横並びレイアウトの大半に対応できる
CSSの単位は『px』と『rem』が基本。レスポンシブデザインでは『%』、『vw』、『vh』も活躍する
全部を一度に覚える必要はなく、作りたいものに合わせて必要なページを参照しながら学ぶのが現実的なアプローチ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

CSS辞典