Reframe.js

JavaScript

特定の要素をレスポンシブ化してくれる「Reframe.js」

Reframe.jsはレスポンシブに対応していない特定の要素をレスポンシブ化してくれるスクリプトです。とても軽量&使い方もカンタンなので、気軽に実装できるのが魅力です。とくにインラインフレームやビデオなど埋め込み型コンテンツには最適みたいですね。

インラインフレームや埋め込み動画などに最適

デモ

デモではとてもかわいいネコの動画が設置されています。実際にブラウザサイズを縮小して確認してみたところ、ちゃんとレスポンシブに対応していました。

使い方はとってもカンタンで、reframe.jsとcss/scssを読み込み、以下のようにセットするだけです。

reframe('selector');

また、オプションで自分の好きなクラス名を指定することも可能です。

reframe('selector', 'classname');

複雑な機能もなくシンプルでとても使いやすいと思います。インラインフレームや埋め込み動画などを手軽にレスポンシブ化させたいという人は、ぜひ活用されてみてはいかがでしょうか?

自分でイチからレスポンシブに対応させているヒマがない人には最適ですね。というわけで、レスポンシブでない要素をレスポンシブに対応させることができる「Reframe.js」のご紹介でした。

Reframe.js

関連記事

  1. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  2. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  3. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  4. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  5. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  6. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP