全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
ボックス要素の高さを揃えたい時のテクニック
2019.11.30
※この記事は2019年11月30日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
コーディングをしていると、ボックス要素を横並びにするレイアウトに遭遇することが、よくありますよね？
floatで簡単に横並びを指定することが多いと思いますが、この方法だとボックス要素の高さは揃いません。
今回は、ボックス要素を横並びにした際の高さを揃える方法を幾つか紹介します。
CSS（display: table）で指定する
ここでは、親要素（class=”example-box-wp”）へ『display:table;』。
子要素（class=”example-box”）へ『display:table-cell;』を指定することで高さを揃えることを実現しています。
ただ、この場合、1行目だけでしか指定できないため、2行目以降にボックス要素がある場合、この方法は良い選択とは言えません。
CSS（display: flex;）で指定する
ここでは、親要素（class=”example-box-wp”）へ『display: flex;』、『flex-wrap: nowrap;』を指定することで高さを揃えることを実現しています。
この場合も、『display:table;』を指定した場合と同じで、1行目だけでしか指定できないため、2行目以降にボックス要素がある場合、この方法も良い選択とは言えません。
プラグインを使用する
プラグイン『jquery.matchHeight.js』を使用する方法です。
この場合、2行目以降にボックス要素があっても同じ高さを保ったレイアウトを実現できます。
jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQueryを記述します。
あらかじめjQuery本体は読み込んでおきましょう。
ダウンロードしたファイル内で、使用するのは『jquery.matchHeight.js』です。
まとめ
これらを使いこなせれば、レイアウトの使用目的に合わせて自由自在に指定できます。
今回紹介した内容は、レスポンシブコーディングにも有効です。
プラグインは使い勝手が良く、CSSはシンプルで指定し易く、どちらの方法も重宝します。
ぜひ活用しましょう！
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
