「tableが横に長くなって親要素からはみ出てる!」tableなど子要素が親要素をはみ出す原因と解決方法を解説します。【原因1】合計widthが100%を超えている子要素が親要素をはみ出すのは子要素の合計幅が親の幅を超えているためです。青背景が親要素の枠、白が子要素の枠です。100%」が指定されています。これだけなら親の幅と同じになるはずです。他に「border:1px」と「padding:20px」が指定されています。通常widthにborderとpaddingは含まれません。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む子要素の合計幅は「(border-left-width)+(padding-left)+(width)+(padding-right)+(border-right-width)」となります。上記の例の場合では100%+22pxとなり、親の幅超えてしまうというわけです。【解決方法1】width:autoにする子要素をwidth:autoにするとborderとpaddingを含めて親の幅になるように自動調整してくれます。<div>divなど</div></div>【解決方法2】box-sizing:border-boxを指定するwidth:autoにできない、あるいはwidth:autoにしても理想の形にならない場合はbox-sizing:border-boxを指定しましょう。box-sizing:border-boxはwidthの指定がborderとpaddingを含んだものにするCSSです。<div>divなど</div></div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【原因2】半角英数が折り返されない半角英数は途中に空白か全角がない限り改行されません。スマホ版のtableの中にURLの記述などがあるときによく起きる現象です。</table></div>【解決方法】word-break:break-allを指定word-break:break-allを指定すると半角英数が折り返されるようになります。</table></div>word-breakの初期値はnormalであり、これは英単語の途中で改行されないようになっています。これにより単語の終わりで改行され読みやすくなるというものです。URLのように単語の切れ間がない場合、改行されず親の幅を超えてしまうという不具合を発生させてしまいます。これを改行させるためにword-break:break-allを指定するものです。word-breakは継承するためbodyに指定するとサイト全体に効きます。word-break:break-allを指定するとすべての英単語が途中で改行されてしまいます。日本語しかないサイトであれば気になりませんが、英語をよく使うサイトであれば単語途中での折り返しが気になってしまうでしょう。これを避けるためtable内だけにword-break:break-allを指定するのもいいでしょう。以上、tableなど子要素が親要素をはみ出す原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。