しかし、実際にレイアウトを組もうとすると、
次のような悩みが出てきます。

・要素を横に並べたいだけなのにCSSが複雑になる
・中央揃えが思った以上に難しい
・間隔を均等にしたいが計算が面倒

こうした問題を一気に解決してくれるのが、
Flexbox（フレックスボックス） です。

この記事では、
Flexboxの考え方と最低限覚えるプロパティ に絞って、
初心者向けに解説します。

この記事で学べること

・Flexboxとは何か
・Flexboxの基本的な考え方
・コンテナとアイテムの関係
・よく使うFlexboxプロパティ
・Flexboxでできること

Flexboxとは何か

Flexboxとは、
要素を柔軟に並べるためのCSSレイアウト手法です。

従来のレイアウトでは、

・float
・position
・inline-block

などを組み合わせる必要がありましたが、
Flexboxを使うことで、
これらを シンプルな指定 で実現できます。

Flexboxの基本構造

Flexboxには、
明確な役割分担があります。

・flexコンテナ
・flexアイテム

まず、この関係を理解することが重要です。

flexコンテナとは

flexコンテナとは、
Flexboxを適用する親要素です。

この要素に
display を指定することで、
中の要素の並び方を制御します。

flexアイテムとは

flexアイテムとは、
flexコンテナの直下にある子要素です。

Flexboxの指定は、
基本的にこの子要素に影響します。

Flexboxを有効にする

Flexboxを使うために必要なのは、
たった1つの指定です。

親要素を
フレックスコンテナにする
という意識を持ちましょう。

横並びが一瞬でできる理由

Flexboxを使うと、
ブロック要素でも
簡単に横並びになります。

これは、
Flexboxが
「並べ方を管理する仕組み」
だからです。

divが横に並ばない問題は、
Flexboxでほぼ解決します。

主軸と交差軸の考え方

Flexboxを理解するうえで、
重要な概念があります。

それが、

・主軸
・交差軸

です。

主軸とは

主軸とは、
要素が並ぶ方向です。

初期状態では、
左から右へ並びます。

交差軸とは

交差軸は、
主軸に対して直角の方向です。

縦方向の揃えは、
この交差軸で考えます。

justify-content（主軸の揃え）

justify-contentは、
主軸方向の揃え方を指定します。

よく使われる考え方は次のとおりです。

・左寄せ
・中央寄せ
・右寄せ
・均等配置

「横方向の配置」と思って問題ありません。

align-items（交差軸の揃え）

align-itemsは、
交差軸方向の揃え方を指定します。

よくある使いどころは、

・縦方向の中央揃え
・高さが違う要素の揃え

Flexboxで
縦中央揃えが簡単になる理由は、
このプロパティにあります。

Flexboxでできることまとめ

Flexboxを使うと、
次のようなことが簡単にできます。

・横並びレイアウト
・中央揃え（縦・横）
・間隔の均等配置
・高さが違う要素の整列

これらは、
実務で非常によく使われます。

初心者が最初に覚えるべきポイント

Flexboxは多機能ですが、
最初は次の点だけ覚えれば十分です。

・親要素に Flexbox を指定する
・主軸と交差軸を意識する
・justify-content と align-items

これだけで、
多くのレイアウトが組めるようになります。

display / position との関係

Flexboxは、
display や position の代替ではありません。

・display：並び方の基本
・position：位置調整
・Flexbox：柔軟な並び制御

用途ごとに
使い分けることが大切です。

なぜFlexboxが重要なのか

現代のWeb制作では、
Flexboxは 標準スキル です。

・管理画面
・カードレイアウト
・ヘッダーやフッター

ほぼすべての場面で使われます。

ここで基礎を押さえておくことで、
後の学習が非常に楽になります。

まとめ

Flexboxは、
CSSレイアウトを劇的に簡単にする仕組みです。

・親要素がコンテナ
・子要素がアイテム
・主軸と交差軸で考える

この3点を理解できれば、
Flexboxの基礎は十分です。

次は、
CSSで起きやすい崩れやトラブルの原因と切り分け方
を学び、CSS基礎を完成させます。

次に読むべき記事

▶ 次の記事
4-7 よくあるCSS崩れと原因の切り分け方

▶ 関連記事
4-5 レイアウトの基本（display / position）

しかし、
HTMLだけでページを作ると、
次のような状態になります。

・文字はすべて同じ見た目
・レイアウトが整っていない
・デザインがほとんどない

ここで登場するのが、
CSS（Cascading Style Sheets） です。

この記事では、
CSSとは何か
HTMLとCSSの役割分担
を中心に、CSS学習の土台となる考え方を整理します。

この記事で学べること

・CSSとは何か
・CSSが必要な理由
・HTMLとCSSの役割の違い
・CSS学習で最初に意識すべきポイント

CSSとは何か

CSSとは、
Webページの見た目を指定するための言語です。

CSSを使うことで、

・文字の色やサイズ
・余白や配置
・レイアウト構造

などを自由にコントロールできます。

HTMLが「構造」を作るのに対し、
CSSは 見た目とレイアウト を担当します。

なぜCSSが必要なのか

HTMLだけでも、
Webページは表示されます。

しかし、HTMLだけでは、

・読みづらい
・使いづらい
・デザイン性がない

という問題が出てきます。

CSSは、
情報を分かりやすく、使いやすく伝えるため
に欠かせない存在です。

HTMLとCSSの役割分担

Webページは、
主に次の2つで構成されています。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することが、
CSS学習の第一歩です。

HTMLの役割（おさらい）

HTMLは、

・見出し
・文章
・リンク
・フォーム

といった
ページの骨組み を作ります。

HTMLは、
「この部分は何か」を伝える言語です。

CSSの役割

CSSは、

・文字の大きさ
・色
・背景
・配置

など、
どう見せるか を指定します。

CSSは、
HTMLで作った構造に対して
「見た目のルール」を与える存在です。

CSSが分離されている理由

「HTMLに直接デザインを書けばいいのでは？」
と思うかもしれません。

しかし、
HTMLとCSSを分けることで、
次のメリットがあります。

・HTMLが読みやすくなる
・デザイン変更が簡単になる
・複数ページで使い回せる

これは、
保守性の高いWebサイト を作るための
重要な考え方です。

CSSはどこで使われるのか

CSSは、
次のような場所で使われます。

・個人ブログ
・企業サイト
・Webアプリケーション
・管理画面

見た目があるWebページには、
必ずCSSが使われていると言っても過言ではありません。

CSSは「後から」適用される

CSSは、
HTMLが読み込まれた後に適用されます。

そのため、

・同じHTMLでも
・CSSを変えるだけで

まったく違う見た目にすることが可能です。

この性質を理解しておくと、
CSSの考え方がぐっと楽になります。

初心者が最初につまずきやすい点

CSS学習の初期では、
次の点でつまずきやすくなります。

・CSSが効かない
・どこに書けばいいか分からない
・なぜ上書きされるのか分からない

これらは、
CSSの仕組みを理解することで
必ず解消できます。

これからCSSで学ぶこと

4章では、
次の内容を順番に学んでいきます。

・CSSの書き方
・セレクタの考え方
・レイアウトの基本
・よくある崩れの原因

「デザインセンス」ではなく、
ルールと仕組み を理解することが目的です。

まとめ

CSSは、
Webページの見た目を作るための言語です。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することで、
HTMLとCSSを正しく組み合わせられるようになります。

次は、
CSSを実際にどこに、どう書くのか
という具体的な書き方に進みます。

次に読むべき記事

▶ 次の記事
4-2 CSSの書き方（inline / internal / external）

▶ 関連記事
3-7 HTMLフォーム送信の仕組みを理解する（GET / POST）