現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

横並びにさせた要素の端のマージンを調整する方法

幅が 960px の inner の中に、幅が 300px、右側のマージンが 30px のボックス(.item)を3つ並べる為に、下記のようなコードを記述したとします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <!-- ヘッダー -->
    </header>
    <main>
      <div class="inner">
        <div class="container">
          <div class="item">
            【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプル
          </div>
          <div class="item">
            【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプル
          </div>
          <div class="item">
            【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
            サンプルサンプル
          </div>
        </div><!-- container -->
      </div><!-- inner -->
    </main>
    <footer>
      <!-- フッター -->
    </footer>
  </body>
<html>

.inner{
  background-color: #fff;
  width: 960px;
  margin: 0 auto;
}

.item {
  width: 300px;
  margin-right: 30px;
}

表示を確認してみると・・・

コード記述後のサンプル

このように、3つ目のボックスが下に落ちてしまいます。それでは、このようにならない為にはどうしたら良いのでしょうか?

今回は、それを解決する3つの方法についてご紹介したいと思います。

目次

解決方法

1. 右端のボックスに、マージンなしのクラスを追加する

3つ目のボックスに『item-no-margin』というクラス名を与え、スタイルシートに下記を追記すると・・・

.item-no-margin {
  width: 300px;
  background-color: #08B9D4;
  float: left;
  margin-bottom: 30px;
}

下の画像()のように綺麗にボックスを並べることができます。

コード記述後のサンプル

この方法は3つ目だけに違うクラスを使うので、WordPress化するときにあまり好ましくないというデメリットがあります。

2. 擬似クラスで3番目の要素だけマージンをなくす

擬似クラスで、3番目の要素だけマージンをなくします。

.item:nth-child(3) {
  margin-right: 0;
}

擬似要素にはいろいろな記述方法がありますが、上記はそのうちの一つで『最初から○番目にある要素にスタイルを適用する』という書き方となります。

3. 親要素に子要素で設定したマージン分を、ネガティブマージンで差し引く

親要素に対して、子要素で指定した 30px 余計な分を、ネガティブマージンで引いてあげるという考え方です。

.container { 
  background-color: #ccc; 
  overflow: hidden; 
  margin-right: -30px; 
}

ネガティブマージンとは、marginプロパティにマイナスの数値を指定することをいいます。

コード記述後のサンプル

この方法は、Wordpressでも使えるのでお勧めですが、親要素に幅を指定すると効かなくなるので注意しましょう!!

まとめ

今回は、複数の要素を綺麗に横並びにしたいのに、最後の要素が下に落ちてしまう場合の解決策についてまとめました。

ぜひ、いろいろな方法をお試しくださいね。

よかったらシェアしてね!
目次
閉じる