要素の高さをそろえる

ウェブサイト制作では横並びの要素の高さをそろえたい場面が頻繁にあります。

たとえば、トップページのランキングやおすすめ商品など、商品を並べているところは画像の高さや文字数などが原因でレイアウトが崩れることがあります(下画像では紫が原因)。

要素の高さ崩れ

CSS フレックスボックス、CSS グリッドレイアウトを使うことも考えられますが、閲覧環境によっては不具合がでたり、すこし古めのブラウザでは対応していないこともあります(その他、table-cellも使えたり使えなかったり)。

カラーミーショップのテンプレートでは、レイアウト崩れを起こしにくい jquery.tile.js を使っていることがよくあります(MODEやPanoramaなど)。
jquery.tile.jsは横並び要素の高さを取得して最も大きい値を横並び要素すべてにheightで指定することで、高さをそろえています。

事前の設定として、ブラウザの幅ごとに横並びの要素がいくつあるか(下例の場合だと3)をパラメータで指示してやる必要があります(jquery.tile.js の使い方は検索して調べてください)。

jquery.tile.jsサムネイル

 

注意点
テンプレート内で横並びの数を変更した際に(たとえば、col-lg-3をclo-lg-4に変えた)、レイアウトが崩れることがよくあります。使っているテンプレートで jquery.tile.js を読み込んでいるか確認して、必要があればjquery.tile.jsの設定も修正します(手順はすこし難しいです)。

制作物用のお問い合わせボタン

えいじ@naeco.jp この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら

関連記事