[vc_row][vc_column][vc_column_text]レスポンシブWEBデザインでホームページを制作していると、CSSだけではどうしても解決できないような問題・課題に直面します。
そんなときに役立つjQuery Pluginをご紹介します。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
1.jquery.matchHeight
WEBサイトを制作していると、行ごとに高さを揃えてキレイに見せたいという場面が多々あると思います。
レスポンシブWEBデザイン以前では、PCのみの場合だけ考えれば良く、他の高さを揃えるjQuery Pluginを利用すればよかったのですが、レスポンシブWEBサイト以後では、ブラウザのリサイズに応じて要素の高さを揃える必要が出てきました。
「PCの画面では高さが揃っていたけど、ブラウザをリサイズして縮めたらPCレイアウト時の高さが残ってしまった！」なんてことが良くあると思います。
そんな悩みを解決してくれるのが、「jQuery.matchHeight」です。
軽快な動作でブラウザリサイズ時も高さをきちんと揃えてくれます。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
2.bxSlider
「ホームページのTOPページにカルーセル（スライダー）を導入したい」というご要望を良くいただきます。
レスポンシブWEBサイトに対応しているスライダーはいくつかありますが、よく利用しているのが「bxSlider」です。
IE7から対応しているので、導入しやすいと思います。
スライドの切り替わりも気持ちのよいアニメーションで切り替わります。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
3.colorbox
「このページのこの画像は、ライトボックス（モーダル）で表示したい」というときにはいつも「colorbox」を利用しています。option設定でmaxWidth、maxHeightを指定するとレスポンシブ対応が可能になります。
アクセシビリティにも配慮されていて、カスタマイズも容易なので重宝します。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
4.MeanMenu
ホームページにおけるナビゲーションはかなり重要な位置をしめますが、レスポンシブWEBサイトではマルチデバイス対応（PC・タブレット・スマートフォン）しなくてはなりません。そんなときに役に立つのが「MeanMenu」というjQuery Pluginです。
いわゆるハンバーガーメニューを簡単に実現できます。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
5.Footable
何かのデータを整理するときよく表を利用すると思いますが、1行あたりの列数が多い場合、スマートフォンで見た際に文字が画面に収まらずはみ出てしまうということがよくあります。
そんな悩みを解決してくれるのが「Footable」というjQuery Pluginです。
容易に導入でき、画面サイズ（ブレークポイント）に応じて表示を切り替えてくれます。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
6.skrollr
シングルページのWEBデザインはもはや定番といっても過言ではないと思います。そういったページでは良くスクロールに応じてアニメーションをつけて演出したいということが良くありますが、スマートフォンはスクロール中は処理を中断してしまい、アニメーションされないということが良くありますが、そういったこともカバーしてくれる素晴らしいプラグイン「skrollr」です。
少し癖があるかもしれませんが、慣れると簡単にパララックスサイトを実装できます。[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
まとめ
ホームページを構築する場合、Webデザインには様々な物が存在しています。
近頃のサイトでは、企業サイトなどでよく採用されている上部や左側にナビゲーションを配置したレイアウト、シングルページアプリケーションやブログのように縦長のレイアウト、プロモーションサイトなどで見られる横にスクロールしていくレイアウト、そして、ディスプレイのサイズによってフレキシブルにレイアウトが変わっていくレスポンシブデザインなどがあります。その中でもレスポンシブデザインはスタンダードとなり今後も主流になっていくと思われます。
複雑に進化を遂げるWEBサイトも上記で挙げたようなPlugin等をうまく利用することで、実装負荷を下げ、より細やかなコンテンツ制作にフォーカスすることができます。
[/vc_column_text][/vc_column][/vc_row]
