width/max-width/min-widthの利用するパターンについて

# 記事の目的
各プロパティの意味は分かっていても、いざこれらを使うとなると混乱してしまうため
使い分け方を覚えたいと思いこの記事を残します。

## 各プロパティのおさらい

#### width
要素の**幅**を指定します。

#### max-width
要素の幅の**最大値**を指定します。
widthに相対値(パーセントなど)を指定した上でこのプロパティを使用します。

#### min-width
要素の幅の**最小値**を指定します。
widthに相対値(パーセントなど)を指定した上でこのプロパティを使用します。

## widthの使い方
### ①要素の幅を絶対値を用いて指定する。
利用する場面→
画面の幅や影響されずにサイズを指定したい場合
```css
.hoge{
    width: 960px;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="wvjwKVV" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/wvjwKVV">
  Untitled</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ②要素の幅を親要素の幅を基準として指定する。
利用する場面→
レスポンシブ対応、レイアウトが〇：〇の割合だと決まっているときなど
```css
.hoge{
    width: 1000px;
}
.hoge .left{
    width: 70%;/*700px*/
}
.hoge .right{
    width: 30%;/*300px*/
}
```
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="PoeYZZr" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/PoeYZZr">
  width-2</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## max-widthの使い方
### ①要素の幅を相対的にしつつも上限を決めておく
利用する場面→
小さなスクリーンでは画面に広く表示したいが大きなスクリーンでは固定幅にしたいとき
例えば画像などは引き伸ばしすぎると荒くなるので最大幅を設定しておく
```css
.hoge{
    width: 80%;
    max-width: 200px;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNvBxWz" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/rNvBxWz">
  max-width-1</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ②スクリーンから要素がはみ出ないようにする。
利用する場面→
スマホなどの小さなスクリーン内にも収めたいとき
`max-width: 100%`と指定することで少なくともスクリーン幅より幅が大きくなることはないため
スクリーンからはみ出ることはなくなる。
```css
.hoge{
    max-width: 100%;
    height: auto;
}
```

:::note warn
max-witdhだけを指定すると「幅のみ制御されて高さがそのまま」＝縦長になったりするので
height: auto;も指定して縦横比が変わらないようにすることを推奨します。
:::


### ③メディアクエリでスマホやタブレット判定の条件を指定する際に使用する
利用する場面→
レスポンシブ対応かつPCファーストの場合、パソコンでの表示を基本CSSとして実装し、スマホ幅の場合の指定をメディアクエリ内に記述する。
```css
@media screen and (max-width:599px) { 
 /*ここにCSSを書く*/
}
```

## min-widthの使い方
### ①要素の幅を相対的にしつつも下限を決めておく
利用する場面→
大きなスクリーンでもなるべく幅を小さくして表示したいが、小さなスクリーンだと狭くなりすぎてしまう場合
使用するシチュエーションもmax-widthの反対の場合という認識でよい　　　
```css
.hoge{
    width: 20%;
    min-width: 800px;
}
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyebGvQ" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/dyebGvQ">
  min-width-1</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ②メディアクエリでPC判定の条件を指定する際に使用する
利用する場面→
レスポンシブ対応かつモバイルファーストの場合、スマホでの表示を基本CSSとして実装し、PC幅の場合の指定をメディアクエリ内に記述する。
```css
@media screen and (min-width:960px) { 
 /*ここにCSSを書く*/
}
```

## おまけ
### Flexboxについて
Flexboxを使用すると`display: flex`を指定した子の要素の幅や高さもブラウザが調整してくれる
反面、一部の子要素のみを固定幅にするのは`width`を指定するだけでは実現不可能である。

https://coliss.com/articles/build-websites/operation/css/making-width-and-flexible-items.html

### min-heightの使い道について
bodyタグに対して`min-height: 100vh`と指定すればWebサイト全体の高さ＝ポートビューの高さになるため
縦スクロールの発生しないサイトが作成できる。

ただし`min-height: 100vh`にも問題がありそう。

https://web-camp.io/magazine/archives/91511

## 余談
調べているとどんどん問題点が出てきて、解決策はコレ！というのが出てくるので
この記事をまとめたから万事解決とはなっていない。
幅や高さの指定について調べる際の一歩目になっていれば。