- Coding Methodology
- よくあるレイアウトを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．HTML
コード1-2．CSS
■ケース2 画像とテキストが互い違いに入るレイアウトでの利用
図2は、片側に画像、もう一方にテキストがあるレイアウトです。
さらに、画像とテキストは位置を交互に変えながら繰り返されるレイアウトになっています。
flexboxを利用することで、HTML上で画像とテキストの順序を変えずに画像とテキストの位置を交互に変えることができます。
HTMLの順序を変えないことのメリットとして、1. スマートフォン用レイアウトで画像が上・テキストが下となった場合にHTMLの順序を考慮しなくていいこと、2. サイトを運用する際に変更箇所が把握しやすいことが挙げられます。
図2．画像とテキストが互い違いに入るレイアウト
コード2-1．HTML
コード2-2．CSS
このように、flexboxを利用することで、シンプルで汎用的な組み方を実現することができます。現場での制作ではスタンダードになってきましたが、ブラウザによって使用できるプロパティが異なる場合があります。必要なブラウザで汎用的な組み方ができているかどうか、確認しながら取り入れるようにしましょう。
