navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。近頃フルスクリーン写真を使ったサイトデザインが増えてきました。第一印象のインパクトやデザイン性など、見ていて楽しくなるサイト作りの方法として注目を浴びている様子です。フルスクリーン写真を利用したデザインをレスポンシブで実現使用すると少し厄介な問題があります。今回は「vh」という単位を利用した、フルスクリーンコンテンツの作り方を紹介します。height」という意味合いの単位です。viewportの1/100で計算されています。max)」の3種類があり、vmax以外についてはほとんどの最新版ブラウザで対応しています。対応状況をチェックサンプルコードと動作サンプル今回は画面下にメニューのついた、フルスクリーン画像を使ったページを作成しました。サンプルページはこちらスクリーンショット部分のhtmlは非常にシンプルで、このような内容です。href=&amp;quot;#cnt-6&amp;quot;&amp;gt;6&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;そしてCSS。こちらも単位にvhを使っている以外は至って普通のコードです。0;}vhやwidthのを調整することで、「画面の2分割」なども実現可能です。jQueryを使ったバグ・非対応ブラウザ対策このように「vh」は、レスポンシブサイトを作る際に非常に便利な単位です。一方で少し厄介な問題点も抱えています。それは「Android/iOSで使いづらい」という問題です。「vh」はAndroidでは最新版の4.4からの対応のため、最新機種以外ではそもそも単位として認識してもらえません。iOSでは実装済なのですが、よりによってiOS7では「vh」のみバグが発生しているために正常に動作してくれえません。iPadから見た状態。vhの解釈が仕様通りになっていません。そのため現時点で「vh」をサイトで使用する場合、JavaScriptや他の単位でのフォローが必要となります。今回はjQueryでUA判定後、Android/iOSではvhを使わずに処理させてみました。});}&amp;lt;/script&amp;gt;これでAndroidやiOSでもviewportに対応した高さでコンテンツを生成することが可能となります。今回の動作サンプルまとめいかがでしたでしょうか?Androidの非対応端末が多いことやiOSでのバグなど、「vh」はまだまだ扱いに困る単位です。fold)を作りこむ際や固定ナビゲーションを作る際など、viewport基準で設定できるということは非常に便利です。モバイルファースト・マーケティングラボ.”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。2013.05.15過去2回にわたり、弊社の提供するレスポンシブECサイト構築aishipRについてお話してきましたが、今回も少し触れされていただきます。2013.06.19レスポンシブWebデザインでのサイト構築について、最近以下のような相談を受けることがあります。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。