>Webブラウザの高さ取得は、jQueryを使わなくてもCSSのvhでカンタンにできる!ブラウザの高さ取得は、jQueryを使わなくてもCSSのvhでカンタンにできる!2015-08-03Webデザイン最近のWebサイトに多く見られる、画面いっぱいにキービジュアルが使われているような表現。今までjsを使用して高さを取得していましたが、CSSのみでカンタンにできることを今更知ったので、その方法をご紹介して行きます。Clipなんか見ても、こういった見せ方をしているサイトが最近多いですね。早い話が、これを使えば、こういった、ヘッダだけ画面いっぱいにした見せ方や、コンテンツごとに高さを取得する見せ方が、容易にできます。文章で説明するのは難しいので、後で紹介するDEMOページを見たほうが早いです。jQueryでブラウザの高さを取得まずは、おそらく主流であろうやり方。意外とカンタンにできます。ヘッダなんかの、高さ取得したい要素に、ここではわかりやすく、h100というクラスをつけます。$(window);$(".h100").css("height",$window.innerHeight());$window.resize(function(){$(".h100").css("height",$window.innerHeight());});});こちらのスクリプトを記載するだけです。リサイズも指定してあるので、レスポンシブにも対応しています。今回ご紹介するのは、こちら。先ほどのjsより、簡潔なコードで実装できます。100vh;}これだけでOK!DEMODOWNLOAD(zip)ただし、Android4.4より古い、デフォルトのブラウザアプリは対応していないので注意が必要です(ChromeとかならOK)。IEは9から対応しています。10vh;}こういうことだって、実現可能なのです。人は、「vhってなんじゃ!」って思うわけですよ。詳しいvhという単位についての解説はこちらを参照に。いう単位があるおわりにvh,vwを使いこなせるようになれば、今までjsでやっていたことが、CSSのみで実現可能になり、色々ラクできます。今回DEMOなんで、雑に作ってますが、ちゃんと作り込めば、スーパービューティフルレスポンシブなサイトができますよ!では。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。頼人(ライト)と申します。FANTASYロゴ風フリーフォントにグッと来た!(商用利用可)slackでチャンネルを削除。XDで「インタラクションが含まれていません」の警告が出て「開発者に共有」ができない邦ロックマニアが秋に聴きたくなる曲はこれだ気持ち悪い。POSTS社会人、恐いよー、なりたくないよー。