パソコンと女性

【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に変更したら解決するかもしれません。

レスポンシブデザインには【width:auto】が便利

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

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

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

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