divの枠が外にはみ出すのを2STEPで解消するCSS設定

はじめに

divで囲んだ枠にpaddingを設定したら、コンテンツの横幅からdivが少しはみ出た」という経験はないでしょうか?

これがよく起こるケースは、divで枠を入れ子にしている場合や、PC用表示のdivは要素のwidthをピクセル指定にして、レスポンシブ用のレイアウトではwidth:100%で指定している場合です。

私はコーディングの経験が浅い頃に同じ経験をして悩みましたが、CSSに1行追加するだけでこれを解消できる方法を学習しましたので、STEPを踏みながら紹介します。

現象の再現

「天は人の上に人を造らず人の下に人を造らず」と言えり。
されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。

グレー背景の枠が外の枠からはみ出ます(グレーの枠のwidthは100%で設定しています)。

目次

まずはdivでレイアウトを作成する

今回は全て下記のHTMLを使用しています(「現象の再現」に使用しているHTMLも同じです)。

HTML

<div class="test">
 <p>「天は人の上に人を造らず人の下に人を造らず」と言えり。<br>
 されば天より人を生ずるには、(以下略)</p>
</div>

CSS

.test {
 width:100%;
 padding:10px;
 border:1px solid #ccc;
 background: #f2f2f2;
}

上記のHTMLとCSSを使用すると「現象の再現」のようにグレーの枠がはみ出て表示されます。

この理由は、CSSでwidthを100%で設定した上に、paddingを10pxで設定しているためです。

左右合計20pxの余白が追加されているため、20px分横幅が広くなってしまい、その結果右にはみ出してしまっています。

これを解消するにはbox-sizing:border-boxを追記します。

box-sizing:border-box;を追記する

box-sizingは、ボックス内のサイズをどのように算出するかを指定するプロパティになります。

paddingおよびborderをボックスサイズに含めるか含めないかを指定することができます。

box-sizingの初期値ではpaddingおよびborderはボックスサイズに含めない設定となっており、ボックスサイズに含ませるためにはbox-sizing:border-boxをCSSに設定する必要があります。

STEP1で作成したCSSの最終行にbox-sizing:border-box;を追加します。

CSS

.test {
 width:100%;
 padding:10px;
 border:1px solid #ccc;
 background: #f2f2f2;
 box-sizing:border-box; //ここを追加
}

できあがったもの

「天は人の上に人を造らず人の下に人を造らず」と言えり。
されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。
されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。

右にはみ出ていたグレーの枠が左右均等に収まりました。