CSSレイアウトとセレクタ
この章で得られるスキル：
- ✅ クラスセレクタを使える
- ✅ IDセレクタを使える
- ✅ Flexboxの仕組みを説明できる
- ✅ Flexboxで要素を横並びにできる
- ✅ Flexboxで要素を中央揃えにできる
- ✅ メディアクエリの仕組みを理解している
- ✅ メディアクエリでレスポンシブデザインを実装できる
Step 0: まず体験してみよう
説明の前に、まず Flexboxがないと何が困るのか を体験しよう。
シナリオ：ナビゲーションメニューを作る
以下のようなナビゲーションメニューを作りたいとする：
[ホーム] [私について] [お問い合わせ]
Flexboxがなかった時代は、要素を横並びにするのが非常に大変だった：
floatは本来、画像を文章の横に配置するためのプロパティ- レイアウトに使うのは本来の用途ではない
clearを忘れるとレイアウトが崩れる
では、 Flexbox を使うと、どうなるだろうか？
- floatを使った古い方法と、Flexboxを使った新しい方法のコード量を比較しよう
- なぜFlexboxの方がシンプルなのか考えてみよう（
display: flex;だけで横並びになるため） - floatの
.menu::afterを削除して、レイアウトが崩れることを確認しよう（Flexboxではこの処理が不要） - Flexboxが現代のレイアウト手法として主流になった理由を理解しよう
たったこれだけで横並びになる！
Step 1: クラスセレクタ
クラスセレクタ は、class属性を持つ要素にスタイルを適用する。
HTMLでクラスを指定
<p class="highlight">この段落は強調表示されます。</p>
<p>この段落は通常の表示です。</p>
<p class="highlight">この段落も強調表示されます。</p>
CSSでクラスセレクタを使う
.highlight {
background-color: yellow;
font-weight: bold;
}
- クラス名の前に
.（ドット）を付ける - 同じクラスを複数の要素に付けられる
- 1つの要素に複数のクラスを付けられる
複数のクラスを適用
<p class="highlight important">この段落は強調表示され、かつ重要です。</p>
.highlight {
background-color: yellow;
}
.important {
border-left: 5px solid red;
padding-left: 10px;
}
クラス名は 意味のある名前 を付けること。
- ✅ 良い例：
.highlight,.error-message,.primary-button - ❌ 悪い例：
.red,.big,.style1
見た目ではなく、役割や意味を表す名前にする。
- 新しいクラス（例：
.success）を追加して、緑色の背景を適用してみよう - なぜクラスは複数の要素に適用できるのか考えてみよう（再利用性を高めるため）
- 1つの要素に複数のクラスを適用して、スタイルが組み合わされることを確認しよう
- クラス名を見た目ではなく意味で命名することの重要性を理解しよう（
.redより.errorの方が良い）
Step 2: IDセレクタ
IDセレクタ は、id属性を持つ要素にスタイルを適用する。
HTMLでIDを指定
<div id="header">ヘッダー</div>
<div id="main-content">メインコンテンツ</div>
<div id="footer">フッター</div>
CSSでIDセレクタを使う
#header {
background-color: navy;
color: white;
padding: 20px;
}
#footer {
background-color: gray;
text-align: center;
}
- ID名の前に
#（ハッシュ）を付ける - IDは1つのページに1回しか使えない（重複不可）
クラスとIDの使い分け：
- クラス：複数回使う要素（
.button,.card,.item） - ID：1回しか使わない要素（
#header,#footer,#main-content）
実際には、 クラスを使う方が推奨される ことが多い。IDはJavaScriptで要素を特定する場合などに使う。
#headerの背景色を変更して、スタイルが適用されることを確認しよう- なぜIDは1ページに1回しか使えないのか考えてみよう（一意性を保つため）
- クラスとIDの違いを理解しよう（クラスは複数回、IDは1回のみ）
- 実務ではクラスを優先的に使うことを知ろう（柔軟性が高いため）
Step 3: Flexboxの基本
Flexbox は、要素を柔軟にレイアウトするための仕組みである。
Flexboxを有効にする
親要素に display: flex; を指定する：
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
.container {
display: flex;
}
これだけで、子要素が横並びになる。
Flexboxの用語
- Flexコンテナ：
display: flex;を指定した親要素 - Flexアイテム：Flexコンテナの直接の子要素
display: flex;を削除して、要素が縦並びに戻ることを確認しよう- なぜ
display: flex;だけで横並びになるのか考えてみよう（Flexboxのデフォルトが横並びだから） - Flexコンテナ（親）とFlexアイテム（子）の関係を理解しよう
- 従来のfloatやinline-blockと比べて、Flexboxがいかにシンプルかを実感しよう
Step 4: Flexboxで横並び
基本的な横並び
.container {
display: flex;
}
デフォルトで横並び（flex-direction: row;）になる。
縦並びにする
.container {
display: flex;
flex-direction: column;
}
アイテム間の間隔を空ける
.container {
display: flex;
gap: 20px; /* アイテム間の間隔 */
}
gapは、Flexboxやグリッドレイアウトで使える便利なプロパティである。
従来はmarginで間隔を空けていたが、gapを使う方がシンプルで分かりやすい。
実務では、gapを積極的に使うことが推奨される。
flex-direction: row;をflex-direction: column;に変更して、縦並びになることを確認しようgapの値を変更して、間隔が変わることを確認しよう- なぜgapを使う方が良いのか考えてみよう（marginだと最初や最後の要素にも余白ができてしまうため）
- Flexboxの方向を自由に切り替えられることの便利さを理解しよう
Step 5: Flexboxで中央揃え
横方向の配置：justify-content
.container {
display: flex;
justify-content: center; /* 中央揃え */
}
主な値：
flex-start：左揃え（デフォルト）flex-end：右揃えcenter：中央揃えspace-between：両端揃え（間隔を均等に）space-around：全体に均等な間隔
縦方向の配置：align-items
.container {
display: flex;
align-items: center; /* 縦方向の中央揃え */
height: 200px;
}
主な値：
flex-start：上揃えflex-end：下揃えcenter：中央揃えstretch：伸ばす（デフォルト）
完全な中央揃え
.container {
display: flex;
justify-content: center; /* 横方向の中央 */
align-items: center; /* 縦方向の中央 */
height: 300px;
}
justify-contentをflex-start、flex-end、space-betweenに変更して、配置が変わることを確認しようalign-itemsをflex-start、flex-endに変更して、縦方向の配置が変わることを確認しよう- なぜjustify-contentとalign-itemsの2つが必要なのか考えてみよう（横と縦の方向を別々に制御するため）
- 完全な中央揃えが、わずか2つのプロパティで実現できることの便利さを理解しよう
Step 6: メディアクエリの基本
メディアクエリ は、画面サイズに応じてスタイルを変更する仕組みである。
基本的な使い方
/* 通常のスタイル */
.container {
display: flex;
flex-direction: column;
}
/* 画面幅が768px以上の場合 */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
- スマートフォン（幅が狭い）では縦並び
- タブレット・PC（幅が広い）では横並び
よく使うブレークポイント
| デバイス | 幅 | メディアクエリ |
|---|---|---|
| スマートフォン | 〜767px | デフォルト |
| タブレット | 768px〜 | @media (min-width: 768px) |
| PC | 1024px〜 | @media (min-width: 1024px) |
現代のWeb開発では、 モバイルファースト が推奨される。
- まずスマートフォン向けのスタイルを書く
@media (min-width: ...)で大きい画面向けのスタイルを追加
この方が、シンプルで保守しやすい。
実際のユーザーの多くがスマートフォンからアクセスするため、モバイル向けのデザインを優先することが重要である。
- ブラウザの幅を変更して、レイアウトが切り替わることを確認しよう
min-width: 768pxの値を変更して、切り替わるタイミングが変わることを確認しよう- なぜモバイルファーストが推奨されるのか考えてみよう（スマートフォンユーザーが多いため）
- メディアクエリがレスポンシブデザインの核心であることを理解しよう
Step 7: レスポンシブデザインの実装
例：レスポンシブなカードレイアウト
<div class="card-container">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
.card-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.card {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
/* タブレット以上：2列 */
@media (min-width: 768px) {
.card-container {
flex-direction: row;
flex-wrap: wrap;
}
.card {
width: calc(50% - 10px);
}
}
/* PC以上：3列 */
@media (min-width: 1024px) {
.card {
width: calc(33.333% - 14px);
}
}
flex-wrap: wrap;：折り返しを許可calc()：計算式でサイズを指定
flex-wrap: wrap;を削除して、カードが折り返されなくなることを確認しようcalc(50% - 8px)の意味を考えてみよう（50%の幅から、gapの半分を引いている）- 画面幅を変更して、カードが1列→2列に変化することを確認しよう
- 実際のWebサイトで、このようなレスポンシブなカードレイアウトがよく使われていることを観察しよう
コラム：なぜfloatは時代遅れなのか
floatの本来の目的
floatプロパティは、もともと 画像を文章の横に配置する ために作られた。
img {
float: left;
margin-right: 10px;
}
これにより、雑誌や新聞のように、画像の周りを文章が回り込むレイアウトが可能になる。
floatがレイアウトに使われた理由
Flexboxが登場する前（2010年代前半まで）、Webデザイナーは 要素を横並びにする手段がなかった。 そのため、floatを 本来の目的とは異なる レイアウトツールとして使わざるを得なかった。
floatの問題点：
-
clearfixが必要
.container::after {
content: "";
display: block;
clear: both;
}→ これを忘れるとレイアウトが崩れる
-
直感的でない → 「左に浮かせる」という概念が、横並びレイアウトとしては分かりにくい
-
中央揃えが難しい → floatでは要素を中央に配置するのが非常に複雑
-
柔軟性がない → 画面サイズに応じた柔軟なレイアウトが困難
Flexboxの登場
2010年代後半、Flexboxが主要ブラウザでサポートされるようになった。
Flexboxの利点：
-
シンプル
.container {
display: flex;
}→ たったこれだけで横並びになる
-
直感的 → 「横並び」「中央揃え」などの概念が明確
-
柔軟 → 画面サイズに応じて自動調整
-
保守しやすい → コードが短く、意図が明確
現代のWeb開発
❌ floatはレイアウトに使わない
- floatは画像の回り込みなど、本来の用途のみに使う
✅ Flexboxを使う
- 横並び、縦並び、中央揃えなど、すべてFlexboxで実現できる
古い記事やチュートリアルには、floatを使ったレイアウト手法が載っている場合がある。
しかし、 現代ではFlexboxを使うべき である。floatは過去の遺物として認識しておこう。
実務での注意点
- 既存のコード：古いプロジェクトでfloatを見かけることがある
- リファクタリングする場合は、Flexboxに置き換えることを検討する
- 学習：floatの仕組みは知っておくと良いが、新規プロジェクトでは使わない
- 互換性：Flexboxは現代のすべてのブラウザでサポートされている
演習
この章で学んだ内容を確認するため、以下の演習問題に取り組んでください。
演習問題は、docs/src/questions/frontend/css_layout/フォルダにあります：
- w1.mdx: クラスセレクタを使える
- w2.mdx: IDセレクタを使える
- k1.mdx: Flexboxの仕組みを説明できる
- w3.mdx: Flexboxで要素を横並びにできる
- w4.mdx: Flexboxで要素を中央揃えにできる
- k2.mdx: メディアクエリの仕組みを理解している
- w5.mdx: メディアクエリでレスポンシブデザインを実装できる
まとめ
この章では、 CSSレイアウトとセレクタ について学んだ。
🎯 達成できたこと
- ✅ クラスセレクタとIDセレクタを使えるようになった
- ✅ Flexboxで要素を横並び・縦並びにできるようになった
- ✅ Flexboxで中央揃えができるようになった
- ✅ メディアクエリでレスポンシブデザインを実装できるようになった
📚 学んだ内容
- クラスセレクタ（
.class）は 複数回使える、IDセレクタ（#id）は 1回のみ - Flexboxは
display: flex;で有効にする justify-contentで横方向、align-itemsで縦方向の配置を制御- メディアクエリで画面サイズに応じてスタイルを変更できる
- モバイルファースト の考え方が推奨される
- floatはレイアウトに使わず、Flexboxを使う
🚀 次のステップ
次の章では、 HTMLフォーム について学ぶ。 ユーザーから情報を入力してもらうためのフォーム要素を習得する。
💡 よくある質問
Q1: クラス名やID名の命名規則は？
A: 一般的に、以下のような規則が推奨される：
- ケバブケース（推奨）：
primary-button,error-message - キャメルケース：
primaryButton,errorMessage - スネークケース：
primary_button（あまり使われない）
禁止事項：
- 数字から始まる名前（例：
1st-item） - 特殊文字（例：
my-button!）
Q2: Flexboxとグリッドレイアウトの違いは？
A:
- Flexbox：1次元レイアウト（横並びまたは縦並び）
- Grid：2次元レイアウト（行と列を同時に制御）
Flexboxの方がシンプルで、多くの場合はFlexboxで十分である。
Q3: justify-contentとalign-itemsはどう覚えれば良いのか？
A:
- justify-content：主軸（デフォルトは横方向）の配置
- align-items：交差軸（デフォルトは縦方向）の配置
「justify（正当化）」は横書きの文章の揃え方（左揃え、中央揃えなど）を連想すると覚えやすい。
Q4: レスポンシブデザインは必須か？
A: 現代のWeb開発では ほぼ必須 である。
スマートフォンでWebサイトを閲覧するユーザーが非常に多いため、スマートフォンに対応していないサイトは使いにくいと感じられる。
Q5: flex-wrapとは何か？
A: Flexアイテムが親要素の幅を超えた場合に、折り返すかどうかを指定する：
.container {
display: flex;
flex-wrap: wrap; /* 折り返す */
}
nowrap（デフォルト）：折り返さないwrap：折り返すwrap-reverse：逆方向に折り返す
Q6: メディアクエリは何個書くべきか？
A: 必要な分だけ書けば良い。
一般的には、2〜3個程度が多い：
/* スマートフォン（デフォルト） */
/* タブレット */
@media (min-width: 768px) {
/* ... */
}
/* PC */
@media (min-width: 1024px) {
/* ... */
}
デザインによっては、もっと細かく分ける場合もある。
Q7: Flexboxで要素の順序を変えられるか？
A: できる。orderプロパティを使う：
.item1 {
order: 2;
}
.item2 {
order: 1;
}
.item3 {
order: 3;
}
デフォルトはorder: 0;で、数値が小さい順に表示される。
HTMLの順序を変えずに、CSSだけで表示順序を変更できる。
Q8: floatは全く使わないのか？
A: レイアウトには使わない が、画像の回り込みなど 本来の用途では使う。
/* 画像を左に配置し、文章を回り込ませる */
img {
float: left;
margin-right: 10px;
}
ただし、Flexboxでも同様のレイアウトが可能なため、floatを使う場面は減っている。