レスポンシブのチェックに役立つサービス「Resizer」

 
この手のリサイザーは様々なツールやサービスがありますが、Googleが公開した「Resizer」がシンプルで使いやすそうなので忘備録。

Resizer – Google Design

↓ヘッダー下部のタブよりサイズ変更ができます。


  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
  • レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
RELATED POSTS
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • スライドアニメーションで展開するグリッドメニュー「Expanding Grid Menu」
  • コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
  • CSSグリッドレイアウトのコードを生成できるツール「Griddy」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
PICKUP
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 導入しておきたいWordPressのおすすめプラグイン
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】