CSSでwidth:100%;を指定してもはみ出てしまうときは、あるプロパティを一緒に指定してやると解決します。あるプロパティとは、新しくCSS3で追加されたbox-sizingです。今回の鍵はborder-boxで、これをwidth: 100%;を指定した要素に一緒に指定してあげると、はみ出さずにきっちり収まります。 例 緑色の箱内に「ブロックA」を収める例を示します。 box-sizingを指定しなかった場合、あるいはbox-sizing: content-box;を指定した場合は、画像上側のように右端が少し飛び出してしまいます。 しかし、box-sizing: border-box;を指定した場合は、以下のようにきちんと収まります。 解説 なぜこのようなことをしないといけないかというと、まず、width: 100%;やheight: 100%;における指定はpaddingとbo
