レスポンシブに対応した画像やHTMLタグを生成するサイト「Responsive Image Breakpoints Generator」!

2016/02/19

こんにちは。
今回はレスポンシブに対応した画像やHTMLタグを生成するサイト「Responsive Image Breakpoints Generator」!です。

任意の画像をアップすると複数の画面サイズに応じた画像を一括でダウンロードできるサイトを紹介します。
また、その画像に応じたマークアップも用意してくれますよ。

レスポンシブに対応した画像やHTMLタグを生成するサイト「Responsive Image Breakpoints Generator」!

Responsive Image Breakpoints Generator

responsive-image-breakpoints-generator

http://www.responsivebreakpoints.com/

 

「Responsive Image Breakpoints Generator」の使い方

responsive-image-breakpoints-generator

まずは画面左側にある「Upload file」のボタンをクリックしてレスポンシブに対応させたい画像を選びます。

 

responsive-image-breakpoints-generator2

画面右側で画像のサイズなどを確認できます。
実際に画像を開く事もできます。

 

responsive-image-breakpoints-generator3

画面右側にある「DOWNLOAD IMAGES」のボタンをクリックして、画像一括をダウンロードできます。
画面左側にあるHTMLタグをコピーして使う事もできますよ。

 

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

 

いかがでしたか。レスポンシブサイトを作る際に使ってみてはどうでしょうか。
以上でレスポンシブに対応した画像やHTMLタグを生成するサイト「Responsive Image Breakpoints Generator」!でした。

topへ戻る