みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、簡単に解決できる

CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、簡単に解決できる

CSSを書いていると

trouble
あれ、デザイン崩れた…なんでや…

なんてことは、よくありますよね。
原因がすぐわかればいいんですが、そうでないときもしばしば。

そんなときは、まず余白(padding)を気にしてみてください。

* { box-sizing: border-box; }

↑のCSSを追加するだけで、余白がからんだデザイン崩れが起きないようにコントロールすることができるようになりますよ。

miyachi
簡単にCSSがかけるようになるので、本当におすすめ!

【この記事の目次】

CSSの余白paddingが問題になるのは、要素のサイズがおかしくなるから

CSSで余白をつけるときは、marginとpaddingを使いますよね。

実は、何も対策をしていないとpaddingはデザイン崩れの原因になりやすいんです。

question
なんでpaddingが問題になる?

どういうことか、説明していきますね。

余白paddingの罠

まず、試しに幅が200pxの箱を3つ用意してみます。

<div class="container">
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
</div>
/* 箱 */
.box {
  width: 200px;
  border: 3px solid #ff0000; /* わかりやすいように線を引く */
}
横幅200pxの箱が3つ縦に並んでいる

まあ、なんの変哲もないです。

ここで、最後の箱にだけpaddingを設定します。

<div class="container">
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box">.box<br />横幅200pxの箱</p>
  <p class="box padding">.box<br />横幅200pxの箱</p>
</div>
/* 箱 */
.box {
  width: 200px;
  border: 3px solid #ff0000; /* わかりやすいように線を引く */
}
/* 余白設定 */
.padding {
  padding: 20px;
}
横幅200pxの箱が3つ縦に並んでいるが、最後の1つだけ大きくなっている

・・・ん?

question
横幅widthは変えてないのに、なんで最後の箱だけおおきくなるん?

何故か、勝手に最後のpaddingを設定した箱だけ横幅が200pxよりも大きくなってしまいました。

実は、ブラウザは余白を↓のように扱います。

横幅が200px + 左の余白paddingが20px + 右の余白paddingが20px
合計すると横幅240pxの箱だね!

trouble
・・・ちがうんや。
あくまで幅は200pxで、その内側に20pxずつの空白が欲しいんや。

余白paddingが原因で、デザイン崩れが起きないようにするCSS

余白paddingが悪さをするのであれば、さきにブラウザのpaddingの扱い方を変えてもらいましょう。

横幅が200px + 左の余白paddingが20px + 右の余白paddingが20px
合計すると横幅240pxの箱だね!

ではなく、

横幅が200px。
その中に左の余白paddingが20px、右の余白paddingが20px
だから実際に箱の中身を表示できるエリアの幅は160pxになるね!

という形にしてもらいます。

つまり、人間の自然な考え方に合わせて、ブラウザに幅を計算してもらおう、ということ。

だって楽にコーディングしたいじゃん。

具体的には↓のCSSを追加することで解決します。

* {
  box-sizing: border-box;
}

すべてのHTML要素に、余白の扱い方を変えてもらうCSSです。
さきほど、勝手に横幅が大きくなっていたところも解決します。

横幅200pxの箱が3つ縦に並んでいる

これを適用すると、paddingが原因のデザイン崩れは回避できます。

ポイント

ボックスのサイズ計算方法はbox-sizingで制御する

box-sizing: border-box; でデザイン崩れをあらかじめ防いでおこう

実は、余白paddingは何も設定せずに使うとデザイン崩れの原因になります。
余白を足した分だけ、どんどん横幅・高さが大きくなってしまうんです。

だから、先回りしてpaddingが原因のデザイン崩れがおきないようにするのがオススメ。

* {
  box-sizing: border-box;
}
miyachi
これだけでデザイン崩れがおきにくくなるから、box-sizingを追加しておこう!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア