respontent

JavaScript

様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

respontentというjQueryプラグインを使えば、画像・YouTube動画・テーブル・Googleマップといった様々なコンテンツをレスポンシブにすることができます。部分的に指定した要素をレスポンシブにしたいといった時に活用できますね。

[ads_center]

respontent

実際のデモは以下になります。

respontent

デモ

各コンテンツが左右に分けられており、左側がレスポンシブ付きで右側がレスポンシブなしのバージョンになっています。

真ん中から左右にサイズ変更することができるので、試しに左側を縮小させてみると、このようにレスポンシブ対応になっていることが確認できます。

respontent

応用次第でコンテンツの利便性も高まりそうですね。

例えば、Googleマップなんかは1つを詳細地図で固定化しておき、もう1つをレスポンシブ化させて広域表示させておくといったこともできそうです。

respontent

関連記事

  1. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  2. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  3. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  4. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  5. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  6. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP