これまで、HTMLでWebサイトの「骨組み」を作り、CSSで「見た目」を整える方法を学んできました。でも、作った要素がただ縦に並んでいるだけでは、なかなかイメージ通りのWebサイトになりませんよね。
そこで、Webページの配置を自由自在に操るためのCSSの力が登場します。今回は、特に重要で現代のWeb制作に欠かせない**「Flexbox（フレックスボックス）」**というレイアウト方法について、初心者の方でもすぐに使えるように、その基本的な考え方と使い方を解説します。
Flexboxの基本概念：親と子で配置を操る
Flexboxは、要素を横や縦に並べたり、中央に寄せたり、均等に配置したりするのにとても便利なツールです。
Flexboxを使う上で大切なのは、**「親要素（コンテナ）」と「子要素（アイテム）」**という2つの役割を理解することです。
- 親要素（コンテナ）：Flexboxのコンテナとなる要素です。この要素に「
display: flex;」という魔法をかけることで、その中の子要素の並べ方をコントロールできるようになります。 - 子要素（アイテム）：親要素の中に並ぶ、一つひとつの要素です。これらの要素が、親の指示に従って並びます。
イメージとしては、親が子に「一列に並んで！」や「等間隔に並んで！」と指示を出すようなものです。
Flexboxの使い方：3つのプロパティで実践！
実際にFlexboxを使って、要素を横並びにしてみましょう。
HTML
HTML
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
CSS
CSS
/* 親要素にFlexboxを適用する */
.container {
display: flex; /* これがFlexboxを有効にする魔法 */
}
/* 親要素の中での子要素の並び方を決めるプロパティ */
.container {
justify-content: center; /* 子要素を横方向の中央に寄せる */
align-items: center; /* 子要素を縦方向の中央に寄せる */
}
たったこれだけで、3つのdiv要素が横並びになり、さらに中央に配置されます。
display: flex;：まずこのプロパティを親要素に書くことで、Flexboxが使えるようになります。justify-content：子要素の横方向の配置を決めます。centerの他にflex-start（左寄せ）、flex-end（右寄せ）、space-between（両端に寄せて等間隔に配置）などがあります。align-items：子要素の縦方向の配置を決めます。centerの他にflex-start（上寄せ）、flex-end（下寄せ）などがあります。
まとめ：FlexboxでWebデザインはもっと楽しくなる！
Flexboxをマスターすれば、今まで難しかったWebページのレイアウトが、驚くほど簡単にできるようになります。ヘッダーのナビゲーションメニュー、写真のギャラリー、カード形式のコンテンツなど、現代のWebサイトでよく見かけるレイアウトの多くはFlexboxで作られています。
まずは、今回紹介したdisplay: flex;と2つのプロパティを使って、Webページの配置を変えてみてください。あなたが思い描くデザインを、より自由に表現できるようになるはずです。
