横に並んだコンテンツの高さを同じにしたい時の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

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

新着情報一覧

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

wordpress5で苦戦中

スライドショー画像にカーソルが乗った時に表示する矢印のスライダー

FontAwesome5をCSSで指定しても表示されない時

SEO対策（All in One SEO Pack便利機能）

前回（query_postsは非推奨？）の続き〜get pagesへ

【復活記事】ホームページ制作を便利にするツール〜フォントアイコン編

query_postsは非推奨？

bxsliderスライダーでコントロールすると止まる件