レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」

 
レスポンシブデザインのメインヴィジュアルで使用するような画像を設定したブレイクポイント毎に最適化し生成してくれる「Responsive Image Breakpoints Generator」。画像のリサイズならphotoShopなどで、ちゃっちゃとやった方が早いと思いますが、仕組みを理解するという意味では面白いサービスです。

Responsive Image Breakpoints Generator

↓サイズ毎のイメージも確認でき、HTML5のソースも表示されます。


  • サイトで使用していないCSSセレクタを調べられる「Unused CSS」
  • Google Mapのスタイルテンプレート「Snazzy Maps」
  • CSSグリッドレイアウトのコードを生成できるツール「Griddy」
  • 手描きのアニメーションGIFを簡単に作成できる「Brush Ninja」
  • Web上で差分が確認できるテキスト比較ツール「difff」
RELATED POSTS
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • 初心者から学べる無料プログラミング学習サイト8選
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」