横に並んだコンテンツの高さを同じにしたい時のCSS

記事公開日：2017.11.22

ホームページのレイアウトを整える時、見やすさと見栄えにはこだわりたいと思っています。
テキストを並べただけのホームページでは見づらいし、コンテンツ一つ一つの見え方を整えると、全体の見栄えにつながるからです。

「その空きが気になる」ってことありますよね。

横並びの箱組みを普通にhtmlで組むと、上の図のように、横の天地が揃いません。
ここで一手間を惜しまず、やっぱり揃えたいのが作り手の些細なこだわりというものです。

ひと昔前なら、天地の高さを指定すればよかったものの、今は「レスポンシブ」時代！
画面サイズが変わったら可変してもらうためには、数値指定はノンノン♪

cssだけで横並びコンテンツの天地サイズを揃えられるので便利です。

.ul {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.ul {

display:-webkit-box;

display:-moz-box;

display:-ms-flexbox;

display:-webkit-flex;

display:-moz-flex;

display:flex;

-webkit-box-lines:multiple;

-moz-box-lines:multiple;

-webkit-flex-wrap:wrap;

-moz-flex-wrap:wrap;

-ms-flex-wrap:wrap;

flex-wrap:wrap;

}

こちらをリストに入れるだけで、とっても便利です。

今回参考にさせていただいたサイトです
CSSのみで横並びの要素の高さを揃える

« SEO対策と表示順位の大変動 | イメージマップ、今はあまり使わないかもしれないけど＋レスポンシブ対応を追加 »

長野県長野市のホームページ制作・チラシ・パンフレット・カタログ・ショップカード・パッケージ・スマートフォンサイト制作

新着情報

横に並んだコンテンツの高さを同じにしたい時のCSS

こちらの記事もオススメです

新着情報一覧

ホームページ制作にまつわる便利な情報を長野より発信！

【css】1段目を写真右、2段目を写真左でレイアウトしたい時（wordpress対応）

wordpress5.51にしたらMW WPからのメールがエラーになる件

wordpressで投稿、カスタム投稿、カテゴリ別に表示件数を変える

郵便番号から住所をフォームに自動入力するJS（wpじゃない時）

高さを指定しないで中央に

Safariにのみ適用させるCSSハック

ショッピングサイト「ベイス」でのスライダー

wordpress更新でホームページ（頭の中も）が真っ白になる