• かちびと.net

    任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResizeのご紹介です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize

スポンサーリンク

手軽で良かったのでご紹介。レスポ
ンシブWebデザイン対応のサイト構築
のレイアウト確認用のjQueryプラグ
インです。開発補助用になりますね。
同じツールも沢山ありますけど。。

最近ご紹介したResponsivatorを使うのでなくてもいいっちゃいいんですけど、これはこれで良かったので。

jResize


表示されているWebサイトはiframeで呼び出しているものです。上部のバーでその場でiframeをリサイズ→レスポンシブなWebサイトの表示を確認出来る、というものです。


サイズを変えた状態。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jresize.js"></script>

コアとプラグインを読み込みます。

$.jResize({
	viewPortSizes   : ['320px', '480px', '540px', '600px', '768px', '960px', '1024px', '1280px'],
	backgroundColor : '444', // HEX Code
	fontColor       : 'FFF' // HEX Code
});

あとはセッティングするだけ。確認したいサイズとバーの背景色、文字色を指定するだけ。

<body>
<iframe src="http://example.com/" style="width:100%;display:block;border:0;height:1000px;"></iframe>
</body>

マークアップはsrcを指定したiframeを用意するだけ。

ブックマークレットにしてもいいかもしれない。

jResize(via:jquer.in)

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services