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

2020年5月20日

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

ケースとしてはよくあるのはレスポンシブ対応用のCSSでPC用表示の場合は要素のwidthをピクセル指定にしていて、タブレットやスマホ用のレイアウトだとwidth:100%に指定している場合です。

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

現象の再現

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

本来は外の枠内に左右均等に収めたいのに、内側の枠(グレー背景)が若干右により、その結果内枠全体が少し右にはみ出てしまいます。

ベースとなるhtml

現象の再現は、下記のthmlを記載しています。

以降ご紹介するcssも、全て同じhtmlをベースとしています。

HTML

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

まずは記述してみる

CSS

同じく上の現象を再現したCSSは次のとおりです。

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

この問題点は、widthを100%で設定している上に、paddingを10pxで設定しているという点です。

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

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

box-sizingを記述する

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

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

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

CSS

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

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

これを記述した結果が以下のとおりです。

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

という訳で奇麗に左右均等に収まりました。