html要素をレスポンシブ化するライブラリ「reframe」

非レスポンシブの要素を自動でレスポンシブ対応してくれるライブラリ「reframe」の紹介です。

最近は、Webサイトを構築する際に モバイルを意識してレスポンシブデザインに対応することが多いですが、後から追加する"iframe"要素等に関しては対応が難しくなってきます。

Youtubeで”埋め込みコード”を利用して、下記のように動画がはみ出したりした経験はないでしょうか？

上の動画はyoutubeの埋め込みコードを利用していますが、サイズが固定されているため、モバイルページで開くと動画がはみ出しています。
( youtubeの埋め込み動画はiframeが使用されています )

そのような面倒なサイズ対応ですが、reframeを使うと自動でレスポンシブ化してくれます。
 

reframeのインストールはこちら(githubのリンク)から直接zipファイルをダウンロードしてプロジェクトフォルダに展開する方法と、コマンドライン上からnpm,bowerコマンドを使って導入が可能です。

# npmコマンドでダウンロードする場合
npm install reframe.js --save

# bowerでダウンロードする場合
bower install reframe.js --save 

reframeの使い方は簡単で、reframeのcssとjavascriptを読み込んでレスポンシブ化したい要素を割り当てるだけです！

また、BootstrapのGrid内で使っても問題なくレスポンシブ化されます。

<!-- cssの読み込み -->
<link rel="stylesheet" href="/reframe.js/dist/reframe.css">
<!-- javascriptの読み込み -->
<script src="/reframe.js/dist/reframe.js"></script>

// class名に適応させる場合
reframe('.className');
    
// idベースで適応
reframe('#className');
    
// iframe要素に適応させてい場合
reframe('iframe');
    
// 要素 + クラスやidを指定する場合
// e.x.p reframe('div', '.video')
reframe('selector', 'classname');
    
// 特定の要素、克つ例外を含める場合
//  exp. refame('div:not([.notVideo])')
reframe('selector:not([not this selector])');
    
// jQueryのセレクターと一緒に使う場合
$('selector').reframe('classname');

以上がreframeの紹介でした。

ブログの記事等を書いていてyoutubeやvimeoの動画を貼り付けることが多い人には、埋め込みコードの編集無しにそのまま貼り付けるてレスポンシブ化なんてことも簡単にできます。

気になった人はゼヒ×２チェックしてみてください！

GitHub: Reframe