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

パソコン時代のCSSは、横幅（width）はpxなどの固定値を使うことが多かったのですが、最近はスマホに対応したレスポンシブデザインが主流になり、横幅に%などの可変値を使うケースが増えてきました。

しかし、レスポンシブデザインのcssに慣れていないと、スマホで確認したときにレイアウトが崩れてしまうケースがあります。

テキストがはみだしたり、右側に謎の余白ができてしまったり…

原因はcssのwidth・padding・borerの設定にあることが多いので、確かめてみてください。

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

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

たとえば【width】と同じ要素に【padding:0 10px 0 10px】を設定している場合です。

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

【width:100%】の場合は、左右の余白10pxを含まずに横幅100%になるため、実際の横幅は100%+20px（左右の余白分）になります。

borderもpaddingと同じで、同じ要素にwidth:100%とpaddingやborderを指定しているとレイアウトが崩れます。

そんな場合はwidth:autoに変更したら解決するかもしれません。

cssはwidthに何も指定しない場合はautoになります。

メディアクエリを使ったレスポンシブデザインの場合、「ある条件下でwidthを上書きする」という指定が必要なため、width:autoが活躍します。

たとえば、パソコンの大きなディスプレイで見たときは【width:980px】だけど、スマホなどの小さいディスプレイで見たときはwidth:autoに上書きし、スマホの画面幅に合わせる･･･という使い方です。

【width:auto】と【width:100%】の挙動の違いに気をつけてくださいね！