レスポンシブウェブデザインのサイトを作るときにほぼ使うjQueryプラグイン

JB20140820_01

調子にのって今回もレスポンシブのエントリーを書いた、JETBABY管理人です。
海行きたい。

・・・レスポンシブウェブデザインでサイトを作るときに、なにはなくともこれだけは使うというjQueryのプラグインの紹介です。

と、とりあえずスマホがある場合はjQueryは2系にしたほうが、動作が幾分か軽いのでいいですよ。
IE8はこのさい最低限のコンテンツが見えるだけくらいにしてね。
プログレッシブ・エンハンスメントですね。

さて本題。
jQueryを使えばレスポンシブなさいとでも色々な動きを出せたり、リッチな表現ができたりは当然できる。

ですが、今回はそういったものでなくレスポンシブの根幹部分で作用するプラグイン。
有名なので知ってる方も多いでしょうが、個人的にレスポンシブでjQueryといえばこれなので。

それは何かというと

breakpoints.js

こちらです。

何するものかといえば、ブレイクポイントごとにイベントを設定できるというもの。
設定したブレイクポイントになったら、またはブレイクポイントじゃなくなったら、という動作を設定できます。

使い方はダウンロード先のGitHubのReadMeをみれば英語が分からなくても使えるくらい簡単。

最初にbreakpointsの値に必要なブレイクポイントを設定。
enterBreakpoint~でその値になったとき、exitBreakpoint~でその値ではなくなったときの動作を記述。それだけです。

前回のレスポンシブのサンプルサイトのうちOff Canvasでこのスクリプトを使っています。
別に使わなくてもと思う程度の使い方ですが、640px基点にナビゲーションの表示非表示をしています。

使い方は色々思いつくと思いますが、レスポンシブ時の画像の変更などを紹介しているブログもあります。

実際に俺もPCとスマホで画像を変更するときなどに使用することもあったり。
まぁ、あまり画像変更するならレスポンシブじゃなくて別のHTMLにしなよ、とも思うのでどうしてもというとだけの使用にとどめていますが。

さて他に前回のサンプルでは要素の高さを揃えるのでメジャーなheightLine.jsのレスポンシブ対応版、jquery.heightLine.jsも使用しています。
本来前回のレスポンシブのサンプル程度ではなくてもいいのだけど、こっちもこのエントリーで軽くふれたかったので使った次第。

最初に書いたみたいに見た目を華やかにするようなjQueryでレスポンシブに対応したものもたくさんあるので、それらも必要に応じて使用するといいと思うのです。
スライダーとかメイソンリー系とかなんとか

まとめ記事的なのもあるので参考にしたり。
他にググちゃえばいくらでもあると思います。

しかし、今回紹介したbreakpoints.jsはレスポンシブやるときには8割くらいの確立で使いたいなと思うものなので、紹介しました。

便利ですよ。

一つだけ懸念があるとすればプラグインがぜんぜん更新されていないことくらいでしょうかね。

レスポンシブウェブデザインを再確認してみる

JB20140818

お盆休みなんて特になかった、JETBABY管理人です。
ご無沙汰です。

最近レスポンシブなサイト制作をすることが重なっているので、ちょっと自分の中で再確認したいと思います。
今回から数回に分けて、レスポンシブサイトの制作についてまとめてみる予定。

ということで、レスポンシブ、レスポンシブウェブデザインとはどんなものや?というのを先ずはざっくり。

「HTMLはワンソースでCSSなどで画面幅によってレイアウトを最適化させる手法」

という感じでしょうか。

どんな種類があって、どんなメリットでメリットがあるのでしょうか。
簡単なサンプルを作ってみましたので、そちらをご覧くださいませ。

レスポンシブデザインの種類としては大きく分けて以下の5つがあります。

  • Fluid Grid(Mostly fluid)
  • Column Drop
  • Layout Shifter
  • Off Canvas
  • Tiny Tweaks

サンプルは種類ごとにページを作ってあります。
各種類がどんなものなのかもサンプルに記載しておきましたので、どうぞ。

レスポンシブウェブデザインのサンプルデモ

サンプルの補足として・・・

なによりもあくまでサンプルですという、逃げを先に謳っておきます。

このデモではHTMLの構造はすべて同じでCSSだけ変えています。
本来はレイアウトごとにHTMLの構造も変化させるべきだとおもいます。
3カラムの横並びもCSSでtabll-cellとか使えばもっと簡単にできます。flexboxとかでも同じく簡単にできる場合もありますが、まだまだ環境に依存する部分が多いので面倒なので使っていません。

ブレイクポイントの調整は細かくしていないので、若干レイアウトが狂う幅がすうピクセル単位であると思います。jQueryで左右のカラムの高さをあわせたりしてる部分で特に。

基本的にPC、タブレット、スマホといった形で画面幅にあわせて3段階でレイアウトが変わります。

とはいえ、モバイル実機では確認していません。実機確認は結構大変なので。うちにはAndorid1.6、Andorid2.3、Andorid4.0が2機、Andorid4.2、iPhone4s(iOS6)、iPhone5s(iOS7)、iPad(iOS6)、Win8.1タブとありますが、まぁ、どれもこれもちょっとずつズレたりと・・・。

最後になんかサンプルのメリット・デメリットにネガティブなこと書いてるんですが、レスポンシブデザインが嫌いなわけではない。むしろ好きだ。
でも使う意味は考えないと火傷するぜ!ということが言いたかったということをお伝えします。