CSS Flexboxで縦並びのレイアウトを作る方法と応用例

はじめに

CSSはWebページを装飾するために欠かせない言語です。

CSSを使うことで、HTMLで作成したページをより見栄えの良いものにすることができます。

特に、Flexboxという機能を使うことで、縦並びのレイアウトを作ることができます。

この記事では、Flexboxを使った縦並びのレイアウトを作る方法と応用例を初心者向けに詳しく解説します。

●Flexboxとは？

Flexboxは、現代のウェブデザインにおいて非常に有用なレイアウト技術の一つとなっています。

その名前からも分かる通り、要素を柔軟に配置し、異なるデバイスや画面サイズに適応させるためのツールです。

そして、この技術をうまく活用することで、ウェブページのデザインや構造をより効果的に作成することができます。

○Flexboxの基本的な仕組み

Flexboxを使用するための最初のステップは、display: flex;のプロパティを親要素に適用することです。

これにより、その親要素内の子要素は自動的にFlexboxの挙動を持つようになります。

下記のコードは、簡単なFlexboxのレイアウトを作成する例となります。

<style>
.parent {
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

このコードは、parentクラスを持つ親要素にdisplay: flex;を適用して、その子要素であるchildクラスを持つ3つの要素を横並びに配置することを表しています。

具体的には、親要素にdisplay: flex;を指定することで、その内部の子要素はデフォルトで横方向に並ぶようになります。

○子要素のサイズ設定

また、childクラスの要素には、幅と高さをそれぞれ100pxと指定しています。これは、各子要素が正確に100px四方のサイズを持つことを保証するものです。このようにして、複数の子要素を均等なサイズで配置することが容易になります。

Flexboxを使用すると、これまでのレイアウト手法に比べて、中央揃えや均等に分割するといったことが非常に簡単になります。また、順序の変更や、アイテムの伸縮など、より高度なレイアウトの調整も可能になります。

●縦並びのレイアウトを作る方法

Flexboxを使って、縦並びのレイアウトを作るには、親要素に flex-direction: column; を指定する必要があります。

下記のコードは、Flexboxを使用して縦並びのレイアウトを作成する一例となります。

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  width: 100px;
  height: 100px;
}

このコードは、三つの子要素を縦に並べるための基本的なスタイルを表しています。

まず、.parentクラスを持つ要素にdisplay: flex;を指定することで、この要素の中にある子要素がFlexboxの振る舞いを持つようになります。

その後、flex-direction: column;の指定により、子要素が縦に並ぶようになります。

一方、.childクラスを持つ要素には、固定の幅と高さが指定されています。

このため、それぞれの子要素は100pxの四角として表示されることになります。

○より実用的な縦並びの例

縦並びのレイアウトは、一覧表示やメニュー、フォームの各項目など、さまざまな場面で利用されます。

実際のウェブページでよく見られる縦並びのリストのデザイン例を紹介します。

.list-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.list-item {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

このコードにより、.list-containerクラスの要素内の.list-itemクラスの要素が縦に並び、各項目の間には15pxのスペースが空くようになります。

また、各リストアイテムにはパディングが適用され、薄い境界線と角丸が付加されることで、ユーザーフレンドリーなデザインが実現されます。

●Flexboxの応用例：縦並びの中央揃えをする方法

Flexboxを使った縦並びのレイアウトの中でも、よく使われるのが縦方向の中央揃えです。

下記のサンプルコードは、縦方向の中央揃えを実現するための基本的なCSSの設定をするコードです。

<style>
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.child {
  width: 100px;
  height: 100px;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

このコードは、.parentクラスの要素をFlexboxコンテナとして設定し、その子要素を縦方向に中央揃えにするための方法を表しています。

具体的に、display: flex;プロパティを適用することで、親要素をFlexboxコンテナに変換します。

flex-direction: column;を指定することで、子要素は縦方向に並ぶようになります。

さらに、justify-content: center;とalign-items: center;のプロパティを利用することで、子要素は縦方向に中央揃えされます。

ここでのポイントは、justify-contentがメイン軸（この場合は縦方向）に対してアイテムを中央揃えし、align-itemsが交差軸（この場合は水平方向）に対してアイテムを中央揃えするという性質を利用していることです。

また、.parentのheight: 300px;という設定は、Flexboxコンテナの高さを指定しています。

これにより、コンテナ内の空間が確保され、子要素がこの高さの中央に位置するようになります。

○縦並びの中央揃えの実践的な利用

縦並びの中央揃えは、特定のデザイン要件、特にスクロールを伴わないランディングページやモーダルウィンドウなど、限られた領域内でコンテンツを効果的に提示する場面で非常に役立ちます。

例として、下記のコードは、ボタンを含む情報カードを縦方向に中央揃えで表示する方法を表しています。

.info-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  border: 1px solid #ccc;
  padding: 20px;
}
.button {
  margin-top: 20px;
}

<div class="info-card">
  <h3>タイトル</h3>
  <p>こちらは情報カードの説明文です。</p>
  <button class="button">詳細を見る</button>
</div>

この例では、タイトル、説明文、およびボタンが含まれる情報カードを縦方向に中央揃えで表示します。

.info-cardクラスにFlexboxのプロパティを適用することで、カード内のコンテンツが中央に配置されます。

まとめ

この記事では、CSSのFlexboxを使って縦並びのレイアウトを作る方法と応用例を初心者向けに詳しく解説しました。

Flexboxを使うことで、柔軟でレスポンシブデザインに対応したWebページのレイアウトを作ることができます。

また、縦方向の中央揃えなどの応用例も紹介しました。

是非、この記事を参考にして、Webページのレイアウトをより美しく整えてみてください。