CSSの新しい単位「svh」について

こんにちは、ちゃるです😀
今日はCSSで使える「svh」という単位について調べました！
pxやvhはよく使ってたけどsvhって…？

svhという単位は、CSS3にて導入された単位です。

svhは「スクリーン上の縦方向のビューポートの高さの単位」を表します。

この単位は、スクリーン上の縦方向のビューポートの高さを1として、その縦幅の比率を表すことができます。

例えば、スクリーン上の縦方向のビューポートの高さが500pxの場合、100svhは500pxに相当します。

この単位は、スクリーンサイズや画面の比率にかかわらず、常に同じ比率を維持したレイアウトを実現するために使用されます。

CSSでsvhを使用するには、以下のように記述します。

Copy code/* 100svhの高さを持つ要素 */
.element {
  height: 100svh;
}

このように、CSSでsvhを使用することで、スクリーンサイズや画面の比率にかかわらず、常に同じ比率を維持したレイアウトを実現することができます。

svhは以下のブラウザで使えます。

• Google Chrome（ver. 49以降）

• Mozilla Firefox（ver. 44以降）

• Apple Safari（ver. 10以降）

• Microsoft Edge（ver. 16以降）

現在の主流ブラウザならほぼ大丈夫ですね！

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀