2019/06/24)この記事では子要素が横幅100%にも関わらず、親要素をはみ出してしまう原因と、対処法であるCSSの「box-sizing」について解説します。くま横幅100%だったら親要素と一緒の横幅になるんじゃないの?なんではみ出す事があるんだ?あざらしその考えは基本的には間違ってないよ!でも横幅(width)の外側にはボーダーや余白があるから、100%だとはみ出ることがあるんだ!横幅100%でもボーダーや余白があると親要素をはみ出します。ボーダーや余白はwidthの外側にある為、その分要素自体が大きくなり、親要素をはみ出すことになってしまうのです。この解説のポイントは下記になります。子要素のwidthが100%の場合、その要素は親要素と同じ横幅になります。ところが、この子要素にボーダーや余白が設定されていると、親要素をはみ出してしまう現象が起こります。コードではみ出すところを見てみよう実際にコーディングしたものを確認してみましょう。widthに100%を設定していますが、親要素をはみ出しているのが確認出来ます。親要素をはみ出す原因なぜこのようなことが起こるのかというと、「要素の横幅にボーダーや余白が含まれていない」からです。下記の図を見てください。marginなどの関係を表したものです。(※この概念をボックスモデルと呼びます。)これを見るとわかるように、横幅(width)にはボーダー(border)や余白(paddingやmargin)が含まれません。横幅(width)の外側に、ボーダー(border)や余白(paddingやmargin)が追加されるので、全体の大きさは指定した横幅(width)よりも大きくなってしまうんです。widthが500pxのボックスがあるとして、なにもしなければボックスの横幅は500pxのですが、padingを左右に10pxずつ設定すればその分ボックスが20px広がり、全体としては520pxの横幅に広がります。ボーダーが左右に10pxずつあれば、トータルでは540pxの大きさになってしまいます。ちなみにマージンやパディング、ボックスモデルについて基本的な説明は下記の記事で解説しているので参考にしてください。【css】marginとpaddingの使い方や違いを解説この記事ではCSSのmargin(マージン)とpadding(パディング)について、それぞれの使い方や違いをわかりやすく解説していきます。同じように、横幅100%でも余白やボーダーが設定されていると親要素をはみ出してしまいます。横幅(width)100%の設定によって、子要素の横幅は親要素と同じになりますが、その外側にボーダーや余白が追加される為、全体で見ると親要素より大きくなってしまうからです。あざらし要するにボーダーや余白の分、要素トータルのサイズは大きくなるんだ!親要素をはみ出す場合の対処法くまなるほど!そういうことだったのか...あざらし解ってしまうと単純だよね!対処法も簡単だから覚えておこう!親要素をはみ出す現象を解決する方法としては、CSSの「box-sizing」プロパティを使う方法がシンプルで簡単です。box-sizingプロパティとはbox-sizingは、「どこまでを横幅・高さとするか」という解釈を変更できるプロパティです。これを変える事で、「横幅や高さにボーダーと余白(padding)を含める」ように変更する事ができます。以下のようにして使います。値;box-sizingの値box-sizingの値は以下のいずれかを指定します。content-box;デフォルト値。横幅・高さに余白やボーダーを含めないborder-box;横幅・高さに余白(padding)やボーダーを含めるinherit;親要素の値を引き継ぐbox-sizingの各値についての解説は後ほどじっくりしますが、まずは「どういう理屈ではみ出さなくなるのか」を解説していきます。横幅や高さにborderやpaddingを含む事ができるbox-sizingの値を「border-box」に変更すると、「横幅・高さにborderやpaddingを含める」という解釈に変えることができます。なるのかというと、widthが500pxの要素であれば、borderやpaddingを設定してもトータルの大きさは500pxのまま変わることはありません。あざらし横幅(width)の内側にボーダーや余白が入るイメージだよ!marginについて※marginに関しては、横幅・高さには含まれるようにする方法はありません。marginは「外側の余白」なので、横幅・高さに含まれるようになると、要素の外側に余白が取れなくなってしまい逆に困ってしまいますね。border-box」に変更するだけで解決出来ます。実際にコードでもみてみよう実際にコーデでもどうなるかみてみましょう。子要素box-sizing:border-box;を追記しただけですが、はみ出さなくなりましたね!borderやpaddingが、widthに含まれるようになった為、親要素と同じ横幅になっているんですね。box-sizingプロパティの解説詳細box-sizingの値について解説していきます。「content-box」はデフォルト値です。何も指定しなければこの値になります。指定する場合は下記のように記述します。content-box;この値にすると、widthとheightにpaddingとborderは含まれないという解釈になります。上述したようにcontent-boxには、borderやpaddingを使うと思いがけず親要素をはみ出してしまうという問題点があります。この原因は、「width、border、padding」の合計が100%を超えてしまっているから起こります。合計が100%を超えると、親要素より子要素が大きくなるのではみ出してしまうことになります。border10%みたいな...」そのように考える方もいるかもしれませんが、その方法は実は使えません。いうのもborderの太さは「%」を使うことができないという仕様があるからです。横幅80%パディング10%ボーダー5pxという風に、ボーダーだけpx指定をすることになります。これでは「width、border、padding」の合計をぴったり100%にすることができないため、はみ出してしまったり、逆に不要な余白ができてしまうことになるんです。レスポンシブデザインのように横幅100%を多用するサイトでは、content-boxのままではとてもコーディングしづらいので、次に紹介するborder-boxに変えて制作することが多いです。下記のようにして指定します。box-sizing:border-box;border-boxを使うと、widthとheightにpaddingとborderが含まれるようになります。widthが500pxのボックスにborder10px、paddingを10pxとすると、ボックスの横幅はかわらず内側にborderとpaddingが適用されます。このように横幅・高さにpaddingとborderが含まれるようになるため、widthに100%を設定してしまえば、あとはどんなpaddingとborderを取っても、親要素をはみ出すことがなくなりレイアウト崩れを気にせず使う事ができます。box-sizing:inheritの詳細inheritとすると親の要素の設定を引き継ぎます。box-sizing:inherit;box-sizingのブラウザ対応状況box-sizingはCSS3から登場した比較的新しいプロパティですが、ほとんど全てのブラウザが対応しています。対応状況についての詳細はこちら何も気にせず使ってしまっても問題ありません。box-sizingを全要素に適用する方法border-boxは使い勝手が良くレスポンシブデザインと相性が良いため、最近のサイト制作では全ての要素にborder-boxを適用する事が増えてきました。一部の要素だけborder-boxに変えると、サイト内で横幅の解釈が変わりややこしくなるため、全てを統一した方が便利です。全要素にスタイルを適用するには、全ての要素を指定する「*」(アスタリスク)を使います。擬似要素にも適用するため下記のように書くと良いでしょう。border-box;}まとめ横幅100%でも、ボーダーや余白を設定すると親要素をはみ出デフォルトでは横幅や高さにボーダーや余白が含まれず、ボーダーや余白の分要素が大きくなるため、親要素をはみ出すbox-sizingは、「どこまでを横幅・高さとするか」という解釈を変更できるプロパティbox-sizingを「border-box」にすると「横幅・高さにボーダーと余白(padding)を含める」ように変更する事ができるので、余白やボーダーを設定しても、親要素をはみ出さなくできるすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。斜めや3色のサンプルありリファレンスCSSでカーソルの形を変えるにはcursorを使おうリファレンスCSSのtransisionの使い方まとめ。nowrapやnormalについて解説リファレンスすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。