レガシーな人間のCSS関連メモ "rem"と"vh"
久しぶりにWebページ作成をすると、いろいろと時代に置いていかれているところがあって刺激になります。
ほんと進歩の速い分野です。
フロント系の方々にとっては常識かもしれませんが、とりあえずメモ。
- "rem"という単位が導入されてた
ルートのfont-sizeを基準とした単位らしい。
html{font-size:10px}
と定義しておくと
p{font-size:1.5rem}
は10×1.5pxに対応するようです。
"em"のroot要素参照版なので"root em"→"rem"だそうな。
レスポンシブ対応などで効果を発揮しそうな予感です。
- "vh","vw"という単位も導入されてた
これまた単位ですが、viewportに対して大きさを指定できるようです。
pxのような絶対値指定でもなく、%のように親要素に対する割合でもなく、見えている領域に対する指定ができます。
画像の表示などで便利そうです。
参考：【CSS3】最新の単位［vw］［vh］［vmin］［vmax］の解説。 - ONZE
- CSS直書きはもう古かった
これはなんとなくそんな気はしていましたが、直接CSSを記述するよりも変数が使えたりするメタ言語で書いてからCSSに変換するのが今や一般的なんでしょうね。
bootstrap4が使いたくて中身を除くとLESSも同封されていました。
また勉強しておかなくちゃ。。。
参考：CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita
ポートフォリオサイト（という名の自分の備忘録がわりのアカウントリスト）を作ろうとWebページ作成を始めたのでこういった発見がまだまだありそうです。
