圧縮されたCSSを元に戻したい
WEBサイトの制作スキルを身につけるために、色々なサイトのCSSを見ている方もいるかと思います。
ブラウザでWEBサイトを閲覧できているときはサイトから提供されているHTML/CSS/JavaScriptの情報を見ることができます。しかしWEBサイトによってはファイル容量の圧縮などの目的のためにCSSを圧縮している場合があります。
例えばスペース・改行コードを削ったり、JavaScriptの場合だと、短い変数名にかえたり暗号化したりなどオリジナルのCSS/JavaScriptとは違う形で目にする機会も多いです。
そこで今回は圧縮されたCSSを元に戻すツールをご紹介していきます。圧縮されたCSSを元に戻すことをして、ぜひCSSの勉強に役立てましょう。
圧縮されたCSSを元に戻してくれるツール
WEBのツールを使うと圧縮されたCSSをすぐに元に戻せます。今回は「Pretty Diff」を利用しましょう。
prettydiffを開いたら、Functionの箇所を「Beautify」にして、左の入力欄に圧縮されたCSSをペーストしましょう。またファイルで用意している方はファイルを選択からCSSファイルをアップロードしましょう。
改行コードなども適宜入っているため、とても見やすい形となっています。
コピペした時点で右側に展開・整形されたCSSが表示されますが、できないという方は下にある「Execute」ボタンを押したらいけるかと思います。
まとめ
いかがでしたでしょうか。JSであれば難読化されていたりと解読するのは難しいですがCSSであれば、圧縮されたものでもPretty DiffなどのWEBツールを使うことですぐに展開して見ることができます。
ぜひサイトの圧縮されたCSSを展開してみて、自身の勉強やサイト制作に役立てましょう。
またどの要素にどういうCSSが使われているのかということはChromeのデベロッパーツールなどを使うとより細かく検証できるのでおすすめです。あわせて勉強しましょう。