シェアする

【CSS】要素のスタッキング方法3種

シェアする

Webサイトを制作していれば必ず出てくる、要素のスタッキング。

初歩的ではありますが、marginの相殺などで思ったようにスタッキングできないこともあるのではないでしょうか。

場当たり的に要素ごとに余白を設定してしまうと、実際に表示されている余白がどの要素に設定されているのか混乱のもとにもなってしまいます。

余白の方向を揃えてスタッキングする

無用な混乱を避けるための方針として、余白の方向を揃える、というものがあります。

余白の方向を揃えるというのは、margin-topで指定すると決めて、margin-bottomは使わない、ということです。

こうすることでmarginの相殺を防ぎ、意図した通りの余白を表示することができるようになります。

この記事ではスタッキングレイアウトを実装する基本的なスタイルを見ていきます。

単純にmargin-bottomをつけた場合の問題点

まずは単純に各要素にmargin-bottomを指定した場合ですが、実はこれだけだとちょっと問題があります。

See the Pen zYxgBog by yinouet (@yinouet) on CodePen.

Row 3がフッターだとしたら、フッターのさらに下に余計な余白がついてしまいますね。

また、.stackブロックがさらにスタッキングされていて、そこにも余白が設定されていた場合、Row 3の下には他よりも広い余白が生まれてしまいます。

この余分な余白を発生させずにスタッキングレイアウトを実装する方法を3つご紹介します。

:last-child疑似クラスを使ったスタッキングレイアウト

See the Pen bGdbZgR by yinouet (@yinouet) on CodePen.

まずは:last-child擬似クラスを利用した方法です。

:last-child擬似クラスにmargin-bottom: 0;を指定することで、.rowを付与された要素のうち最後のものに指定されているmargin-bottom: 30px;を打ち消しています。

最後の要素に余分な余白がつくなら、それを打ち消してあげればいいという発想のスタイルですね。

ちなみにmargin-topを使う場合は、:first-child擬似クラスで同じように実装します。

:not()疑似クラスを使ったスタッキングレイアウト

See the Pen xxGKBgN by yinouet (@yinouet) on CodePen.

同じように擬似クラスを利用する方法ですが、こちらはスタイルを打ち消すのではなく、擬似クラスにmargin-bottom: 30px;を指定しています。

:not()疑似クラスは、()の中に指定した要素ではないもの、という意味になりますので、:last-childではない要素にmargin-bottomが適用されます。

:last-child擬似クラスにmargin-bottom: 0;を指定する方法との違いは同じプロパティを何度も入力しなくて済むということですね。(DRYの原則)

反面、セレクタは少し複雑になるので、このセレクタが何を指しているのかが直感的に分かりづらくなります。

フクロウセレクタを利用したスタッキングレイアウト

See the Pen dyobrWP by yinouet (@yinouet) on CodePen.

たぶん一番スマートな方法です。

.stackクラスに内包されるすべての要素を対象にして、余計な余白を持たないスタッキングレイアウトを実現できる上に、コードも少なくて読みやすくなります。

フクロウセレクタの意味は概ね:not(:first-child)なのですが、上の例のよう親要素 * + *とした場合はスタッキングする子要素の内包する要素まで対象になるのが異なります。子要素をネストしても新しいスタイル指定は必要ないということです。

注意しなければいけないのは、ユニバーサルセレクタを使っているので詳細度が低いということです。たとえば間違って.stack .row {margin-bottom: 50px; }とか指定してしまうと簡単に上書きされてしまいます。

ただこれも、逆に特殊なレイアウトを指定したいときには素直に指定すれば上書きできると考えれば、デメリットとは言えないと思います。

横方向スタッキングにも使えます

今回紹介したスタッキングの方法はすべて、横並びメニューやカードデザインなどの水平方向スタッキングにも適用できます。

どの方法もシンプルなコードで整ったレイアウトを実現できるので、ぜひ活用してみてください。

CSSは同じ見た目にするために様々な実装があるのが面白いですね。書いていてイライラする事が多いですが、それでもスタイリングの工程が一番好きなのも、どの実装を選ぶか工夫のしがいがあるからかもしれません。