2022-02-08Advertisementsタイトルの長さが異なっても、複数のカードの高さを揃える方法をちゃんと知っておきたかったので、さらにそれをシンプルにレスポンシブ対応させる方法について、アレンジをしてみました。カード型レイアウト1点についての記事「カード型のレイアウトをつくる方法」の続きになります。(省略記号「...」つき)ニュース部分や一覧ページなどで良く見かけるカード型のレイアウト。つくり方は人それぞれみたいですが、アレンジしながら自分的につくりやすかった...flexboxの要素として2021年に主要なブラウザ全てに対応した、gapプロパティも使いながら整えていきます。文字量が違う時の高さを揃えるgapプロパティについてカード型レイアウトのHTML&CSS設定を確認まずは、全体のコードがこちらになります。20px;}上記の様に、cardの要素同士の行や列の隙間を、gapプロパティで20pxに設定しています。レスポンシブで幅が狭くなった際にも、paddingで左右のそれぞれの端に20pxずつ余白が確保される様になります。レスポンシブ対応カード全体を囲うcardのクラスに対し、メディアクエリをつかって、PC/タブレット/スマホの場合それぞれで幅を変更して、3つ→2つ→1つに並べるように変化させています。3」ずつ引くことで、40px(20pxのすきまが2個分)できるようにして、3つ並べています。2」ずつ引くことで、全体として20pxのすきま1個分を確保して2つ並べています。SP幅の際は、width:100%;に設定して、1つずつ並べています。Advertisements文字量が違う時の高さを揃えるそのままだと、見出しの長さが異なる際に、ガタガタして見え綺麗ではないので、見出しに下記を加えることで高さを揃えています。:1;を指定することにより、カードの要素中の空いているスペースが見出し部分に全て割り当てられることになるので、結果として見出しの高さが揃って見えます。14.1も対応が決まったことで、IE以外の主要なブラウザでは全て対応済みになりました。5.x対応版」の感想と考察NextContinue在英4年目で考える、イギリスの家庭料理がまずい理由3つAdvertisementsManaウサギと美術館好きな、ロンドン在住のイラストレーター&デザイナーです。Webやデザインに関するアウトプットがメインです。