単位の重要性について(px,%,em,rem,vw,vh…)

単位の重要性については、最近作品を作り始めて、重要性に気づきました。

これまでは、px,%を多用していましたが、vw,vhを使った方が良い場合が多いですね。

px:10pxだと、画面が小さくなろうと指定した10pxのままです。

%:親要素の値によって変わります。
  例:body{font-size: 20px;} p{font-size: 80%;}
  この時のp要素のfont-sizeは、16pxになります。

em:これも%と同様に、親要素の値によって変わります。

rem(root em):ルート要素のフォントサイズによって値が変わります。
       ルートとは、最上層に位置する(htmlタグ)のことです。
       つまり、<html></html>のことです。
       remのいいところは、親要素によって値を一つずつ変えなくていい点です!!

vw(viewport width):これは、viewport(表示領域)の幅に合わせて自動で指定してくれます。
          vwのいいところは、レスポンシブなどのPC、スマホ、タブレットなどで画面いっぱいに表示したい時など、に100vwとすると、どのデバイスでも画面いっぱいに表示することができます。
vh(viewport height):上記のvwの高さバージョンです。使い道としては、画像を中央に正確に配置したい時に、要素の高さが分かっていれば、marginプロパティでtopとbottomの値を[(100 – height)/2]vhに設定するだけで表示できます。
さらに、1カラムで表示したい時にも、100vhで簡単に指定できます。

なぜ、vw,vhを進めるのか、これには、理由があります。最近は、スマホでWEBページを見るユーザーが多くなりました。
つまり、WEBページを作る側もそれに合わせる必要が出てきました。
いわゆる…レスポンシブデザインですね!!
モバイルファーストと言うこともありますしね!!

さらに、これを後押ししているのが、googleがデザインパターンとして、レスポンシブデザインを進めているところもあります。

リファレンス:https://yattokoo.com/css-tani#4

もりけん塾
もりけん先生ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です