FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

コーディング

レスポンシブ用の画像を複数のサイズで自動生成

投稿日:

01

Responsive Image Breakpoints Generator

レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定したい場合があります。

そんな時に便利なのが、「Responsive Image Breakpoints Generator」です。

画像をアップするだけで、ブレイクポイントにあわせた複数のサイズの画像を生成してくれます。

Responsive Image Breakpoints Generator

03

ブレイクポイントなどを設定します。

02

「UPLOAD FILE」をクリックし、上記の画面へ画像をドラッグしアップします。

04

書き出されたサンプルが表示されます。

05

ダウンロードをクリックすると画像がダウンロードされます。
タグも表示されるので、コピペで済むのが便利ですね!

Responsive Image Breakpoints Generator

PR

PR

-コーディング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Sublime Textで一行ごとにタグで囲む方法

長文テキストを流し込んだり、リストタグで囲む場面がよくあります。 Sublime Textで一行ごとにタグで囲む方法です。

CSSで大文字/小文字を変換するtext-transformプロパティ

コーディングの案件で、グローバルメニューをデザイン通り、 英語の小文字で作成していたのですが、 最後に大文字にしてほしいという要望がきました。 すでに数十ページ作成したこともあり、 CSSのtext- …

サイトで使われているアプリがわかる「Wappalyzer」

サイトをみていて「どんなプログラムやサーバー、プラグインを使っているんだろう?」と思うことありませんか? 私の場合、サイトのソースコードをみて判断するのですが、 ソースが長かったり、使用しているプラグ …

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者で …

MacでAndroid環境をブラウザ検証できる「Genymotion」が超便利

iPhoneしか持ってない場合、Androidの検証に困ります。 そんな場合、 「Genymotion(ジェニーモーション)」を使うと MacでAndroidの検証が手軽にできます。 Genymoti …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。