近頃フルスクリーン写真を使ったサイトデザインが増えてきました。

第一印象のインパクトやデザイン性など、見ていて楽しくなるサイト作りの方法として注目を浴びている様子です。

しかしフルスクリーン写真を利用したデザインをレスポンシブで実現使用すると少し厄介な問題があります。

今回は「vh」という単位を利用した、フルスクリーンコンテンツの作り方を紹介します。

「vh」とは？

「vh」とは、「viewport height」という意味合いの単位です。

デバイスの表示領域（viewport）の高さに対しての割合を設定することができ、1vh = viewportの1/100で計算されています。

viewportを基準としたものにはこの他「vw(viewport width)」「vmin(viewport minimun)」「vmax(viewport max)」の３種類があり、vmax以外についてはほとんどの最新版ブラウザで対応しています。

サンプルコードと動作サンプル

今回は画面下にメニューのついた、フルスクリーン画像を使ったページを作成しました。

<div class="hero-row para num1" id="cnt-1">
    <p>
        viewportに対応した<br/>
        レスポンシブな高さ調整サンプル
    </p>
</div>
<div class="fix-bar">
    <a href="#cnt-1">１</a>
    <a href="#cnt-2">２</a>
    <a href="#cnt-3">３</a>
    <a href="#cnt-4">４</a>
    <a href="#cnt-5">５</a>
    <a href="#cnt-6">６</a>
</div>

そしてCSS。こちらも単位にvhを使っている以外は至って普通のコードです。

.hero-row{
    height: 90vh;
}

.fix-bar{
    height: 10vh;
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 100%;
    left: 0;
}

vhやwidthのを調整することで、「画面の２分割」なども実現可能です。

jQueryを使ったバグ・非対応ブラウザ対策

このように「vh」は、レスポンシブサイトを作る際に非常に便利な単位です。

しかし一方で少し厄介な問題点も抱えています。

それは「Android/iOSで使いづらい」という問題です。

「vh」はAndroidでは最新版の4.4からの対応のため、最新機種以外ではそもそも単位として認識してもらえません。

そしてiOSでは実装済なのですが、よりによってiOS7では「vh」のみバグが発生しているために正常に動作してくれえません。

そのため現時点で「vh」をサイトで使用する場合、JavaScriptや他の単位でのフォローが必要となります。

今回はjQueryでUA判定後、Android/iOSではvhを使わずに処理させてみました。

<script>
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || 
  agent.search(/iPad/) != -1 ||
  agent.search(/iPod/) != -1 ||
  agent.search(/Android/) != -1){
	var androidVh100 = window.innerHeight / 100 * 90;
	var androidVh50 = window.innerHeight / 2;
	var androidVh5 = window.innerHeight / 10;
	$('.hero-row').css({
	  'height': (androidVh100)
  	});	
        $('.desc-row').css({
          'height': (androidVh50)
        });	
        $('.fix-bar').css({
          'height': (androidVh5)
        });	
}
</script>

これでAndroidやiOSでもviewportに対応した高さでコンテンツを生成することが可能となります。

今回の動作サンプル

まとめ

いかがでしたでしょうか？

Androidの非対応端末が多いことやiOSでのバグなど、「vh」はまだまだ扱いに困る単位です。

しかしファーストビュー（Above the fold）を作りこむ際や固定ナビゲーションを作る際など、viewport基準で設定できるということは非常に便利です。

今のうちに扱いに慣れておくことで、多くのブラウザで使えるようになったタイミングに備えておきませんか？

岡本