【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

vhを使ったレスポンシブなフルスクリーンコンテンツの作り方

vhを使ったレスポンシブなフルスクリーンコンテンツの作り方

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

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

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

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

「vh」とは?

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

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

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

Can i use で対応状況をチェック
Can i use で対応状況をチェック

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

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

サンプルページはこちら
サンプルページはこちら

スクリーンショット部分のhtmlは非常にシンプルで、このような内容です。

<div class="hero-row para num1" id="cnt-1">
    <p>
        viewportに対応した<br/>
        レスポンシブな高さ調整サンプル
    </p>
</div>
<div class="fix-bar">
    <a href="#cnt-1">1</a>
    <a href="#cnt-2">2</a>
    <a href="#cnt-3">3</a>
    <a href="#cnt-4">4</a>
    <a href="#cnt-5">5</a>
    <a href="#cnt-6">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のを調整することで、「画面の2分割」なども実現可能です。

画面分割サンプル

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

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

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

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

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

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

iPadから見た状態。 vhの解釈が仕様通りになっていません。
iPadから見た状態。
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基準で設定できるということは非常に便利です。

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

岡本


”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+