HTML/CSS学習シリーズ 第8回Flexboxの使い方を完全解説【横並びレイアウト・コピペOK・ショートカット付き】
この記事でできること
HTMLやCSSを勉強していると、
「画像と文章を横に並べたい」
「ボタンを横並びにしたい」
「なぜか縦に並んでしまう…」
こんな悩みにぶつかる人は多いです。
そんなときに活躍するのがFlexboxです。
この記事では、
* Flexboxとは何か
* 基本の使い方
* よく使うプロパティ
* コピペOKのサンプルコード
* よくあるエラー
* VS Codeショートカット
までまとめて紹介します。
⸻
Flexboxとは？
Flexboxとは、要素を自由に並べられるCSSのレイアウト機能です。
例えば
✅ 横並び
✅ 中央揃え
✅ 均等配置
✅ スマホ対応
などが簡単にできます。
昔は難しいCSSを書いていましたが、Flexboxなら数行で完成します。
⸻
Flexboxを使う準備
まずHTMLを書きます。
<div class="container">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JavaScript</div>
</div>
_____
CSSはこちら
.container{
display:flex;
}
.box{
background:#ffd9e6;
padding:20px;
margin:10px;
border-radius:10px;
}
すると３つのボックスが横並びになります。
display:flexとは？
一番大切なのが
display:flex;
この1行です。
これを書くことで
縦並び
↓
横並び
になります。
Flexboxはここから始まります。
⸻
真ん中に配置する
.container{
display:flex;
justify-content:center;
}
これで横方向の中央揃えになります。
⸻
縦方向の中央揃え
.container{
display:flex;
align-items:center;
height:300px;
}
⸻
均等に並べる
justify-content:space-between;
左右いっぱいひ広がります。
_____
justify-content:space-around;
均等に余白ができます。
__
justify-content:space-evenly;
全部同じ間隔になります。
最近はこれが一番使われます。
⸻
折り返し
画面が小さいと
flex-wrap:wrap;
を書くだけで折り返せます。
スマホ対応では必須です。
⸻
縦並びにする
flex-direction:column;
Flexboxでも縦並びに変更できます。
⸻
一括コピー用（HTML）
<div class="container">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JavaScript</div>
</div>
____
一括コピー用（CSS）
.container{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.box{
background:#ffd9e6;
padding:20px;
border-radius:10px;
font-weight:bold;
}
⸻
よくあるエラー
横並びにならない
display:flex;
を書き忘れていることが多いです。
⸻
間隔が空かない
gap
を使ってみましょう。
gap:20px;
⸻
中央にならない
親要素に
display:flex;
が付いているか確認してください。
⸻
ワンポイント
Flexboxは暗記するより、
「実際に数字を変えて動きを見る」
これが一番覚えやすいです。
例えば
gap:10px;
↓
gap:50px;
に変えるだけでも違いがよく分かります。
⸻
まとめ
FlexboxはHTML/CSSを勉強するなら必ず覚えたい機能です。
まずは
* display:flex
* justify-content
* align-items
* gap
* flex-wrap
この5つだけ覚えれば十分です。
ここまで使えるようになると、Webサイトらしいレイアウトが一気に作りやすくなります。
____
⸻
次回予告（第9回）
CSS Grid入門【初心者でもわかるレイアウトの作り方・コピペOK・ショートカット付き】
2次元レイアウトを簡単に作れるCSS Gridを、Flexboxとの違いも交えながらわかりやすく解説します。
