CSSフレックスボックスの使い方と便利なテクニック

最近CSSフレックスボックスについて勉強しているんだけど、便利な機能がたくさんあるんだよね。

そうなんだ！具体的にどんな機能があるの？

例えば要素の配置を柔軟に調整できることや、垂直中央揃えや均等配置が簡単にできたりするんだ。

なるほど、それは便利そうだね。
カードレイアウトを簡単に作れるっていうのも知ってるよ。

そうそう、CSSフレックスボックスを使うことで、カードレイアウトも簡単に作ることができるんだよね。

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

基本的な概念と特徴

CSSフレックスボックスは、要素を柔軟に配置することができるCSS3の機能です。

フレックスボックスを使用することで、要素を水平・垂直方向に自由に配置したり、スペースの調整を簡単に行うことができます。

フレックスコンテナのプロパティ

display:flex

フレックスボックスを有効にするためのプロパティであり、コンテナ要素に設定します。

.container {
  display: flex;
}

flex-direction

要素の配置方向を指定するプロパティであり、コンテナ要素に設定します。

row、row-reverse、column、column-reverseの4つの値があります。

/* flex-direction */
/* 要素の配置方向を指定するプロパティ */
/* コンテナ要素に設定する */

.container {
  flex-direction: row;
}

justify-content

水平方向の要素の配置を指定するプロパティであり、コンテナ要素に設定します。

flex-start、flex-end、center、space-between、space-aroundの5つの値があります。

.container {
  justify-content: center;
}

align-items

垂直方向の要素の配置を指定するプロパティであり、コンテナ要素に設定します。

flex-start、flex-end、center、baseline、stretchの5つの値があります。

.container {
  align-items: center;
}

フレックスアイテムのプロパティ

flex-grow

余白の割り当て方を指定するプロパティであり、フレックスアイテムに設定します。

flex-growの値が大きいほど余白が多くなります。

.item {
flex-grow: 1;
}

flex-shrink

フレックスアイテムの縮小率を指定するプロパティであり、フレックスアイテムに設定します。

flex-shrinkの値が大きいほど縮小率が高くなります。

.item {
flex-shrink: 2;
}

flex-basis

フレックスアイテムの初期サイズを指定するプロパティであり、フレックスアイテムに設定します。

.item {
flex-basis: 100px;
}

実例：レスポンシブデザインにおけるフレックスボックスの活用法

フレックスボックスはレスポンシブデザインにおいても非常に便利な機能です。

デバイスのサイズに応じて、要素の配置を自動的に調整することができます。

例えば、スマートフォンでの閲覧時には縦並び、PCでの閲覧時には横並びといったように、デバイスに合わせた最適な表示が可能です。

以下に、スマートフォンとPCの画面サイズに合わせて要素を配置する例を示します。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100%;
}

@media screen and (min-width: 600px) {
  .item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 900px) {
  .item {
    flex-basis: 33.33%;
  }
}

この例では、コンテナ要素にflex-wrap: wrap;を設定することで、要素が一列に収まらなくなった場合に自動的に折り返すように指定しています。

また、要素の幅をデバイスのサイズに合わせて調整するために、メディアクエリを使用しています。

スマートフォンでの閲覧時には、全ての要素を100%の幅で表示し、PCでの閲覧時には2つまたは3つの要素を1行に並べて表示するように設定しています。

フレックスボックスを使った垂直中央揃え

要素を垂直方向に中央揃えする場合、従来はテーブルやグリッドシステムを使うことが一般的でした。

しかし、フレックスボックスを使えば、簡単に垂直中央揃えを実現することができます。
以下は、フレックスボックスを使って要素を垂直中央揃えする例です。

.container {
display: flex;
align-items: center;
height: 200px;
}

.item {
margin: 10px;
}

この例では、コンテナ要素にalign-items: center;を指定することで、要素を垂直方向に中央揃えしています。

また、コンテナ要素にheightプロパティを設定することで、要素を中央に配置する基準となる高さを指定しています。

フレックスボックスを使った均等配置

フレックスボックスを使うと、要素を均等に配置することも簡単にできます。

以下は、フレックスボックスを使って要素を均等に配置する例です。

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
}

この例では、コンテナ要素にjustify-content: space-between;を指定することで、要素を均等に配置しています。

また、要素にwidthとheightプロパティを設定することで、要素の大きさを指定しています。

フレックスボックスを使ったカードレイアウト

フレックスボックスを使えば、カードレイアウトを簡単に作れます。

以下は、実際に使ってみた例です。

<div class="container">
  <div class="card">
    <img src="image1.jpg" alt="Card image">
    <h3>Card 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#">Read More</a>
  </div>
  
  <div class="card">
    <img src="image2.jpg" alt="Card image">
    <h3>Card 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#">Read More</a>
  </div>
  
  <div class="card">
    <img src="image3.jpg" alt="Card image">
    <h3>Card 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#">Read More</a>
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  flex: 1;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.card img {
  max-width: 100%;
  height: auto;
}

.card h3 {
  margin-top: 10px;
}

.card p {
  font-size: 14px;
  line-height: 1.5;
}

.card a {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

コンテナ要素には、要素を折り返すためのflex-wrap: wrap;を設定します。

そして、カード要素には、均等に配置するためのflex: 1;を指定して、マージンやボーダー、角丸などのスタイルを付けます。画像要素には、カード要素からはみ出ないようにするためのmax-widthプロパティを設定します。

タイトルや本文、リンクなどにもスタイルを付けます。

フレックスボックスは、要素の配置に関する課題を解決するために役立ちます。

しかし、ブラウザによっては使えない場合があるため、代替手段を考える必要があります。

覚えておくと便利なテクニックなので、ぜひ活用してみてください。

まとめ

CSSフレックスボックスは要素の配置を柔軟に調整できるため、レスポンシブデザインなどで大変便利です。

フレックスボックスのプロパティが多数あるため、初心者にとっては使い方が難しいかもしれませんが、実際に使ってみることで理解を深めることができます。

また、フレックスボックスはCSS3から導入された機能であり、古いブラウザでは対応していない場合があるため、ブラウザの対応状況を確認してから使用することが重要です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

created by Rinker

• Kindle
• Amazon
• 楽天市場

よくある質問

フレックスボックスはどのような場面で使われるのでしょうか？

フレックスボックスは、要素の配置を柔軟に調整できるため、レスポンシブデザインや、ナビゲーションメニューやフッター、カードレイアウトなど、様々な場面で使われます。

フレックスボックスにはどのようなプロパティがありますか？

フレックスボックスには、display、flex-direction、justify-content、align-items、flex-grow、flex-shrink、flex-basis、などのプロパティがあります。

フレックスボックスを使う場合、どのようにブラウザの互換性について対応すればよいですか？

フレックスボックスはCSS3から導入された機能のため、古いブラウザでは対応していない場合があります。

そのため、ブラウザの対応状況を確認してから使用することが重要です。

フレックスボックスを使ったデザインは、SEOにどのような影響がありますか？

フレックスボックスを使ったデザインは、ページの読み込み速度を向上させることができるため、SEOにも影響を与えることがあります。

しかし、過剰な使用は逆効果になる場合もあるため、適切な使用方法を考慮する必要があります。