たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方

• << NEXT
• HOME
• PREV >>

メールマガジンにご登録

• Tweet
• 

• Tweet
• 

簡単に作れる！みんな大好き可変グリッド

先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。

こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。

まずはこちらのデモを御覧ください。

凄まじくレスポンシブデザインなウェブサイトデモ

使われているのはjQuery Masonryというプラグインだ！

@planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイアウトはここ数年多く見られますが、モバイルにもレスポンシブな形に対応させているのは珍しいですね。

ではサンプルがピ◯タレストっぽいとかは置いておいて、どのようにサンプルを実装しているかを紹介していきます。

たった１行で可変グリッドが完成！

jQuery Masonryはとっても秀逸なプラグインです。

プラグインの初期化は下記のコードのようにボックスとして扱うクラスを指定するだけでグリッドレイアウトが完成します。headにjQueryとjquery.masonry.js読み込んだ上で下記のコードを記述します。簡単すぎる！

$(function(){
  $('.modules').masonry({itemSelector: '.post'});
});

簡単ですね！！コンテナに当たるタグには.modulesクラス、ボックスにあたるタグには.postクラスを割り当てています。

<ul class="modules motionContainer">
  <li class="post">
    <p class="thumb"><img src="images/thumb2.gif"></p>
    <p class="caption">レスポンシブデザイ......

ス◯ジオパークの可変グリットの仕組み

ここまでは簡単すぎるのですが、スタ◯オパークのサイトの秀逸なポイントは、今までありそうで余り見なかった中央揃えの可変グリッドデザインという点です。

中央揃えの可変グリッドの実現とコンテナブロックのサイズまで可変にするには少しコードを加える必要があります。順番に見ていきましょう。

中央揃え可変グリッドを実現するためのCSS

大抵のことはMasonryが吸収してくれます。ここではコンテンツ幅の上限を決めてそれ以上になったらサイズを固定して中央揃えにします。N◯Kを参考にして1200pxを上限とします。

具体的には1200px以内のブラウザサイズでは幅が自動で調整されるように記述し、左右のmarginをautoにすることで中央揃えにしています。

body {
  max-width: 1200px;
  margin: 0 auto;
}

1. グリッドボックスの最整列に合わせて、コンテナもリサイズ

リサイズごとにコンテナのサイズもフィットさせるには、最初に記述したmasonryのコードだけに１行だけ書き加える必要があります。

具体的にはitemSelectorを渡したオブジェクトの中にisFitWidthというオプションにtrueで追加します。

$(function(){
  $('.modules').masonry({
    itemSelector: '.post',
    isFitWidth: true
  });
});

これでほぼ完成です。次はアニメーションです。

2. リサイズ時のアニメーションをつける

このままではパッパッと再整列されてしまいつまらないので、NH◯のようにアニメーションさせましょう。

isAnimatedオプションをtrueに指定し、durationオプションにアニメーションさせたい秒数を設定します。

1秒=1000なのでご注意下さい。

$(function(){
  $('.modules').masonry({
    isAnimated: true,
    duration: 400,
    itemSelector: '.post',
    isFitWidth: true
  });
});

3. CSS3アニメーションを使用する

CSS3のプロパティが使えるかどうかをチェックしてくれる便利ライブラリModernizrを使ってCSS3のtransitionが使える場合はそちらを使うように設定します。ちなみにすっとこどっこい(IE)ではアニメーションしませんのでご了承下さい。

Modernizrをご存じない方はこの辺りをご参考にどうぞ

Modernizrを読み込む

<script type="text/javascript" src="js/modernizr-transitions.js"></script>

isAnimatedを使うかどうかをModernizrに任せる

下記のコードのようにするとcsstransitionsが使えればtrueが自動で入るようになります。

$(function(){
  $('.modules').masonry({
    isAnimated: !Modernizr.csstransitions,
    duration: 400,
    itemSelector: '.post',
    isFitWidth: true
  });
});

CSS3 transitionでコンテナのアニメーションを定義します。

.motionContainer.masonry,
.motionContainer.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.motionContainer.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.motionContainer.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

アニメーション用にコンテナにあたるタグには.motionContainerというクラスを付け加えておきます。

<ul class="modules motionContainer">

モバイルに対応する

レスポンシブデザインの最大の目的といえばモバイル対応です。◯HKのサイトもキレイにレイアウトされていますね。

ここからはモバイルに最適化するための書き方を見ていきます。ポイントは３点です。

1. まずは定番viewportを指定する

モバイルデバイスはPCと倍率が違うため、この指定で倍率を揃えてあげます。指定していないと980pxとして指定されてしまい、ちっさく表示されてしまいます。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

2. Media Queriesでデバイスごとの表示を調整する

レスポンシブデザインのキーマン、Media Queriesで横幅ごとに見た目を調整します。今回は320px以下のPortrait時にボックスの幅を拡げるために下記のように指定しました。

@media screen and (max-width: 320px) {
.modules li {
  width: 280px;
}
}

3. 画像をレスポンシブにする

レスポンシブデザインでは画像のサイズが自動で調整される状態が望ましいです。imgに対して、以下のように指定を指定しておくことで外側のボックスのサイズによって自動でフィットするようになります。

.modules li p.thumb img {
  max-width: 100% !important;
  height: auto !important;
}

え？IE6で崩れてる？

ご安心下さい。N◯Kも崩れています。

更にご安心下さい。IE6/7のユーザーはもうほぼいません。IE8切り捨て準備はいいか？jQuery2.0 2013年リリース予定

レスポンシブデザインは甘くない

いかがでしょうか。jQuery Masonryを使えばいとも簡単にレスポンシブデザインができてしまいましたね。

それではグリッドレイアウト以外の時はどのようにすればいいでしょう？レスポンシブデザインは本文で触れたMedia QueriesやCSSを駆使して各デバイスごとの見た目をワンソースで切り替えられるように構築する手法です。

この魔法の言葉に昨年から今年にかけて多くの方が地獄を見たのではないでしょうか。ワンソースで管理できるからと言って管理が半分になるわけではありません。反対にソースを切り分けられない分、初動の設計を怠るとあっちを立てればこっちが立たず状態に陥る可能性もあります。

ディレクターやプロデューサーの方は制作陣としっかり話し合って、打ち手として最適な手法かどうか見極める事が重要でしょう。

本日のサンプル

こちらからダウンロードしていただけます！

• << NEXT
• HOME
• PREV >>

Related Posts