【CSS】グリッドレイアウトで擬似クラス「:nth-child」はもう使わない!

ホームページ
この記事は約5分で読めます。

グリッドレイアウト(格子状配置)で、画像を外枠いっぱいに並べるとき、右端の画像に右マージンがあると、外枠の中にピッタリと収まらず、左側に配置されてしまいます。

それを避けるため、右端の画像だけ右マージンの値を 0(ゼロ)にして、外枠の中にピッタリと収めたりしますよね。

グリッドレイアウト
グリッドレイアウト

今回は、ネガティブ・マージン(マイナスのマージン)を使って、それを実現する方法を紹介します。

スポンサーリンク

擬似クラス「:nth-child」でグリッドレイアウト

ボクは今まで、何冊かの HTML と CSS に関する本を見てきました。
その中で、グリッドレイアウトについて記述している箇所をチェックしてみました。

本を読んで閃いた男性

すると、どの本も決まって、擬似クラス「:nth-child」を使っています。
それによって、右端に来る画像の右マージン(margin-right)の値を 0(ゼロ)にしています。

具体例

たとえば、次のような場合を考えてみます。

  • 外枠の幅: 640px(ピクセル)
  • 画像の幅: 200px
  • 画像と画像の横の間隔: 20px
  • 画像と画像の縦の間隔: 15px

外枠の中に、画像が横に 3つずつ並びますので、3の倍数番目の画像の右マージンを 0(ゼロ)にして、ピタリと収めています。

HTML の例

<div class="gallery">
  <ul class="gallery__list">
    <li><img src="画像1"></li>
    <li><img src="画像2"></li>
    <li><img src="画像3"></li>
    <li><img src="画像4"></li>
    <li><img src="画像5"></li>
  </ul>
</div>

CSS の例

.gallery {
  width: 640px;
  background-color: #ffcdd2;
}

.gallery__list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.gallery__list > li {
  float: left;
  margin: 0 20px 15px 0;
  list-style: none;
}

.gallery__list > li:nth-child(3n) {
  margin-right: 0;
}

.gallery__list > li > img {
  width: 200px;
}

ネガティブ・マージンでグリッドレイアウト

グリッドレイアウトは、マージンにマイナスの値を指定することによっても、実現できます。

具体例

たとえば、先ほどと同じく、次のような場合を考えてみます。

  • 外枠の幅: 640px(ピクセル)
  • 画像の幅: 200px
  • 画像と画像の横の間隔: 20px
  • 画像と画像の縦の間隔: 15px
ネガティブ・マージン

外枠の左右のマージンに、マイナスの値(画像と画像の横の間隔の半分の値)を指定することにより、外枠の領域が左右に広がります。
画像の左右のマージンとして、画像と画像の横の間隔の半分の値を指定します。

すると、画像の左右のマージンが、外枠の広げた左右のマージンにピタリと収まります。

CSS の例

.gallery {
  width: 640px;
  background-color: #c8e6c9;
}

.gallery__list {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
}

.gallery__list > li {
  float: left;
  margin: 0 10px 15px;
  list-style: none;
}

.gallery__list > li > img {
  width: 200px;
}

利点

なぜネガティブ・マージンを使うかというと、画像の幅を変えるだけで、横に並ぶ画像の数を変更できるからです。

  • 画像を横に 2枚 …… 画像の幅:310px
  • 画像を横に 3枚 …… 画像の幅:200px
  • 画像を横に 4枚 …… 画像の幅:145px

擬似クラス「:nth-child()」を使った場合は、画像の幅の変更に加えて、擬似クラス「:nth-child()」のカッコの中を 2n, 3n, 4n と変更する必要があります。

いかがですか? ネガティブ・マージンって、ちょっと便利だと思いませんか?

あとがき

ここで紹介したネガティブ・マージンは、実は「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」という本の中に書いてあったことです。

CSSの設計手法に関する本なので、ネガティブ・マージンの説明など特にしていません。
たぶん著者にとっては、当たり前のことなのです。

本に埋もれる

ネガティブ・マージンは、ボクが普段 CSS を記述するときに、すごくよく使います。
しかし、市販の本の中では、見かけたことがありませんので、ちょっと紹介してみました。

コメント

タイトルとURLをコピーしました