【CSS】CSSだけで画面サイズを取得する

はじめに

みなさんは、CSSで画面サイズを取得しようと思ったことはありますか？？
画面サイズを基準に何かしたいなと感じることは多いと思います。

今までは、JavaScriptを使って、スタイルを追加するやり方が多かったと思います。
ですが、三角関数がCSSで使えるようになったことで、CSSだけで画面サイズを取得できるようになりました。

この記事では、CSSだけで画面サイズを取得する方法を解説しようと思います。

CSSだけで画面サイズを取得する

サンプル

まずは、CSSだけで画面サイズを取得しているサンプルはこちらです！

See the Pen Screen width / height by でぐぅー | Qiita (@sp_degu) on CodePen.

仕組み

画面サイズを取得するざっくりとした仕組みは↓こんな感じです。

• 横幅
  1. 値が可変できるように、初期値 100vwのカスタムプロパティを定義する
     • --_W: 100vw;
  2. 横幅：100vw・高さ：1px の三角形の角度θを算出する
     • θ = atan2( var(--_W), 1px )
  3. tan(θ)で、画面の横幅(px)を算出する
     • tan(θ)

このような処理を行うことで、100vw を px に変換しています。
また↑この画像だと、画面幅とtanθは同じ長さには見えないですが、高さが1pxなので、実際は同じ値になります。

• 高さ
  1. 値が可変できるように、初期値 100vhのカスタムプロパティを定義する
  2. 高さ：100vh・幅：1px の三角形の角度θを算出する
  3. tan(θ)で、画面の高さ(px)を算出する

このような処理を行うことで、100vh を px に変換しています。
また↑この画像だと、画面高さとtanθは同じ長さには見えないですが、高さが1pxなので、実際は同じ値になります。

画面サイズを取得する

1. カスタムプロパティを定義する

まずは、値が可変できるように初期値 100vw・100vhのカスタムプロパティを定義します。

カスタムプロパティの定義の仕方は、こちらの記事を参照してください

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}

@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}

2. 画面サイズを算出する

定義したカスタムプロパティを使って画面サイズを算出します。

atan2(var(--_w), 1px)・atan2(var(--_h), 1px) ← 部分で、θの値を算出し、tan(θ)で画面サイズを算出しています。

:root {
  --w: tan( atan2(var(--_w), 1px) );
  --h: tan( atan2(var(--_h), 1px) );
}

3. 画面に表示させる

算出した値 --w・--h を疑似要素を使って、画面に表示させる

画面に表示させるには、counter-set プロパティを使って、値をセットし、疑似要素を使って表示します。

body::before {
  content: counter(w) "px × " counter(h) "px";
  counter-set: h var(--h) w var(--w);
}

まとめ

この記事では、CSSだけで画面サイズを取得する方法を解説しました。
この方法を使うことで、JavaScriptを使用せずにCSSだけで画面サイズの情報を取得し、それに基づいてスタイル調整が可能になります！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。