最近のWebサイトに多く見られる、画面いっぱいにキービジュアルが使われているような表現。今までjsを使用して高さを取得していましたが、CSSのみでカンタンにできることを今更知ったので、その方法をご紹介して行きます。

Web Design Clipなんか見ても、こういった見せ方をしているサイトが最近多いですね。

まぁ、早い話が、これを使えば、

こういった、ヘッダだけ画面いっぱいにした見せ方や、

コンテンツごとに高さを取得する見せ方が、容易にできます。

文章で説明するのは難しいので、後で紹介するDEMOページを見たほうが早いです。

jQueryでブラウザの高さを取得

まずは、おそらく主流であろうやり方。意外とカンタンにできます。
ヘッダなんかの、高さ取得したい要素に、ここではわかりやすく、h100というクラスをつけます。で、

$(function(){
var $window = $(window);
$(".h100").css("height",$window.innerHeight());
$window.resize(function(){
$(".h100").css("height",$window.innerHeight());
});
});

こちらのスクリプトを記載するだけです。
リサイズも指定してあるので、レスポンシブにも対応しています。

• DEMO
• DOWNLOAD(zip)

CSSのみでブラウザの高さを取得

今回ご紹介するのは、こちら。
先ほどのjsより、簡潔なコードで実装できます。同じく、h100というクラスをつけて、

.h100 {
height: 100vh;
}

これだけでOK!

• DEMO
• DOWNLOAD(zip)

ただし、Android4.4より古い、デフォルトのブラウザアプリは対応していないので注意が必要です(ChromeとかならOK)。IEは9から対応しています。
「若干簡単になって、若干軽くなるくらいで、そんなメリットなくね？」って思うかもしれませんが、例えば、

header {
height: 100vh;
}
header .hero {
height: 90vh;
}
header nav {
height: 10vh;
}

こういうことだって、実現可能なのです。
はじめての人は、「vhってなんじゃ！」って思うわけですよ。
詳しいvhという単位についての解説はこちらを参照に。

• CSS には vw, vh, vmin, vmax という単位がある

おわりに

vh,vwを使いこなせるようになれば、今までjsでやっていたことが、CSSのみで実現可能になり、色々ラクできます。今回DEMOなんで、雑に作ってますが、ちゃんと作り込めば、スーパービューティフルレスポンシブなサイトができますよ！
では。