この設定は width:min(400px, 70vw); minは小さい値が採用される。画面を広げた場合では400px。
画面を狭めると70vw(画面の70%）が適用される、画面をいっぱいに広げたら400pxが適用される。minは最大値を決める（400px以上大きくならない値を決める）
画面を狭めると70vw(画面の70%）が適用される、画面をいっぱいに広げたら400pxが適用される。minは最大値を決める（400px以上大きくならない値を決める）
この設定は width:max(400px, 50vw); maxは大きい値が採用される。画面を広げた場合では50vwが採用。
画面を狭めるとが400pxが適用される、画面をいっぱいに広げたら50vw(画面の50%）が適用される。maxは最小値を決める（400px以上小さくならない値を決める）
画面を狭めるとが400pxが適用される、画面をいっぱいに広げたら50vw(画面の50%）が適用される。maxは最小値を決める（400px以上小さくならない値を決める）
この設定は width:clamp(400px, 50vw ,600px); clampは最小値、推奨値、最大値を設定。この場合、最小値、最大値を超えない範囲で推奨値が適用される。
どんなに画面を狭めても400px以下にならない。どんなに画面をいっぱいに広げても600px以上にならない。
どんなに画面を狭めても400px以下にならない。どんなに画面をいっぱいに広げても600px以上にならない。
この設定は font-size:clamp(8px, 3vw ,26px); clampは最小値、推奨値、最大値を設定。この場合、最小値、最大値を超えない範囲で推奨値が適用される。
どんなに画面を狭めても8px以下にならない。どんなに画面をいっぱいに広げても26px以上にならない。
どんなに画面を狭めても8px以下にならない。どんなに画面をいっぱいに広げても26px以上にならない。
今回はしまぶーさんのこちらの動画から学ばせてもらいました。
もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.
キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.
オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.
ぺージの先頭に戻る(Return to top of page)
©2020年9月 Challenge programming