triBlog

トリアナのブログ。

WEB制作
フロントエンド

gapプロパティはCSS余白界の最適解になり得る

CSSの余白、どう実装していますか
おくだ
おくだ

奥深い余白の実装、人によってかなり書き方が違うと思います。
そんな中、『flexboxレイアウト、これが最適解では?』と思えるgapプロパティのご紹介です。

gapはflexboxレイアウトで使える新しいプロパティ

今までの余白指定

私は以下のような実装をすることが多いです。

HTML

CSS

calc関数でwidthから余白を除いて横幅を指定し、
親要素にjustify-content: space-between;を指定することで横の均等な余白を実現しています。
また縦の余白ですが、上段の4つにのみmargin-bottom: 10px;を指定しています。

一見、分かりやすく見えるこちらの実装ですが、space-betweenで対応できない場合は結構あります。
例えば要素が中途半端な数だったとき。
CMSなどではあり得るシチュエーションです。

CSS

本来、左詰めになる必要がありますが、変にバラけて配置されてしまいます。
そうした場合は、右側に端っこの要素以外に余白を設定する方法を採用していました。

CSS

割と直感的に分かりやすい反面、
レスポンシブ化などで列数が減ったとき、指定をしなおすのが面倒&コードが読みにくくなるデメリットあり。

gapでの新しい余白指定

それではgapプロパティを見ていきましょう。

CSS

これだけでOK。余白が上下それぞれ10px。なんてシンプル!

レスポンシブ化するときもカンタン。分かりやすい。

可読性に優れ、変更にも強いgapはまさしく余白界の救世主。
コーディング担当者が変わっても、パッと見ただけでわかります。

ショートハンドが苦手なら1つ1つ書いてもOK!

gapプロパティはmarginの指定みたいにショートハンドで記述できますが、
パッと見でわかりにくい場合は、1つ1つ書くのもアリです。

marginと同様、一行で書けば上下左右。

2つ、3つ、4つに分けて書けば以下のようになります。

ほぼすべての主要ブラウザに対応!(IE11は残念ながら非対応)

比較的新しいCSSを実装するときに気にするのが『ブラウザの対応状況』
いつものことではありますがIE11は非対応です。残念。

個人的にCSSのobject-fitとgap、JSのasync/awaitは早くIE11対応してほしいところです……!

ただ、Google Chrome、Safari、Firefox、Edgeなどの主要ブラウザはカバーされていて、
案件でも充分に導入できるレベルだと思います!
(案件の動作保証ブラウザをチェック!)

まとめ

  • gapはシンプルにflexboxの余白が設定できる
  • ほとんどの主要ブラウザでは使える
  • ただし、IEは非対応

WEBサイトなどのご相談はこちらからどうぞ

記事を書いた人

おくだ
おくだ フロントエンドエンジニア

睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。

おくだ フロントエンドエンジニア

睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。

ページ上部へ