圧縮されたCSSを元に戻してくれるツールをご紹介!

圧縮されたCSSを元に戻してくれるツールをご紹介!

圧縮されたCSSを元に戻してくれるツールをご紹介します。WEBサイトで使われているCSSはスペースや改行コードなどが省略された形で提供されているものが多いです。圧縮されたCSSを展開・整形してくれるツールを紹介します。自身の勉強やサイト制作に役立てましょう。


目次[非表示]

  1. 圧縮されたCSSを元に戻したい
  2. 圧縮されたCSSを元に戻してくれるツール
  3. まとめ

圧縮されたCSSを元に戻したい

WEBサイトの制作スキルを身につけるために、色々なサイトのCSSを見ている方もいるかと思います。

ブラウザでWEBサイトを閲覧できているときはサイトから提供されているHTML/CSS/JavaScriptの情報を見ることができます。しかしWEBサイトによってはファイル容量の圧縮などの目的のためにCSSを圧縮している場合があります。

例えばスペース・改行コードを削ったり、JavaScriptの場合だと、短い変数名にかえたり暗号化したりなどオリジナルのCSS/JavaScriptとは違う形で目にする機会も多いです。

そこで今回は圧縮されたCSSを元に戻すツールをご紹介していきます。圧縮されたCSSを元に戻すことをして、ぜひCSSの勉強に役立てましょう。

圧縮されたCSSを元に戻してくれるツール

WEBのツールを使うと圧縮されたCSSをすぐに元に戻せます。今回は「Pretty Diff」を利用しましょう。

prettydiff
prettydiff

prettydiffを開いたら、Functionの箇所を「Beautify」にして、左の入力欄に圧縮されたCSSをペーストしましょう。またファイルで用意している方はファイルを選択からCSSファイルをアップロードしましょう。

圧縮されたCSSが展開・整形されて表示
すると右側に圧縮されたCSSが展開・整形されて表示されます。

改行コードなども適宜入っているため、とても見やすい形となっています。

コピペした時点で右側に展開・整形されたCSSが表示されますが、できないという方は下にある「Execute」ボタンを押したらいけるかと思います。

まとめ

いかがでしたでしょうか。JSであれば難読化されていたりと解読するのは難しいですがCSSであれば、圧縮されたものでもPretty DiffなどのWEBツールを使うことですぐに展開して見ることができます。

ぜひサイトの圧縮されたCSSを展開してみて、自身の勉強やサイト制作に役立てましょう。

またどの要素にどういうCSSが使われているのかということはChromeのデベロッパーツールなどを使うとより細かく検証できるのでおすすめです。あわせて勉強しましょう。


関連記事