Loading...
作業で使う便利ツール一覧

作業で使う便利ツール一覧

  • 画像編集
  • レスポンシブ
  • ツール
2020-04-17
ss_nozawa
全員
全員

素材系

ダミー画像生成

https://placehold.jp/

背景透過生成

https://www.peko-step.com/tool/alphachannel.html

画像編集

https://www.iloveimg.com/ja

・画像圧縮

・画像サイズ変更

・pdf圧縮

・jpg変換

画像圧縮

https://tinypng.com/

要素間の計測

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=ja

margin,paddingの確認

レスポンシブ確認

https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea?hl=ja

複数のスクリーンサイズで確認したい時

カラーピッカー

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

サイト内で気に入った背景色を使いたい時

web font

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

サイト内で気に入ったweb fontを使いたい時

コピリン

https://chrome.google.com/webstore/detail/%E3%82%B3%E3%83%94%E3%83%AA%E3%83%B3/jmjkimbpmdcnlohbclgfdmckjnjlfhnd?hl=ja

頻繁に使用するURLを登録しておくことで、それらのURLを簡単に開いたり、コピーすることができる

レスポンシブ確認

https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

複数のスクリーンサイズで確認したい時

コーディング作業で、画像の圧縮やレスポンシブ確認、要素間(margin,padding)の確認など、便利なツールが欲しい時はこちらをご参考ください! また、これ便利だなと思うツールがありましたら、一覧に追加をお願いします!