イメージを大きく使ったレスポンシブデザインのサンプル

最近割と見かける画面全体にイメージをどーんと表示する、プレゼンテーションのようなホームページデザインのサンプルを作成しました。WordPressなんかでコレ系のThemeを見かけるので、あえて自作する必要も無いのですが、それはそれこれはこれ、という事で。

サンプル
サイズを変えてみる場合

PC、タブレット、スマートフォンで表示が切り替わります。

@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の処理

ナビゲーション処理

/*
 * スクロールが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);
    }
  });

フェードで処理してますが、スライドなどでも良いと思います。

モバイルのナビゲーション処理

/*
 * 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使うのは、私は嫌です。