イメージを大きく使ったレスポンシブデザインのサンプル
最近割と見かける画面全体にイメージをどーんと表示する、プレゼンテーションのようなホームページデザインのサンプルを作成しました。WordPressなんかでコレ系のThemeを見かけるので、あえて自作する必要も無いのですが、それはそれこれはこれ、という事で。
PC、タブレット、スマートフォンで表示が切り替わります。
1 2 3 | @import url("css/pc.css");@import url("css/tablet.css") screen and (min-width:520px) and (max-width: 959px);@import url("css/sp.css") screen and (min-width:320px) and (max-width: 519px); |
仕様
画像
・画像は画面全体に表示し、画像幅はブラウザの幅によって可変
・画像全体を囲うボックスは高さを固定し overflow: hidden; で下部分を隠す
・画像は2400px * 1500px で作成し、幅をスタイルシートで幅100%にする
モニターいっぱいに見たときは画像の下部分は隠れるので、画像でアピールしたい部分は上半分に集約すると良いと思います。また、ブラウザの幅を狭めていくと隠れている部分が見えてくるので、十分な高さの画像を作成します。
ナビゲーション
デフォルトでは表示せず、10ピクセルスクロールしたらヘッダーを隠し、ナビゲーションを表示します。また、タブレット、スマートフォンはナビゲーション要素を隠し、三アイコンクリックでスライド表示するようにします。
Javascriptの処理
ナビゲーション処理
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* * スクロールが10ピクセルを超えたらヘッダーを隠し * ナビゲーションを表示する */ jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 10) { jQuery("#header").fadeOut(300); jQuery("#navigation").fadeIn(300); } else { jQuery("#header").fadeIn(300); jQuery("#navigation").fadeOut(300); } }); |
フェードで処理してますが、スライドなどでも良いと思います。
モバイルのナビゲーション処理
1 2 3 4 5 6 7 8 9 10 | /* * PC用のナビゲーションのHTMLを取得してタブレット・スマフォ用のナビゲーションにセット */ var navi = jQuery("#nv_right").html(); jQuery("#mb_navi").html(navi); jQuery("#mobile_navi a").click(function (e) { jQuery("#mb_navi").slideToggle(); e.preventDefault(); }); |
ナビゲーション部分HTMLの<ul>～</ul>までを取得し、タブレット、スマフォ用のdivの中に入れます。三アイコンを押す事で、これを開閉(slideToggle)します。
画像に関して
2400px*1500pxのPNGなので、とっても重たいです。光基準なら割と平気ですが、ADSLの地域も有りますし、スマフォのLTEや3Gの事を考えると、ロードするまでに時間が掛かります。
そこで、ページ全体がロードするまでローディング画像を表示して待機して貰うようにしています。色々と方法が有りますが、こちらで紹介されている方法がシンプルで導入し易いと思います。
デザイン
レスポンシブコーディングに関しては書きませんが、端末の幅によって隠したり幅が指定されている部分をautoや100%にしたりなど、それぞれのスタイルシートで定義していきます。あと、アイコンは大きめのものを作り、スタイルシートで大きさを指定してやると綺麗に見えます。サンプルのナビゲーション部分がそうですね。
とまぁ割と簡単なのですが、インパクトが有り格好いいです。
先にも書きましたが、WordPressのThemeでこういうのがたくさんあるので、使える環境の方はTheme使う方が楽です。ただ、たまにWEB屋さんのホームページのソースコードを見ると、Theme使ってるのバレバレってとこあるんですよね。
悪いとは言いませんが、ホームページ制作を謳っている会社の顔であるホームページが、どっかから拾ってきたThemeを使ってるってどうなんでしょう・・・。顧客に格安でホームページ制作を提供するようなプランで、納得して貰えるなら当然有りですが、さすがに自社ホームページまでTheme使うのは、私は嫌です。
