HTMLやCSSの圧縮されたソースでも
整形ソースに戻して簡単にチェックする方法

今やサイトの表示速度はあらゆる面において重要視されるようになりつつあります。そんな事もあってか、今ではHTMLでもCSSでもJavaScriptでも、実際にアップロードする際などには無駄な改行などを無くして、圧縮されたソースコードが使われる事も増えてきました。

WordPressなどでは特にプラグインで簡単に行えるため、Autoptimizeなどを自分自身も使っていますし、こういったプラグインでボタンをポチポチとするだけで、ソースコードの圧縮が可能になりました。

これは制作する側であれば良いのですが、ちょっと他サイトを参考にしたり、この部分どうやって作ってるんだろう？と言うときに、圧縮されたソースコードだと非常に見にくく解読が難解になります。

今回は、そんなチェックしたサイトなどが圧縮されたソースコードであっても、ひと手間でさくっとチェックする方法について見ていきたいと思います。

そもそも圧縮されたソースとは

既にご存じの方も多いとは思いますが、そもそも圧縮されたソースとはというところで見ておくと、一般的に解説したりなど見たりする機会が多いソースコードは下記のような物になります。
※ソースの中身は適当で意味はありません。

いわゆる通常のソース

<section class="wrapper">
  <h2>見出し見出し</h2>
    <div class="text">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  <h2>見出し見出し</h2>
    <div class="text">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</section>

.wrapper {
  width: 800px;
  margin: 30px auto;
  padding: 25px;
  border: 1px #ccc solid;
  background-color: #fff;
}

h2 {
  margin: 30px 0 0;
  padding: 10px;
  color: #fff;
  font-size: 2.0rem;
  border-radius: 5px;
  background: #000;
}

.text {
  margin: 25px 0;
  border: 1px #ccc solid;
}

.text p {
  margin: 20px 0 0;
  font-size: 1.6rem;
  line-height: 1.6;
}

とりあえず適当に思いつくままにHTMLとCSSを作りましたが、実際にコードを書いていく際にはこういったインデントを付けたりして、見やすいように作っていきます。

ですが、これだと改行が入ったり無駄な余白があるということで、この余白などを全て削除してしまえば、容量が軽量化されるのでは？ということで、そういった無駄を除去したのが圧縮されたソースになります。

圧縮されたソース

実際に、上記の同じコードを圧縮してみるとこうなります。

<section class="wrapper"><h2>見出し見出し</h2><div class="text"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><h2>見出し見出し</h2><div class="text"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></section>

.wrapper{width:800px;margin:30px auto;padding:25px;border:1px #ccc solid;background-color:#fff}h2{margin:30px 0 0;padding:10px;color:#fff;font-size:2rem;border-radius:5px;background:#000}.text{margin:25px 0;border:1px #ccc solid}.text p{margin:20px 0 0;font-size:1.6rem;line-height:1.6}

このように、無駄な余白や改行などを全て削除してしまったのが、圧縮されたソースコードとなります。

HTML、CSS、JSなどで使われる

これらはHTMLやCSS、JavaScriptなどでこれらはよく使われており、jQueryのプラグインなどをダウンロードすると、○○.min.jsといったファイル名で用意されていたりするかと思いますが、あれが軽量化されたjsファイルですよという意味で用意されているものになります。

WordPressのサイトなどではプラグインで一括で全ページのコードを圧縮することができるので、使っている人も多いと思いますし、実際に当サイトも使ってソースを圧縮しています。

軽量化＋他の人に見られないというメリット

このソースコードの圧縮は、一番のメリットというか狙いは軽量化になります。余白を省いた分だけ小さな分ではありますが、ファイルの容量は軽くなります。

1つ1つは小さいものであったとしても、それが何個、何十、何百とあり、それが毎日何千、何万と読み込まれるという事を考えると、ソースコードの圧縮をするメリットと意味もわかるかと思います。

また、それだけでなくソースコードを圧縮すると、他の人がソースを見た時にパッと見て解読不能な状態にする事も出来ます。実際に通常のインデントされた見やすいソースコードとこの圧縮されたソースコードは、書かれてる内容は同じですが、圧縮されたのを解読しようとするとなかなか困難です。

昔はサイトがパクられたり、色んな調査ツールなどで調べたりなどされたりした事もあってか、圧縮して軽量化というメリットとともに、サイトを調べられにくくするというメリットもありました。

見られないというのが逆にデメリット

そうは言っても、何かデザインをしたりする時のアイディアだったり参考に色々なサイトを見たりするというのは誰もがよく行っていることだと思います。

もしくは勉強中ということで、色々なサイトの色々なデザインを見たり、コーディングの仕方などを見て実践して真似て勉強したりというのも誰しもしてきたことかなと思います。

しかしながら、そんな特にコーディングで「あ、このデザインパーツいいな」と思った時にどうやってコーディングしてるんだろう？と思ってソースを見たりして、あの圧縮されたコードが出てきたらとてもじゃないですがその部分を解読していくというのは骨が折れます。

圧縮されたソースコードを元に戻す方法

ということで、そんな見てたサイトが圧縮されたソースコードだった場合どうすれば良いかというのをまとめておきます。これを使えば、圧縮されたソースコードでも元に戻せます。

実際にやれる方法としては2パターンありますが、個人的には後述する2つめの方がオススメかなと思います。

ブラウザの開発者（デベロッパ）ツールを使う

ブラウザでキーボードの「F12」を押すと開発者ツール（デベロッパツール）が開きます。この時に一番左のメニューのボタンか、Ctrl + Shift + Cを押すことでそれぞれの要素のソースコードが表示されます。

そして表示される際には圧縮されたソースコードではなく、整形されたソースコードで表示されるため、ここでソースを見ることでどういうコードが書かれているかなどがチェックしやすくなります。

ただ基本仕様ではHTMLもCSSもブラウザの画面を分割してページとコードを表示していく事になるため、画面などによっては小さくなりますし、各エレメント毎で見ていく事になるためちょっとしたパーツなどを見る時には適していますが、全体を見たいなどの場合は少し手間かもしれません。

外部の圧縮・整形ツールを使う

これ一択で良いのかなとも思いますが、外部にはそういったソースコードを圧縮するツールもあれば、圧縮されたソースコードを元のインデントされた状態に戻してくれる整形ツールもあります。

色々な方がプログラムで作って公開してくれているのでそれらを使えば簡単に圧縮されたソースコードを見る事ができます。

個人的によく使わせてもらっているのが、ラッコツールズさんです。
今回の整形・圧縮ツールだけでなく様々なお役立ちのツールがあってめちゃくちゃ使わせてもらってます。

参考リンク：ラッコツールズ
そんなラッコツールズさんの中でも

• HTMLコード整形
• JavaScript / CSS 整形
• JavaScript / CSS 圧縮・軽量化（Minify）

この3つを使う事で、圧縮されたソースコードも元に戻せますし、なんなら自分の作ったソースコードを圧縮する事も可能です。HTML系は1つでまとまっていますが、CSS/JS分は圧縮と元に戻す整形はツールがわかれています。

使い方はとても簡単です。

1. サイトのソースを表示して圧縮されたソースをコピー
2. 整形ツールのテキストエリアに貼り付け
3. 整形ルール（インデントの数など）を決めて整形するをクリック

たったこれだけで、圧縮されているソースコードがHTMLでもCSSでもJSでも整形して見やすく表示できるので、チェックしたい箇所などをチェックしやすくなります。

実際に自分のサイトなどでテストしてみると、整形したり圧縮したりがテストできます。（HTMLの圧縮だけは、「インデントレベル」となっているところを「縮小・圧縮」を選ぶ事で圧縮ができますし、他を選べば整形されるという形になります。

まとめ

圧縮されたソースコードを元に戻して見る方法についてまとめてみました。

ちょっと他のデザインやサイトなどで参考になるようなデザインやパーツなど無いかなーと思っていて、良いのが見つかった！と思ってソースを見たら圧縮されたコードで解読できない…なんて事あったりした方は、これで解決ができます。

もちろん整形したのを見てパクったりなんて事は言語道断でNGですが、参考にしたり勉強している時に圧縮されたソースコードでどうしよう…とならないために、こういった方法もあるというのは知っておいて損はないですし、なんなら自分のサイトも軽量化のために圧縮させて使ってみても良いのでは無いでしょうか。