どうも7noteです。分かっているようで難しいautoと100%の違い。

widthを指定する際、初期値でautoが入っています。
しかし、場合によっては100%を指定しなければならない場面もあります。

特に初心者の方がごっちゃになりやすいと思うので、違いを分かりやすくまとめてみました。

違い① ブロック要素かインライン要素での違い

ブロック要素の場合

• width: auto;
  • 横幅　＝　親要素の幅いっぱい
• width: 100%;
  • 横幅　＝　親要素の幅いっぱい

インライン要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　コンテンツ分（widthは効かない）

インラインブロック要素の場合

• width: auto;
  • 横幅　＝　コンテンツ分
• width: 100%;
  • 横幅　＝　親要素の幅いっぱいまで広がる

※コンテンツ分 = 文字なら文字数分、画像なら画像の横幅分が要素の幅になる。

違い② 左右のmarginが加わると・・・

ブロック要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; margin: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; margin: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い③ 左右のpaddingが加わると・・・

ブロック要素の場合

• width: auto; padding: 0 50px;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
• width: 100%; padding: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

インライン要素の場合

• width: auto; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; padding: 0 50px;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px;
  • 横幅　＝　親要素の幅いっぱい + 左右50pxの余白

違い④ 左右のpaddingが加わり、かつbox-sizing: border-box;をかけると・・・

ブロック要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

インライン要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白（widthは効かない）

インラインブロック要素の場合

• width: auto; padding: 0 50px; box-sizing: border-box;
  • 横幅　＝　コンテンツ分 + 左右50pxの余白
• width: 100%; padding: 0 50px; box-sizing: border-box;
  • 横幅 + 左右50pxの余白　＝　親要素の幅いっぱい

表で比較するとこんなかんじ

①width指定のみ

②width・margin指定

③width・padding指定

④width・padding・box-sizing指定

まとめ

なんか画面外にまでスクロールできてしまったりするとき、この指定が適切でない場合がよくあります。

コーディングに慣れているととくに意識せず、適切なものを指定できるようになりますが、
コーディング初心者の頃はなんとなくで指定してしまいがちです。

自分で理解できていないソースはデザインが崩れてしまう要因になりやすいので、なんとなくではなくしっかり理解して考えられたコーディングが必要です。

実際に背景色を入れながら試してみると、それぞれの違いがよくわかると思いますのでやってみてください。

おそまつ！