respontent

JavaScript

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

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

[ads_center]

respontent

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

respontent

デモ

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

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

respontent

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

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

respontent

関連記事

  1. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  2. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  3. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  4. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  5. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP