MENU
  1. ホーム
  2. css
  3. 圧縮したHTML・CSS・JavaScriptを元に戻すツール!他Webデザインおすすめツール!

圧縮したHTML・CSS・JavaScriptを元に戻すツール!他Webデザインおすすめツール!

css

ちょっと便利だと思ったツールのまとめです。

エックスサーバーのお友達紹介プログラム!

CSSのデザインツール

border radius

4箇所

https://9elements.github.io/fancy-border-radius/

8箇所

https://9elements.github.io/fancy-border-radius/full-control.html

説明はコリスさんがわかりやすいです。

https://coliss.com/articles/build-websites/operation/css/css-border-radius-can-do-that.html

背景グラデーションアニメーション

ヘッダーなどがアニメーションしているサイト見かけますよね。

https://www.gradient-animator.com/

レスポンシブデザインの動作確認(Responsivize/responsively.app)

https://responsively.app/

https://virejdasani.github.io/Responsivize/

どちらもローカル確認もできるようです。切り替えせず、ぱっと見で使えるのがよいですかね。

Chromeデベロッパーツールで物足りなくなったら、使いましょうかね。

スポンサーリンク

webデザインでフル幅の画像素材は何px?

素材を作るときシェア率が気になりました。

StatCounter Global Stats
Desktop Screen Resolution Stats Japan | Statcounter Global Stats This graph shows the stats of desktop screen resolutions in Japan based on over 5 billion monthly page views.

1920*1080が多いですね。srcsetがあるらしい。

スポンサーリンク

圧縮したHTML・CSS・JavaScriptを元に戻すツール

インデントされた状態に戻ります。

あわせて読みたい
DirtyMarkup Formatter – HTML, CSS, & JavaScript Beautifier A free tool to clean up your dirty code. DirtyMarkup is the best HTML, CSS, and Javascript (JS) beautifier with an API to tidy up your code in an application.

はてぶ多数。

あわせて読みたい
Online JavaScript beautifier
スポンサーリンク

Firefoxのデバッグと動作確認

f12が開発者モードのようです。デフォルトで入っている端末は違いますが、Chromeのようにスマホの動作確認ができますね。

スポンサーリンク

microsoft autoupdateを起動させない

Microsoft Edgeを検証用に入れたのですが、一緒についてきたmicrosoft autoupdateが邪魔に。。

microsoft autoupdateの通知はうざいだけではなく、何回か30分ぐらいMacが固まる原因になったためAppCleanerで削除しました。通知をオフにしてもでてくるのです。。

Macintosh HD⁩ > ライブラリ > Application Support > Microsoft⁩ > MAU2.0 > microsoft autoupdate

AppCleanerでゴミ箱にいれればおしまいです。チェックを全部入れて削除すればOKです。

そもそも使ってもないのに起動するUIがありえないというか。。VsCodeで見直していたのにまた評価をさげました。。まあ、開発チームによるのでしょうね。

スポンサーリンク
css
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする