CSS
PR

【CSS 3-1】レイアウトの入口｜Flexの最小で“並び方”を整える（初心者向け）

CSS3-1_compressed_re.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は CSS 3-1「レイアウトの入口」です。
ここでは Flex を使って、要素の並び方を最小だけ触ります。
最初は “横に並ぶ・縦に並ぶ・間が空く” が分かれば十分です。

ここまでの CSS では、
色、余白、箱の感覚を使って、
1ページの見た目を少しずつ整えてきました。

次に気になってくるのが、
「要素どうしを、どう並べるか」です。

たとえば、
画像の横に文章を置きたい、
項目をきれいに並べたい、
という場面です。

今日はその入口として、
Flex の最小
だけを使いながら、
“並び方の感覚”をつかんでいきます。

Q
「Flex は“要素を並べるための最初の道具”です」

最初はこの覚え方で大丈夫です。

  • display: flex; → 横に並びやすくする
  • gap: 24px; → 要素どうしの間を空ける
  • flex-direction: column; → 縦並びにする

つまり、
「並べる」「間を空ける」「向きを変える」
の3つです。

ここを押さえるだけでも、
自己紹介ページの「画像＋文章」や、
プロフィール項目の並びがかなり扱いやすくなります。

目次
  1. 今回のゴール
  2. まずは完成形を見る
  3. どこを見ればいい？
  4. Flex は“親に書く”のが最初のポイントです
  5. display: flex; は“横並びの入口”です
  6. gap は“要素どうしの間”を作ります
  7. flex-direction で“縦・横並び”を変えられます
  8. align-items は“上をそろえる”くらいで十分です
  9. よくあるつまずき
  10. 今回のまとめ
  11. 今日のゴール確認
  12. CSS 3-2へ
ここまでできればOK

今回のゴール

  • Flex を使うと、要素の並び方を変えやすいと分かる
  • display: flex; の役割が分かる
  • gap で要素の間隔を作れる
  • flex-direction で横並び・縦並びを切り替えられる
  • 次の制作や実用ページへ進む準備ができる
コピペOK

まずは完成形を見る

今回は、画像と文章を横に並べる最小の形を作ります。
前回までのHTMLに追加してもよいですし、確認用として下の形をそのまま使っても大丈夫です。
※sample.jpg はご自身のプロフィールに使いたい画像をご用意ください。

<main>
  <h1>CSS 3-1 レイアウトの入口</h1>

  <section class="profile-layout">
    <img src="sample.jpg" alt="プロフィール用のサンプル画像" />

    <div class="profile-text">
      <h2>サンプルプロフィール</h2>
      <p>今回は、Flex を使って画像と文章を並べる練習をします。</p>
      <p>この形は、あとで自己紹介ページを作る時にもそのまま使いやすいです。</p>
    </div>
  </section>
</main>
HTML

style.css には、下のコードを追加してください。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
}

main {
  background-color: #ffffff;
  width: 720px;
  padding: 24px;
  margin: 24px auto 0;
  border: 1px solid #d1d5db;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-bottom: 16px;
}

h2 {
  color: #111827;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
}

p {
  font-size: 16px;
  margin-bottom: 12px;
}

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}

.profile-layout img {
  width: 200px;
  height: auto;
  margin: 0;
  border: 1px solid #e5e7eb;
}

.profile-text {
  flex: 1;
}
CSS
toshi
toshi

今回は “おしゃれに配置する” というより、
“画像と文章が並ぶ仕組み” を見る回です。

変化のポイント

どこを見ればいい？

追加したもの変わること
display: flex;子要素が横に並びやすくなる
gap: 24px;要素どうしの間に余白ができる
align-items: flex-start;上の位置をそろえやすくなる
.profile-text { flex: 1; }文章側が残り幅を使いやすくなる
ポイント①

Flex は“親に書く”のが最初のポイントです

どこに書く？役割
親要素（.profile-layout）子要素の並び方を決める
子要素（img や .profile-text）大きさや見た目を整える

今回のいちばん大事な所はここです。

Flex は、
並べたい要素を包んでいる親
に書きます。

つまり今回は、

<section class="profile-layout">
  <img src="sample.jpg" alt="プロフィール用のサンプル画像" />
  <div class="profile-text">
    ...
  </div>
</section>
HTML

の profile-layout が親です。

この親に display: flex; を書くことで、
中の画像と文章が並びやすくなります。

CSSの書き方①

display: flex; は“横並びの入口”です

まずはこれだけでも変化が見えます。

.profile-layout {
  display: flex;
}
CSS

これを書くと、
画像と文章が横に並びやすくなります。

最初は “Flex = まず横に並べるための入口” くらいの理解で大丈夫です。
細かい指定は、あとから少しずつ増やせばOKです。

CSSの書き方②

gap は“要素どうしの間”を作ります

横に並んでも、要素どうしがくっついていると見にくいです。

そんな時に使いやすいのが gap です。

たとえば、

.profile-layout {
  display: flex;
  gap: 24px;
}
CSS

と書くと、
画像と文章の間に 24px のすき間ができます。

  • gap の数字を大きくすると、間が広がる
  • gap の数字を小さくすると、間が狭くなる
  • 最初は 16px〜24px くらいで違いを見ると分かりやすい
CSSの書き方③

flex-direction で“縦・横並び”を変えられます

指定どんな並びになる？
flex-direction: row;横並び
flex-direction: column;縦並び

Flex は横並びの印象が強いですが、
向きを変えることもできます。

たとえば、

.profile-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
CSS

と書くと、
今度は画像と文章が縦に並びます。

toshi
toshi

row と column を切り替えてみるだけでも、
Flex の感覚はかなりつかみやすいです。

CSSの書き方④

align-items は“上をそろえる”くらいで十分です

画像と文章を横に並べる時、
少し位置がずれて見えることがあります。

そんな時は、

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
CSS

としておくと、
上側がそろいやすくなります。

今は “上をそろえるための指定” くらいで大丈夫です。

少しだけ変えてみる（練習）
  • gap を 24px → 40px にしてみる
  • img の width を 200px → 160px にしてみる
  • flex-direction: column; に変えてみる
  • もう一度 row に戻してみる
  • “親に書く指定” と “子に書く指定” を見分けながら確認する
toshi
toshi

この回は、細かく覚えるより
“どの行で並び方が変わるか” を観察できれば十分です。

ここだけ確認

よくあるつまずき

Q
「横並びにならない」

いちばん多いのは、
display: flex; を子要素側に書いてしまうことです。

今回は、
img や .profile-text ではなく、
それらを包んでいる .profile-layout に書きます。

“並び方は親が決める”
と覚えておくと進みやすいです。

Q
「gap を書いたのに間が空かない」

gap も親要素に書きます。

たとえば、

.profile-layout {
  display: flex;
  gap: 24px;
}
CSS

のように、display: flex; と同じ所に書くと分かりやすいです。

Q
「画像が大きすぎてバランスが崩れる」

その時は img の width を小さくしてみてください。

たとえば、

.profile-layout img {
  width: 160px;
}
CSS

のように変えると、
文章とのバランスが見やすくなります。

Q
「横並びと縦並びがまだ混ざる」

それは普通です。

最初はこう覚えるだけで大丈夫です。

・row → 横
・column → 縦

毎回見直してOKです。
使いながら自然に分かれてきます。

ここだけ押さえればOK

今回のまとめ

  • Flex は要素の並び方を整えるための入口
  • display: flex; は親に書く
  • gap は要素どうしの間を空ける
  • flex-direction で横並び・縦並びを切り替えられる
  • 今回は “並び方の基本” がつかめれば十分
できた判定

今日のゴール確認

ここまでできたらOKです。

  • Flex の最小で並び方を触れた
  • 横並び、縦並び、間隔の基本が分かった
  • 画像と文章を並べる感覚が少し持てた
  • 次の制作や実用ページに進みやすくなった

※参考ようにzipファイルを置いておきます。
※階層は以下の用になっております。

CSS3-1/
　├─ index.html
　├─ style.css
　└─ images/
　　　　└─ sample.jpg

CSS3-1ダウンロード
次に読む

CSS 3-2へ

ここまでで、
レイアウトの入口としての Flex を最小で触れました。

次は、
CSSが効かない、崩れる、思った見た目にならない、
といった “つまずきやすい所” を整理してから、
後半の実用ページ制作へ進みます。

次へ：CSS 3-2 よくあるつまずきへ進む
PR：最初の1冊（必要な方だけ）

PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

PR : 1冊ですべて身につくHTML & CSSとWebデザイン入門講座を読み終えた方へ
CSSの勉強に的を絞り、不要な情報を排除した模擬コーディングに重点を置いた1冊をここで置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました