洗濯物

WEB

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

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

 

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

float01

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

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

解決方法

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

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

 

float02

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

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

 

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

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

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

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

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

 

margin-right

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

まとめ

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

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

 

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

関連記事

  1. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…

  2. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  3. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not authenticate…

    『WP Mail SMTP』は、Gmailなどのメールサーバーを使って…

  4. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法

    TCDさんのテーマ『MAG』は、デフォルトのままだとトップページにもパ…

  5. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighter』

    「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができ…

  6. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方

    float させた横並びのカラムの高さをそろえたい!! だけど、ボック…



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

wordpress

よく読まれている記事

  1. ネットショッピング
  2. wordpress,ワードプレス
  3. ドアに差し込まれた封筒
  4. 404
  5. Google Search Console
  6. ブランコに乗る女の子
  7. fontAwesome
  8. カメラ
  9. 緑のドア
  10. 洗濯物

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

アフィリエイトサイトにはDiverもお勧め!!

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

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

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について
  2. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!
  3. ガッツポーズする男性

    WEB

    アドセンスのサイト追加審査に一発合格したブログの詳細を公開!!
  4. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  5. 404

    WEB

    Broken Link Checker でリンクエラーになってしまう?その対処法…
PAGE TOP