ショートカット一発!圧縮(min化)されたCSSやJavaScriptのソースコードを見やすく整形しちゃうよ!

フロントエンジニアのみなさーん!今日も色んなサイトのHTMLを覗き見していますかー!!
HTMLを見ていると、求人情報が書いてあったり、アスキーアートが書いてあったりすることがあって、こういうのを見つけると楽しいですね!

アメリカのブログサービスtumblrのHTMLは、「tumblr」って大きく書かれていてインパクトがありますねー。
tumblr

また、日本でも同じようなことをしているサイトは多く、音楽配信サービスの老舗、muzieのHTMLは、「muzie」って大きく書かれていますね!
muzie

それにしても、

<meta name="robots" content="index,nofollow,noarchive">

というのは、どういう意図があるんでしょうね・・。リンク先は検索エンジンに辿らせないように設定中!?

さてさて、前回の記事「え!?わずか1秒でCSS / JavaScriptファイルを圧縮!Sublime Text3にYUI Compressorを入れてみた。」で、ファイルを圧縮するやり方を紹介しました。

逆に、圧縮(min化)されたファイルを整形(prettify)するやり方を今回は説明しますー!
今回もSublime Text3のプラグインを使用します。

Sublime Text3にプラグイン「HTML/CSS/JS Prettify」をインストール

■Mac
⌘(Command) + ⇧(Shift) + P

■Win
Ctrl + Shift + P

もしくはTools → Command Palette を選択します。

コマンドパレットを呼び出して、「install」と入力します。
Package Control: Install Package」と表示されますので、Enterキーを押します。

パッケージ名を入力する画面となりますので、「HTML/CSS/JS Prettify」と入れてください。これで今回も楽々プラグインがインストールできちゃいます。

Sublime Textって、プラグインを入れるのに病み付きになりますよね・・・!
 

「HTML/CSS/JS Prettify」を使って圧縮(min化)されたファイルを整形(prettify)する

prettify

CSSやJavaScriptの圧縮されたファイルを開いて、

右クリック → HTML/CSS/JS Prettify → Pretify Code

もしくは、

■Mac
⌘(Command) + ⇧(Shift) + H

■Win
Ctrl + Shift + H

で整形されます!

※node.jsをインストールしておかないとダメだそうです。

一瞬で整形されましたね!!
圧縮されたサイトなどのソースをコピペして確認する際に有効ですね。

便利な「Pretify Code」プラグイン、是非活用して素敵な整形ライフを過ごしましょう。

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

【TechAcademy】家で学べるプログラミングスクール

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景