tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。カード型レイアウトと相性抜群!gapプロパティを使った簡単レイアウト[css]カード型レイアウトと相性抜群!gapプロパティを使った簡単レイアウト[css]今回は、カード型レイアウトともとても相性が良い、cssの「gapプロパティ」を使ったレイアウト方法についての記事です。今月、IE11の公式サポート期間が完全に満了したことに伴い、実案件でも積極的に使っていけるようになった手法になります。基本の形それでは、gapプロパティについての説明です。gapプロパティは、要素間の「すき間」「溝」を定義できるcssプロパティになります。次のキャプチャのような、いわゆる「カード型レイアウト」があったとします。↑画像内のカードとカードの間に、適切な余白がとられているのが確認できるかと思います。これは、gapプロパティで次のように表現することができます。1200px;}...(中略)...↑3行目に注目してください。gapプロパティを使用しています。上記のキャプチャ画像の例では、カードが横に3列ずつ並んでいますが、gapプロパティを、親ボックスに指定してあげることで、このキャプチャのようなレイアウトを作成することができます。小要素である各カードに対してmarginを定義、そして折り返し対象のカード(または末尾と先頭のカード)にはmarginをつけない、といったやや複雑な定義をしなければならなかったことと思います。使うなどして、余白の調整をしなければなりませんでした。冒頭の例のように親ボックスにたった1行定義するだけで、同じことが実現できてしまうと言うわけです。「親ボックスと内接している子要素の端側には余白がつかない」という仕様になっているので、:nth-of-type等による調整も不要です。どちらが便利かは、もう明白ですよね。コード全体像gapプロパティを使ったカード型レイアウトの、htmlとcss全体は以下のようになります。2%;として2つの値を渡しています。column-gap↑この様な意味となります。row-gapというのは、行間の余白のことで、つまり縦方向の余白になります。column-gapというのは、列の余白のことで、つまり横方向の余白になります。1つの値を渡した場合、row-gap、colum-gapともに、同じ値を指定したことになります。(「%指定以外」の場合。「%指定」の場合、組み方によって縦方向の余白が効かない場合があります。内での、gapプロパティの解説ページは次のリンク先になります。「gridレイアウト」を使用した場合のサンプルなども掲載されています。「gridレイアウト」との相性も抜群ですので、それについての方法は、また続編の記事にてご紹介できればと思っています。この記事のまとめ今回は、カード型レイアウトともとても相性が良い、cssの「gapプロパティ」を使ったレイアウト方法についての記事を書きました。冒頭でもご紹介した通り、この「gapプロパティ」は、IE11でサポートされていないプロパティだったため、これまで実案件での活用がなかなかしづらいケースが多い印象がありました。それが今月、2022年6月15日をもってIE11の公式サポート期間が完全に満了したことに伴い、実案件でも積極的に使っていけるようになった手法となります。続編の記事では、「gridレイアウト」と組み合わせて使用する例についても書いていきたいと思っています。※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。Observer]「スクロールして特定の位置をすぎたらふわっと表示」を簡単に実装する方法[JavaScript]ぜひ使っていきたい!detailsタグとsummaryタグでアコーディオン型コンテンツを作る方法[Vuejs製の自作ジェネレーターあります]あれどうやるんだっけ?よく使うFigmaショートカット達[Figma]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。印象的な文字表現が簡単にできる。使って縦書き文字を使う方法[css]clamp関数を使って、柔軟なフォントサイズ指定を行う方法[css]私の修行時代のお話。