洗濯物

WEB

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

幅が 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;
}

 

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

float01

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

今回は、3つの方法をご紹介したいと思います。

解決方法

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

3つ目のボックスに item-no-margin というクラス名を与え、スタイルシートに下記を追記すると、下の画像のように綺麗にボックスを並べることができます。

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

 

float02

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

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

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

 

nth-child の部分が擬似クラスの指定となります。

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

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

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

ネガティブマージンとは、margin プロパティに、マイナスの数値を指定すること。マージンがボックスからはみ出るようなイメージです。

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

 

margin-right

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

まとめ

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

ぜひ、いろいろな方法を試してみてください。

 

 
スポンサードリンク
 
スポンサードリンク

郵便受け要素の高さを揃える 『matchHeight.js』の使い方前のページ

font-weight プロパティについて次のページタイプライター

関連記事

  1. カメラ

    WEB

    WordPressで最低限おさえておきたい画像処理について

    せっかく良い記事なのに画像がぼやけている…という残念なブログに会うこと…

  2. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法

    「画像に枠線を作りたい。だけど、どうやって作ればいいの?」そん…

  3. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法

    WordPress 専用クラウド型レンタルサーバー『wpX Speed…

  4. Google Search Console
  5. ケーブル

    WEB

    『お名前.com』で取得したドメインを『エックスサーバー』に紐付けする方法

    ここでは お名前.com で取得したドメインを、エックスサーバー(XS…

  6. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!

    ワードプレス(WordPress)でブログを始める際にまず必要となるの…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. fontAwesome
  2. ドアに差し込まれた封筒
  3. ガッツポーズする男性
  4. タイプライター
  5. カメラ
  6. ドメイン
  7. 海に浮かぶ男性
  8. 段ボールを持つ女性
  9. 郵便受け
  10. コントローラー

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. ドメイン

    WEB

    エックスサーバー(エックスドメイン)でドメインを取得しよう
  2. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法
  3. チェーン

    WEB

    footer を最下部に固定したい場合のコード
  4. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法
  5. fontAwesome

    WEB

    超簡単!!Font Awesome(Version 5)の使い方
PAGE TOP