• コーディング ファクトリーHOME
  • Coding Methodology
  • 第117回 よくあるレイアウトをflexboxで簡単に実現する

コーディングメソドロジー

第117回 よくあるレイアウトをflexboxで簡単に実現する

CSS3で新しく制定されたflexbox。そのレイアウトの組みやすさから、制作の現場で利用する機会が非常に多くなってきました。要素が増えてもレイアウトが柔軟に対応することや、上下中央寄せが簡単に実現するなど、活用方法は様々です。今回は、実践的なflexboxの利用について具体的な事例をご紹介します。

■ケース1 ボタン付きカード型モジュールでの利用

図1は、よくあるカード型モジュールの横並びレイアウトです。
各カードの下部にはボタンがあります。flexboxを使ってこのレイアウトを実装すると、HTMLとCSSは、それぞれコード1-1コード1-2のようになります。flexboxを利用することによって、1. 同列要素が自動的に同じ高さに揃う、2. ボタンの位置をした揃えに統一できるようになります。
もしこのレイアウトをfloatを使ってコーディングした場合、各要素の高さ揃えにJavaScriptを利用したり、ボタンの下揃えにCSSのpositionプロパティを利用する必要がありました。
flexboxを利用することによって、従来だとJavaScriptを利用していたレイアウトがCSSだけで組めるようになったり、使用するプロパティの量を減らすことができます。


図1.横並びのボタン付きカード型モジュール

図1.横並びのボタン付きカード型モジュール

コード1-1.HTML

コード1-1.HTML

コード1-2.CSS

コード1-2.CSS

■ケース2 画像とテキストが互い違いに入るレイアウトでの利用

図2は、片側に画像、もう一方にテキストがあるレイアウトです。
さらに、画像とテキストは位置を交互に変えながら繰り返されるレイアウトになっています。
flexboxを利用することで、HTML上で画像とテキストの順序を変えずに画像とテキストの位置を交互に変えることができます。
HTMLの順序を変えないことのメリットとして、1. スマートフォン用レイアウトで画像が上・テキストが下となった場合にHTMLの順序を考慮しなくていいこと、2. サイトを運用する際に変更箇所が把握しやすいことが挙げられます。


図2.画像とテキストが互い違いに入るレイアウト

図2.画像とテキストが互い違いに入るレイアウト

コード2-1.HTML

コード2-1.HTML

コード2-2.CSS

コード2-2.CSS

このように、flexboxを利用することで、シンプルで汎用的な組み方を実現することができます。現場での制作ではスタンダードになってきましたが、ブラウザによって使用できるプロパティが異なる場合があります。必要なブラウザで汎用的な組み方ができているかどうか、確認しながら取り入れるようにしましょう。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム