コーディングの効率化を極めるためのテクニック
頭では理解しているのに、実際使ってみるといまいち理解していなかったwidth。
コーディングする上で基本中の基本の『width』ですが、実は奥が深いのです！
今回は、widthの使い方を復習して見ましょう。
widthとは？
widthとは、横幅を指定するタグです。
width:200px;のように、指定すれば横幅がその値になります。
widthのデフォルト値は、width:auto; です。ということは、デフォルト値とは、widthを設定しないときは、auto(自動）になります。
中のコンテンツ量によって、横幅が決まるということです。
ここまでは基本のおさらいです。
また、widthにはいくつか種類があります。
width:auto;
width:100%;
min-width:100%;
max-width:100%;
などです。
width:auto;とwidth:100%;の違いとは？
ウェブ制作では、画面サイズいっぱいに文字や画像が配置されているのをよく見かけます。
画面サイズいっぱいに広げるとは、その名の通り１００％指定すれば画面サイズいっぱいになります。
画面が小さい場合でも、その画面いっぱいに広がります。
さて、autoにした場合はどうでしょう。
先ほども説明したように、auto=自動なので中身の大きさで固定されてしまいます。
中身の大きさが画面サイズよりも小さい場合は余白ができてしまい、中身の大きさが画面サイズよりも大きいと全て入りきらないのです。
min-widthとmax-widthの違いとは？
min-widthは最小の横幅を指定するときに使います。
逆に、max-widthは最大の横幅を指定するときに使います。
どちらも流動的に横幅を変化できます。
min-width:100%;は、最小で100%の横幅にしてね！ということです。言い換えると最低でも100%、100%以上の大きさにはいくらでも広げられるということです。
画面いっぱいにコンテンツを広げて余白を作りたくないときには、このmin-width:100%;を使用できるのです。
max-width:100%;は、min-widthの逆なので、最大で100%の横幅にしてね！ということです。言い換えると、最大100%、それ以下にはいくらでも狭められるということです。
これから習っていきますが、スマートフォン向けに画面を狭めたりするテクニック（＝レスポンシブ）で使用できます。
最近のWebサイトの多くがレスポンシブWebデザインで制作されています。
この辺りのwidthの指定方法は、基本中の基本なのでしっかり学んでいきましょう！
以上メモでした。