フレックスボックスレイアウトの基本と実用デザイン例｜HTML&CSSで学ぶレイアウト術

Webページのレイアウトを整えるうえで、CSSのFlexbox（フレックスボックス）は欠かせない存在となっています。従来のfloatやinline-blockに比べて、柔軟で直感的な配置が可能なFlexboxは、初心者でも扱いやすく、レスポンシブデザインにも強いのが特徴です。本記事では、Flexboxの基本的な使い方から、具体的なレイアウト例までをHTMLとCSSのコード付きで詳しく解説します。これからWeb制作を始める方や、CSS設計を見直したい方にぴったりの内容です。

フレックスボックスとは何か？

Flexbox（フレキシブル・ボックス・レイアウト）は、CSS3から導入されたレイアウト方法で、親要素とその子要素に適用して使います。Flexboxは、一方向にアイテムを並べて、それを柔軟に配置するための仕組みです。

例えば、アイテムを横一列に並べたり、均等にスペースを分けたり、中央寄せにしたりといった操作が非常に簡単に行えます。

Flexboxの基本構造は次のとおりです：

.parent {
  display: flex;
}

これだけで、.parent要素内の子要素は横方向に並び始めます。

基本プロパティの解説

フレックスボックスで使う主なプロパティを紹介します。

親要素に使うプロパティ

  • display: flex;
    フレックスボックスの起点となる指定。
  • flex-direction
    子要素の並び方向を決めます。
    値：row（横並び・初期値）、column（縦並び）
  • justify-content
    主軸方向（横または縦）の並び方を指定。
    例：flex-start, center, space-between, space-around
  • align-items
    交差軸方向の整列方法を指定。
    例：stretch, center, flex-start, flex-end
  • flex-wrap
    要素がはみ出すときの折返し。
    値：nowrap（初期値）, wrap, wrap-reverse

子要素に使うプロパティ

  • flex
    要素の伸縮性を指定。例：flex: 1
  • align-self
    特定の子要素だけに異なるalign-itemsを指定可能。

実用デザイン例①：横並びのナビゲーションメニュー

HTMLコード

<nav class="nav">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">会社情報</a>
  <a href="#">お問い合わせ</a>
</nav>

CSSコード

.nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1em;
}
.nav a {
  color: white;
  text-decoration: none;
  padding: 0.5em 1em;
}
.nav a:hover {
  background-color: #555;
}

解説：
justify-content: space-around;で、リンクを均等に配置。見た目が整ったナビゲーションが簡単に作れます。

実用デザイン例②：カード型の3カラムレイアウト

HTMLコード

<section class="cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</section>

CSSコード

.cards {
  display: flex;
  gap: 1em;
}
.card {
  flex: 1;
  padding: 2em;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 8px;
}

解説：
flex: 1でカードを同じ幅にし、gapで余白を確保。ブロックが自然に横並びになり、整った3列デザインに。

実用デザイン例③：中央寄せのボックス配置

HTMLコード

<div class="container">
  <div class="box">中央のボックス</div>
</div>

CSSコード

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #e0e0e0;
}
.box {
  padding: 2em;
  background-color: #fff;
  border: 1px solid #ccc;
}

解説：
justify-content: centerとalign-items: centerの組み合わせで、ボックスを縦横ともに中央に配置できます。

レスポンシブ対応も簡単

Flexboxは、メディアクエリと組み合わせることで、レスポンシブデザインにも柔軟に対応できます。

例：スマホでは縦並びに変更

@media (max-width: 768px) {
  .cards {
    flex-direction: column;
  }
}

フレックスボックスが活躍するシーン

  • ヘッダーやフッターの左右分割
  • サイドバー＋メインコンテンツの2カラム
  • ギャラリーの均等配置
  • フォーム要素の横並び
  • ログイン画面の中央配置

など、UI設計全般で大活躍します。

まとめ｜Flexboxでレイアウトの悩みを解決しよう

Flexboxを使いこなせるようになると、CSSレイアウトの自由度が格段にアップします。特に、初心者にありがちな「どうやって横並びにするの？」「中央に寄せたいけど難しい」といった悩みをスッと解決できるのがFlexboxの魅力です。

今回紹介した基本とレイアウト例をぜひコピーして、自分のWebページで試してみてください。慣れてくれば、複雑なレイアウトも怖くなくなりますよ！

タイトルとURLをコピーしました