他の新着情報はこちらから
« SEO対策と表示順位の大変動 | イメージマップ、今はあまり使わないかもしれないけど+レスポンシブ対応を追加 »
新着情報
横に並んだコンテンツの高さを同じにしたい時のCSS
ホームページのレイアウトを整える時、見やすさと見栄えにはこだわりたいと思っています。
テキストを並べただけのホームページでは見づらいし、コンテンツ一つ一つの見え方を整えると、全体の見栄えにつながるからです。
「その空きが気になる」ってことありますよね。
横並びの箱組みを普通にhtmlで組むと、上の図のように、横の天地が揃いません。
ここで一手間を惜しまず、やっぱり揃えたいのが作り手の些細なこだわりというものです。
ひと昔前なら、天地の高さを指定すればよかったものの、今は「レスポンシブ」時代!
画面サイズが変わったら可変してもらうためには、数値指定はノンノン♪
cssだけで横並びコンテンツの天地サイズを揃えられるので便利です。
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のみで横並びの要素の高さを揃える
こちらの記事もオススメです
新着情報一覧
ホームページ制作にまつわる便利な情報を長野より発信!
-
【css】1段目を写真右、2段目を写真左でレイアウトしたい時(wordpress対応)
-
wordpress5.51にしたらMW WPからのメールがエラーになる件
-
wordpressで投稿、カスタム投稿、カテゴリ別に表示件数を変える
-
郵便番号から住所をフォームに自動入力するJS(wpじゃない時)
-
高さを指定しないで中央に
-
Safariにのみ適用させるCSSハック
-
ショッピングサイト「ベイス」でのスライダー
-
wordpress更新でホームページ(頭の中も)が真っ白になる