HTML(18)Flexboxの使い方

HTMLを紹介している画像です。 HTML

【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円
(2024/12/16 23:17時点)
感想(2件)

前回はclassとIDの指定方法について説明しました。

HTML(17) classとIDの指定方法
今回はHTMLで使用するIDとclassの指定方法と使い分けについて紹介したいと思います。HTMLでは最も使う要素となります。
kamechannel.com
2024.12.07

今回はFrex boxの使い方について紹介します。

目次

  1. Flexboxとは？
  2. Flexboxの基本構造とプロパティ
  3. 実践：Flexboxで作る基本レイアウト
  4. Flexboxでレスポンシブデザインを作成する方法
  5. よくある質問とトラブルシューティング
  6. まとめ：Flexboxのメリットを最大限活用する

1. Flexboxとは？

Flexbox（正式名称：Flexible Box Layout）は、CSSで柔軟なレイアウトを実現するためのモジュールです。特に、要素を横並びや縦並びに簡単に配置し、余白や揃え方を効率的に管理できるのが特徴です。従来のCSSレイアウト（例えばfloatやtable）では難しかったレスポンシブデザインも、Flexboxならシンプルに実現できます。

Flexboxを使うべき場面

  • 要素を水平または垂直に並べたい場合
  • 要素を画面幅に応じて自動的に調整させたい場合
  • コンテンツを中央揃えしたい場合
  • レスポンシブなグリッドデザインを作りたい場合

2. Flexboxの基本構造とプロパティ

Flexboxを理解するためには、以下の2つの基本概念を知ることが重要です。

1. フレックスコンテナ（親要素）

Flexboxは、display: flex;を設定した親要素を基点として動作します。この親要素をフレックスコンテナと呼びます。

css
.container {
display: flex;
}

2. フレックスアイテム（子要素）

コンテナ内に含まれるすべての子要素が、フレックスアイテムとして動作します。これらのアイテムは、Flexboxのプロパティによって動的に配置が変わります。

主なFlexboxプロパティ一覧

フレックスコンテナ（親要素）に適用するプロパティ

プロパティ名 説明
flex-direction 子要素の配置方向を指定します。row（横方向）やcolumn（縦方向）を設定。
justify-content 子要素の水平方向の配置方法を指定します。center、space-betweenなど。
align-items 子要素の垂直方向の揃え方を指定します。
flex-wrap 子要素がコンテナ内に収まりきらない場合に折り返すかどうかを指定します。
gap（またはrow-gap, column-gap） 子要素間の間隔を設定します。

フレックスアイテム（子要素）に適用するプロパティ

プロパティ名 説明
flex-grow 子要素が余ったスペースをどれだけ埋めるかを指定します。
flex-shrink 子要素がどれだけ縮小できるかを指定します。
flex-basis 子要素の初期サイズを指定します。
align-self 個別のアイテムの揃え方を指定します。

3. 実践：Flexboxで作る基本レイアウト

ここからは、Flexboxを使った基本的なレイアウトを具体例を交えて解説します。

例1: 中央揃えのレイアウト

Flexboxを使うと、垂直・水平の中央揃えが非常に簡単にできます。

HTML

html
<div class="center-container">
<div class="center-item">中央揃え</div>
</div>

CSS

css
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* コンテナの高さを画面全体に設定 */
background-color: #f4f4f4;
}

.center-item {
padding: 20px;
background-color: #007BFF;
color: white;
border-radius: 5px;
}

例2: 水平に並ぶナビゲーションバー

HTML

html
<div class="navbar">
<div class="logo">LOGO</div>
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</div>

CSS

css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: #fff;
}

.menu a {
margin: 0 15px;
color: #fff;
text-decoration: none;
}

4. Flexboxでレスポンシブデザインを作成する方法

Flexboxとメディアクエリを組み合わせれば、デバイスの幅に応じたレスポンシブデザインが簡単に実現できます。

例3: レスポンシブなカードレイアウト

HTML

html
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>

CSS

css
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}

.card {
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ddd;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* メディアクエリでレスポンシブ対応 */
@media (max-width: 768px) {
.card {
flex: 1 1 100%;
max-width: 100%;
}
}

5. よくある質問とトラブルシューティング

Q: Flexboxで要素が意図した位置に配置されない場合、どうすればいいですか？

A: Flexboxの動作は、親要素と子要素の両方に影響されます。以下を確認してください：

  • 親要素にdisplay: flex;が設定されているか？
  • 過剰なマージンやパディングが設定されていないか？

Q: IEや古いブラウザでもFlexboxは使えますか？

A: Flexboxはほとんどのモダンブラウザでサポートされていますが、IE11では一部の機能が異なります。ポリフィルを検討してください。

6. まとめ：Flexboxのメリットを最大限活用する

Flexboxを使えば、CSSレイアウトの効率性が飛躍的に向上します。本記事で学んだ内容を参考に、ぜひあなたのWebデザインプロジェクトに取り入れてください！

さらに詳しいFlexboxの使い方を知りたい場合は、コメントでリクエストしてください！ 😊

以上がfrexboxでレイアウトの使い方でした。
次回はCSSグリッドでタイル型に並べる方法を紹介します。

スポンサーリンク