要素同士の余白に使える！gapプロパティが便利

こんにちは、オフィス狛 デザイン部のSatoです。

 Internet Explorerシリーズのサポートが今年6月15日終わりますね。

便利なCSSプロパティが「モダンブラウザでは問題ないけれどIEで非対応だった！」と焦るシチュエーションがなくなり、モダンブラウザで使えるさまざまなCSS要素がIEの存在を気にせず使えるようになると思うと、個人的にはかなりありがたいです！

IEを気にしなくて良くなり、気軽に使えるようになったCSS要素で「要素をタイル状に横並びにする」レイアウトをCSSで実装する際に使える「gapプロパティ」を使ってみた所、とても便利でしたので今回のブログでご紹介します。

gapプロパティは要素と要素の間を指定するプロパティです。

marginに近いですが、要素の有無に関係なく余白を指定できるmarginと違い、gapプロパティは要素と要素の隙間を指定できます。

今まで「840pxの横幅の要素の中に、要素を３つずつ横並びで表示する、要素と要素の間は4px」といったレイアウトを作成する際余白を開けるために、要素の数が決まっている際はjustify-content: space-between;で並べたり…、要素の数に増減がある際はjustify-content: space-between;を使わずmarginで2番目の要素だけに余白をつけたり…。

などと私の場合考えることが多かったです。

レスポンシブサイトでのスマホビュー時のレイアウト変更にも少し手間がかかっていました。

しかし、gapプロパティを使うと余白をデザインの際に横に並べる数が変わった時などに変更する数値や箇所がわかりやすい＋要素が右寄せで表示＋レスポンシブの際のコード変更箇所が減る…などなど良いこと尽くめです。

しかもgapプロパティは上下右左個別に指定可能なんです。とってもありがたいです。

See the Pen 要素を並べて表示 by sato (@officekoma_sato) on CodePen.

👆デモを作成してみました。

HTML&CSSも見れますので、参考にしてみてください。

今後はグリッドレイアウトなどと一緒に使うことで、色々な可能性が広がりそうですね。

今回ご紹介したgapプロパティはリニューアルしたオフィス狛のWebサイトのこまちゃん紹介ページでも使用しています。

よろしければ、リニューアルしたオフィス狛のWebサイトも見ていってください。