CSSシェアするWebサイトを制作していれば必ず出てくる、要素のスタッキング。初歩的ではありますが、marginの相殺などで思ったようにスタッキングできないこともあるのではないでしょうか。場当たり的に要素ごとに余白を設定してしまうと、実際に表示されている余白がどの要素に設定されているのか混乱のもとにもなってしまいます。くじ余白の方向を揃えてスタッキングする単純にmargin-bottomをつけた場合の問題点:last-child疑似クラスを使ったスタッキングレイアウト:not()疑似クラスを使ったスタッキングレイアウトフクロウセレクタを利用したスタッキングレイアウト横方向スタッキングにも使えます余白の方向を揃えてスタッキングする無用な混乱を避けるための方針として、余白の方向を揃える、というものがあります。余白の方向を揃えるというのは、margin-topで指定すると決めて、margin-bottomは使わない、ということです。することでmarginの相殺を防ぎ、意図した通りの余白を表示することができるようになります。この記事ではスタッキングレイアウトを実装する基本的なスタイルを見ていきます。単純にmargin-bottomをつけた場合の問題点まずは単純に各要素にmargin-bottomを指定した場合ですが、実はこれだけだとちょっと問題があります。3がフッターだとしたら、フッターのさらに下に余計な余白がついてしまいますね。3の下には他よりも広い余白が生まれてしまいます。この余分な余白を発生させずにスタッキングレイアウトを実装する方法を3つご紹介します。CodePen.まずは:last-child擬似クラスを利用した方法です。30px;を打ち消しています。最後の要素に余分な余白がつくなら、それを打ち消してあげればいいという発想のスタイルですね。ちなみにmargin-topを使う場合は、:first-child擬似クラスで同じように実装します。30px;を指定しています。:not()疑似クラスは、()の中に指定した要素ではないもの、という意味になりますので、:last-childではない要素にmargin-bottomが適用されます。0;を指定する方法との違いは同じプロパティを何度も入力しなくて済むということですね。(DRYの原則)反面、セレクタは少し複雑になるので、このセレクタが何を指しているのかが直感的に分かりづらくなります。CodePen.たぶん一番スマートな方法です。.stackクラスに内包されるすべての要素を対象にして、余計な余白を持たないスタッキングレイアウトを実現できる上に、コードも少なくて読みやすくなります。*とした場合はスタッキングする子要素の内包する要素まで対象になるのが異なります。子要素をネストしても新しいスタイル指定は必要ないということです。注意しなければいけないのは、ユニバーサルセレクタを使っているので詳細度が低いということです。}とか指定してしまうと簡単に上書きされてしまいます。これも、逆に特殊なレイアウトを指定したいときには素直に指定すれば上書きできると考えれば、デメリットとは言えないと思います。横方向スタッキングにも使えます今回紹介したスタッキングの方法はすべて、横並びメニューやカードデザインなどの水平方向スタッキングにも適用できます。どの方法もシンプルなコードで整ったレイアウトを実現できるので、ぜひ活用してみてください。CSSは同じ見た目にするために様々な実装があるのが面白いですね。書いていてイライラする事が多いですが、それでもスタイリングの工程が一番好きなのも、どの実装を選ぶか工夫のしがいがあるからかもしれません。シェアするフォローするいのゆうこちらもおすすめ【CSS】リストにhoverしたときにhoverしていない要素のスタイルも変更する方法【コピペOK】ことばでうまく説明できないので、まずは実際に動作してるのを見てください。HTMLの構造としてはemmet記法でいうとul>(li>a)*...記事を読む【CSS】属性セレクタの書き方メモ無駄に詳細度を上げない属性セレクタですが、けっこう便利な指定方法があるようなのでメモ。うまく使えばコードも少なくできそうだし単純に便利。使い所がちょっと想像つかないんだけど特定...記事を読む【CSS】カードやボックスのデザインが野暮ったく見えたときに試したい小技3つ特に非デザイナーの開発者やWeb制作の初心者によくあるとおもうのですが、自分でデザインしたページをいざコーディングしてみたら、思ってたのと違う印象になってしまうこと、ありますよね。selector)というのを最近知りました。コメントをキャンセルメールアドレスが公開されることはありません。Blogのコンテンツは原則として筆者に属します。無断転載、特にまとめサイト、キュレーションサイトへの転載は掲載の方法および分量を問わず厳に禁止します。※オリジナルコンテンツを主とする個人のブログ、ウェブサイト等への正当な引用を妨げるものではありません。