CSSフレックスボックス完全ガイド｜初心者でもすぐ使えるFlexboxコードテンプレート集
生徒
「CSSのFlexboxって、毎回書き方を忘れてしまいます…」
先生
「よく使う形をテンプレートとして覚えると、とても楽になりますよ。」
生徒
「パソコンをあまり触ったことがなくても使えますか？」
先生
「大丈夫です。形をそのまま使えるように、順番に説明していきましょう。」
1. Flexboxのコードテンプレートを使う理由
Flexboxは、CSSでレイアウトを整えるための仕組みです。 レイアウトとは、文字や箱をどこに並べるかを決めることです。
初心者のうちは、毎回ゼロから考えると混乱しがちです。 そこで、よく使う形をテンプレートとして覚えると、 コピーして少し直すだけで使えるようになります。
これは、料理のレシピを見ながら作るのと同じ感覚です。 何度も使ううちに、自然と身についていきます。
2. 横並びにする基本テンプレート
Flexboxで一番よく使われるのが、横並びのレイアウトです。 メニューやボタンを横に並べたいときによく使います。
<style>
.flex-row {
display: flex;
}
</style>
<div class="flex-row">
<div>左</div>
<div>中央</div>
<div>右</div>
</div>
displayは「表示方法」という意味です。 flexを指定すると、中の要素が横に並びます。
3. 中央にそろえるテンプレート
画面の中央に要素を配置したい場面はとても多いです。 Flexboxを使うと、難しい計算をしなくても中央にできます。
<style>
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #eee;
}
</style>
<div class="center-box">
<div>中央</div>
</div>
justify-contentは横方向の位置、 align-itemsは縦方向の位置を決める命令です。
4. 均等に間隔をあけるテンプレート
ボタンやメニューを等間隔で並べたいときもFlexboxが便利です。 要素の数が変わっても、自動で調整されます。
<style>
.space-box {
display: flex;
justify-content: space-between;
}
</style>
<div class="space-box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
space-betweenは、両端をそろえて間を均等にします。 ナビゲーションメニューでよく使われます。
5. 縦並びにするテンプレート
Flexboxは横だけでなく、縦に並べることもできます。 スマートフォン画面のような縦配置で役立ちます。
<style>
.flex-column {
display: flex;
flex-direction: column;
}
</style>
<div class="flex-column">
<div>上</div>
<div>中</div>
<div>下</div>
</div>
flex-directionは並ぶ向きを指定します。 columnは縦方向という意味です。
6. よく使うFlexboxテンプレートを覚えるコツ
最初は意味を完璧に覚えなくても問題ありません。 まずは「横並び」「中央寄せ」「間隔調整」など、 使う場面とセットで覚えることが大切です。
テンプレートを何度も使うことで、 CSSとFlexboxの感覚が自然と身についていきます。 焦らず、同じ形を繰り返し使ってみてください。
まとめ
CSSのFlexboxは、Webページの中にある文字、ボタン、メニュー、カードなどの要素を横並びや縦並びに整えるための便利なレイアウト機能です。初心者のうちは、justify-contentやalign-items、flex-directionなどの名前を見ただけで難しく感じることがありますが、最初からすべてを暗記する必要はありません。よく使う形をFlexboxのコードテンプレートとして覚えておけば、必要な場面でコピーして使いながら少しずつ理解できます。
Flexboxで最も基本となる指定はdisplayにflexを設定することです。親となる要素にdisplay flexを指定すると、その中にある子要素をFlexboxの仕組みで並べられるようになります。初期状態では横方向に並ぶため、メニューやボタン、カードを横に配置したい場合にすぐ利用できます。CSS初心者は、まず親要素にdisplay flexを書くという基本から覚えると分かりやすいでしょう。
Flexboxで横並びを作る基本を確認しよう
Flexboxの代表的な使い方が横並びです。通常、divタグは上から下へ縦に並ぶことが多いですが、親要素にdisplay flexを指定すると、その中にある複数のdivタグを横方向へ並べることができます。ナビゲーションメニュー、商品一覧、プロフィール欄、ボタンの配置など、さまざまなWebデザインで利用できます。
<style>
.flex-menu {
display: flex;
}
</style>
<div class="flex-menu">
<div>ホーム</div>
<div>サービス</div>
<div>お問い合わせ</div>
</div>
この例では、flex-menuというclassを持つdivタグが親要素で、その中にある三つのdivタグが子要素です。親要素にdisplay flexを指定するだけで、子要素が横に並びます。Flexboxでは、どの要素にdisplay flexを指定するのかが重要です。横に並べたい要素そのものではなく、それらをまとめている親要素に指定すると覚えておきましょう。
justify-contentで横方向の位置を調整する
横並びにしたあとで、要素を中央に寄せたい、左右に広げたい、間隔を均等にしたいという場面があります。そのときによく使うのがjustify-contentです。通常の横並びでは、justify-contentは横方向の配置を調整するために使います。
justify-contentにcenterを指定すると中央寄せになります。space-betweenを指定すると、最初と最後の要素を両端に配置し、その間の空間を自動的に調整できます。Flexboxを使ったナビゲーションメニューやカード配置でもよく使われる設定です。
<style>
.center-menu {
display: flex;
justify-content: center;
gap: 20px;
}
</style>
<div class="center-menu">
<div>メニュー一</div>
<div>メニュー二</div>
<div>メニュー三</div>
</div>
このコードでは、三つの要素を横並びにして中央へ配置しています。gapはFlexboxで並べた要素同士の間隔を指定するために便利なCSSです。justify-contentで全体の位置を決め、gapで要素同士の間隔を調整すると、簡単に見やすい横並びレイアウトを作ることができます。
align-itemsで縦方向の位置をそろえる
Flexboxでは、横方向だけでなく縦方向の位置も簡単に調整できます。横並びの状態で縦方向の位置をそろえたいときに使うのがalign-itemsです。例えば、高さのあるボックスの中央に文字を配置したい場合にはalign-itemsにcenterを指定します。
<style>
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background-color: #eeeeee;
}
</style>
<div class="center-box">
<div>上下左右の中央</div>
</div>
justify-contentにcenter、align-itemsにもcenterを指定すると、要素を上下左右の中央へ配置できます。この組み合わせはFlexboxの中でも特によく使われます。画面中央にメッセージを表示したい場合や、カード内の文字を中央へ配置したい場合などに応用できます。
初心者は、justify-contentとalign-itemsの違いで迷うことがあります。基本の横並びでは、justify-contentが横方向、align-itemsが縦方向と覚えると理解しやすくなります。ただし、flex-directionで並ぶ方向を変更した場合には基準となる方向も変化するため、まずは基本の横並びで使い方を覚えるのがおすすめです。
flex-directionで縦並びにも変更できる
Flexboxという名前から横並び専用の機能だと思われることがありますが、flex-directionを指定すると縦方向にも並べられます。flex-directionにcolumnを指定すると、子要素を上から下へ縦に配置できます。スマートフォン向けのレイアウトや、縦に並べるメニューなどでも利用できます。
<style>
.vertical-menu {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>
<div class="vertical-menu">
<div>プロフィール</div>
<div>記事一覧</div>
<div>お問い合わせ</div>
</div>
この例では、flex-directionにcolumnを指定しているため、三つの要素が縦に並びます。columnは列という意味です。横並びのまま使う場合は初期状態のrowが利用されます。横ならrow、縦ならcolumnと覚えると、Flexboxの方向指定を理解しやすくなります。
space-betweenを使うと両端と間隔を整えられる
justify-contentの値としてよく使われるものにspace-betweenがあります。これを指定すると、最初の要素が左端、最後の要素が右端に配置され、その間にある空間が自動的に調整されます。ヘッダーの左側にサイト名、右側にメニューを配置するようなレイアウトにも利用できます。
<style>
.header-flex {
display: flex;
justify-content: space-between;
}
</style>
<div class="header-flex">
<div>サイト名</div>
<div>メニュー</div>
</div>
このようなCSSはWebサイトのヘッダーでよく使われます。左右の位置を細かく計算しなくても、Flexboxが自動で間隔を調整してくれるため、初心者でも比較的簡単にレイアウトできます。
Flexboxは親要素と子要素の関係を意識する
Flexboxを使うときに特に大切なのが、親要素と子要素の関係です。display flexを指定した要素が親になり、その直下にある要素がFlexboxで配置される子要素になります。この関係を理解していないと、CSSを書いたのに横並びにならないという失敗につながりやすくなります。
例えば、三つのカードを横に並べたい場合は、その三つのカードを囲んでいる要素にdisplay flexを指定します。一枚一枚のカードにdisplay flexを指定しても、三つのカード同士は横並びになりません。Flexboxでは何を並べたいのかを確認し、それらをまとめている一つ上の要素に指定することが重要です。
CSS初心者がFlexboxを練習するときは、まず外側に一つのdivタグを作り、その中に三つ程度のdivタグを入れる簡単なHTMLから始めると理解しやすくなります。そこへdisplay flex、justify-content、align-items、flex-directionなどを一つずつ追加し、ブラウザで変化を確認すると、それぞれの役割を覚えやすくなります。
よく使うFlexboxテンプレートは形で覚えると便利
Flexboxには多くのCSSプロパティがありますが、初心者が最初からすべて覚える必要はありません。まずは横並びならdisplay flex、中央配置ならjustify-content centerとalign-items center、縦並びならflex-direction column、左右に分けるならjustify-content space-betweenというように、目的とコードをセットで覚えると実用的です。
実際のWeb制作でも、似たようなFlexboxのコードを繰り返し使用する場面は多くあります。そのため、自分がよく使うCSSをテンプレートとして保存しておき、必要なときにコピーしてclass名や数値だけ変更する方法も便利です。何度も使ううちに、それぞれのプロパティの意味も自然に理解できるようになります。
Flexboxは、以前のCSSで必要だった複雑な位置調整を簡単にできる仕組みです。横並び、縦並び、中央寄せ、左右の間隔調整など、Webサイトで頻繁に必要になるレイアウトを少ないコードで作れます。特にメニュー、ボタン一覧、カード一覧、ヘッダー、プロフィール欄などではFlexboxを利用する機会が多くあります。
CSSのFlexboxを学ぶときは、プロパティ名だけを暗記するのではなく、実際にどのような配置になるのかをブラウザで確認することが大切です。display flexを書いたら横並びになる、justify-content centerを書いたら中央に寄る、flex-direction columnを書いたら縦並びになるという変化を目で見ることで、初心者でも仕組みを理解しやすくなります。
生徒
「Flexboxでは、最初にdisplay flexを書くことが基本なんですね。」
先生
「そうです。横や縦に並べたい子要素をまとめている親要素にdisplay flexを指定するところから始めます。」
生徒
「横方向の位置を変えるときはjustify-contentでしたよね。」
先生
「はい。基本の横並びなら、centerで中央寄せ、space-betweenで両端と間隔を調整できます。」
生徒
「縦方向の中央にしたいときはalign-itemsを使うんですね。」
先生
「その通りです。justify-contentとalign-itemsをどちらもcenterにすると、上下左右の中央に配置できます。」
生徒
「Flexboxで縦に並べることもできますか？」
先生
「できます。flex-directionにcolumnを指定すれば、子要素を上から下へ縦に並べられます。」
生徒
「毎回すべてのCSSを思い出せなくても大丈夫ですか？」
先生
「最初はテンプレートを使えば大丈夫です。横並び、中央寄せ、縦並び、左右に分ける形など、よく使うコードを目的ごとに覚えると使いやすくなります。」
生徒
「Flexboxでうまく並ばないときは、どこを確認すればいいでしょうか？」
先生
「まず、並べたい要素を囲んでいる親要素にdisplay flexが指定されているか確認しましょう。親要素と子要素の関係を意識すると、Flexboxの仕組みを理解しやすくなります。」
生徒
「コードをコピーして、値を変えながら試してみると覚えやすそうですね。」
先生
「はい。ブラウザで実際の配置を確認しながら、justify-contentやalign-items、flex-directionの値を変更すると、CSS Flexboxの基本が自然に身についていきます。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSS Flexboxとは何ですか？初心者でもわかるように教えてください
CSS Flexboxとは、WebデザインやHTMLレイアウトで要素を簡単に整列できるCSSのレイアウト手法です。横並びや縦並び、中央寄せなどを簡単に実現できるため、初心者のWeb制作やコーディング学習でも非常に人気があります。特にレスポンシブデザインにも強く、スマホ対応にも役立ちます。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
