カスタムプロパティをJavascriptで宣言しよう！

どんどん気温が下がっていますね。
我が家ではついに衣替えを決行いたしました。
衣替え、いざやるとなるとなかなか体力のいることですよね。。
衣装ケースにしまい込んだ服を取り出すのも一苦労です。

さて、本日はまたしても（?）JavaScriptの話題をお届けいたします。
本日はCSSと関連した、特にiPhoneに対応させるときに便利な技をご紹介いたします！
キーワードは「カスタムプロパティ」です！
※ IEでは使用できませんので注意ください。

カスタムプロパティ

カスタムプロパティとは、簡単に言えば、「CSS内で使える変数」のことです。
「:root 」という指定の方法を見たことはないでしょうか？
これがカスタムプロパティです。
実際に見ていただいたほうがわかりやすいかと思いますので、例をご覧ください！

この例では、「–custom-color」に、赤色「#f00」の指定を保存しています。
それを、「var(–custom-color)」で適用しています。

カスタムプロパティを用いる場合の最低限のルールは次の2つです。

1. カスタムプロパティを宣言するときは「–」をプレフィックスとすること。
（逆に、これがつけられたプロパティをカスタムプロパティと呼びます）
2. 使用する際は「var()」という関数を用いること。

JavaScriptでカスタムプロパティを宣言

それでは、今回の主題に移ります。
まずは作成した例をご覧ください。

このコードでは、次のことを行っています。

1. JavaScriptでデバイスの表示高さを取得。
2. 取得した値を「–vh」という名前のカスタムプロパティで宣言。

このようにすれば、JavaScriptから動的に、カスタムプロパティを宣言することが可能です。
これのどこが嬉しかというと、例えば、iPhoneで表示させるWebページなどで、ビューポートの高さ「vh」を用いる場合を考えてみてください。
iPhoneではその仕様上、画面の上部分にアドレスバーが現れるようになっています。
これが実に厄介で、「100vh」はアドレスバーを含まない画面の高さとなります。
これにより様々な問題が発生してしまうのです…。
つまり、本当に取得したい部分の高さが取得できれば良いわけで、そんなときにこの手法が役に立ちます。
IEでは使用できませんが、スマートフォンで使用することを想定すれば問題ないので、重宝しそうですね。
上のような場面に出会ったときは、一度検討されてみてはいかがでしょうか。