この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
私は今まで、CSSを使用して余白の設定をする際は、marginを使っていました。
flexboxでレイアウトしたら、gapプロパティを使用することができます。
gapを使うと、marignを使ったときよりも、cssの記述を減らすことができるといったメリットがあります。
今回はgapプロパティでflexboxの余白を設定する方法について解説していきます。
[fukidashi]こんにちは！今回はflexboxを使用した際の余白設定の方法を解説していきます。[/fukidashi]
こんにちは！今回はflexboxを使用した際の余白設定の方法を解説していきます。
まず、gapとは？
そもそもgapとは、MDN Web Docsによると、
gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは row-gap および column-gap の一括指定です。
gap (grid-gap) – CSS: カスケーディングスタイルシート | MDN
と書いてあります。
うーん、わかったようなわからないような。
それでは解説していきましょう。
MDN Web Docsの文章を読み解いていきましょう。
まず、「gap は CSS のプロパティで、」・・・ここまではわかります。
次に、「行や列の間のすき間 (溝) を定義します。」・・・？？ん？ 最初読んだときには、私には少しわかりずらかったです。
行や列の間のすき間 (溝) を定義するとは？
「すき間 (溝)」・・・こちらは余白のことだと想像がつきました。
「行や列の」・・・？？を感じたのはこちらが原因です。
「行や列の」とは？
まず、「行」とは、横一直線の余白です。
漢字の一（いち）を想像してもらえたらOKです。
「列」とは、縦一直線の余白です。
今度は数字の１（いち）を想像してもらえたらOKです。
行・列
「行」の漢字をよく見ると、漢字の一がありますね。
「列」の漢字をよく見ると、数字の１があります。
行・列の余白
上の図の青い四角がdivで紫の部分が余白のイメージです。
6つのdivに行・列の余白がありますね。
これは row-gap および column-gap の一括指定です。とは？
row-gapとは？
row-gap は CSS のプロパティで、要素のグリッド行の間のすき間 (溝) の寸法を定義します。
https://developer.mozilla.org/ja/docs/Web/CSS/row-gap
ここでまた、「行」という言葉が出てきましたね。
どうやら、横方向の余白のことのようです。
column-gapとは？
ではcolumn-gapとはなんでしょうか。
column-gap は CSS のプロパティで、要素の段または列の間の隙間 (溝) の寸法を設定します。
https://developer.mozilla.org/ja/docs/Web/CSS/column-gap
予想できた方もいるかと思いますが、「列」が出てきました。
もうみなさんおわかりかと思いますが、
縦方向の余白のことですね。
コードを書いてみて解説
では実際にコードを書いてみて解説します。
まず、HTMLです。
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>class=”box”が指定されているのが、いわゆる親要素と呼ばれる部分です。
class=”item”が指定されているのが、子要素です。
親要素で小要素を囲う。例えば、お母さん（親要素）のお腹の中にいる赤ちゃん（子要素）とでもイメージしてもらえたらいいと思います。
コード自体はいたってシンプルなコードです。
次にCSSです。
.box{
width: 640px;
flex-wrap: wrap;
display: flex; /* 重要なのはここ */
gap: 10px 20px; /* 重要なのはここ */
}
.item{
width: 200px;
height: 100px;
background-color: blue;
}今回は、/* 重要なのはここ */ の部分に注目してください。
その他の部分はレイアウトに必要なコードで、今回のgapプロパティの解説には直接は関係のないコードです。
重要なのは親要素のコード
まず、親要素である.boxにdisplay: flex;を指定します。
次に今回のテーマである、gapプロパティを指定します。
gap: 10px 20px;に注目すると、「10px」と「20px」の2つ指定されていますね。
row-gapは行の余白
この「10px」が、row-gapを指定している部分です。
つまり、行（横一直線）の余白です。
row-gapは列の余白
「20px」が、column-gapを指定している部分です。
つまり、列（縦一直線）の余白です。
gapを使うメリット・デメリット
以前は余白をつけるには、marginを指定していました。
marginではなく、gapプロパティを選ぶメリットが、どのあたりにあるのかを解説していきます。
メリット
marginよりも記述量がへる
gapはボックスの外側には余白が作られません。
marginで書くと、通常の指定ですとボックスの外側に余白がつきます。
ですので、余白が必要ない箇所に余白がついてしまうことがあります。
marginでgapと同じようなレイアウトを再現したければ、last-childやnth-childなどの記述が必要になります。
last-childとは↓
:last-child はCSS の擬似クラスで、兄弟要素のグループの中で最後の要素を表します。
https://developer.mozilla.org/ja/docs/Web/CSS/:last-child
それに対して、gapで書くと、last-childやnth-childなどのCSSを書く必要がありませんので、記述量が減りスッキリしたコードを書くことができます。
デメリット①
外側に余白が必要なときに、gapのみでは外側の余白が作られないことです。
デメリット①の対策
gap外側に余白をつけたければ、親要素にmarginをつけたら、外側の余白がつきます。
.box{
width: 640px;
flex-wrap: wrap;
display: flex;
gap: 10px 20px;
margin: 10px; /* 重要なのはここ */
}
.item{
width: 200px;
height: 100px;
background-color: blue;
}デメリット②
gapは行・列の余白なので、ボックスへ個別に余白をつけたいときは、marginを使用した方いいですね。
ボックスへ個別に余白つけるとは、例えば、
⑥（つまり最後の要素）にだけ余白を付けたい場合があります。
そのときはgapではなく、marginを使う必要があります。
なぜなら、gapは個別に余白をつけるのではなく、行・列で余白をつけるからです。
まとめ
いかがでしたでしょうか？
今回はflexboxのgapプロパティを解説しました。
では、皆さんも一緒にWeb制作の勉強頑張りましょう！
それではノシ
