CSSのカスタムプロパティで快適な「vw」ライフを送ろう | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックスCSSで要素の幅などを指定するとき、「vw」という単位があります。そのままだとちょっとクセの強い「vw」ですが、CSSのカスタムプロパティとJavaScriptを用いればもっと安心して使えるようになるよ。というお話です。 「vw」が破綻を招くワケ 「vw」は、便利ですが使いどころによってはレイアウトの崩壊を引き起こします。まず、「vw」を理解するために「%」との違いや、その問題点についてお話しします。 親要素を基準とした「%」 「%」は、CSSでよく利用される単位のひとつです。親要素の幅を100%としたときに何%になるか、を指定します。例えば、親要素の幅が500pxのとき、子要素に「width: 10%;」と指定すれば、500pxの10%なので50px幅になります。 ビューポートを基準とした「vw」 次に「vw」ですが、こちらはビューポートの幅を100%としたときの相対的なサイズを指定しま
