【CSS】width:”auto”とwidth:”100%”の違い

【CSS】width:"auto"とwidth:"100%"の違い

レスポンシブレイアウトとCSSのwidth

これまでCSSのwidth(横幅)はpxを使った固定値を使うことが多かったのですが、スマホにも対応したレスポンシブレイアウトを使うようになり、%による可変値を使うケースが増えてきました。

すると、スマホで確認したときにどうもレイアウトがずれるんですよね。。。右側に謎の余白ができてしまう。どうやら、あるdivが親要素の幅をはみだすことによりレイアウトを崩しているようです。

調べてみると原因はCSSのwidthの指定の仕方にありました!

width:”auto”とwidth:”100%”の違い

width:”auto”width:”100%”は親要素の横幅に合わせるという点でよく似ているのですが、同じ要素にpaddingやborderを指定した場合に表示にちがいがあります。

たとえば、padding:0 10px 0 10px;
を一緒に指定している場合

width:”auto”の場合は、左右の余白10pxを含んで横幅100%になります。

一方、width:”100%”の場合は、左右の余白10pxを含まずに横幅100%になるため、実際の横幅は100%+20px(左右の余白分)になります。

同じ要素にwidth:”100%”とpaddingを指定していたため、レイアウトが崩れていたのですね。。。
width:”auto”に変更したら問題なく表示されました!

メディアクエリを使うときはwidth:”auto”が便利

CSSではデフォルトで、widthに何も指定しない場合はautoになるため、これまであまり意識していませんでした。しかし、メディアクエリを使ったレスポンシブレイアウトの場合、ある条件下でwidthを上書きするという指定が必要なため、width:”auto”が活躍します。

たとえば、PCの大きなディスプレイで見たときはwidth:”940px”だけど、スマホなどの小さいディスプレイで見たときはwidth:”auto”に上書きし、スマホの画面幅に合わせる・・・という使い方です。

みなさんも、width:”auto”とwidth:”100%”の違いに気をつけてください!