respontent

JavaScript

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

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

[ads_center]

respontent

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

respontent

デモ

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

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

respontent

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

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

respontent

関連記事

  1. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  2. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  3. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  4. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  5. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  6. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP