圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】

初心者向けに圧縮されたCSSを元に戻すツール10選について解説しています。最初に、圧縮されたCSSの見分け方について説明します。次に圧縮されたCSSを元に戻すツールの例と、その中からCloud9を使った方法を見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

圧縮されたCSSを元に戻すツール10選について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

圧縮されたCSSを元に戻すツール10選について詳しく説明していくね!

大石ゆかり

お願いします!

目次

 

圧縮されたCSSの見分け方と違いについて

圧縮されたCSS(カスケーディングスタイルシート)は、符号的な文字列として一行として列挙されるのみになってしまっています。なお、検索エンジンなどの入力装置にコードを貼り付けますと、自動的に圧縮されます。

 

 

圧縮されていないCSSのコード

.readmore a.button {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
  background-color: #eee;
  padding: 10px;
  line-height: 14px;
  font-size: 14px;
  width: 160px;
  margin: 0 auto;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 5px 0px #666;
}

 

圧縮されているCSSのコード

.readmore a.button { text-decoration: none; color: #333; display: block; text-align: center; background-color: #eee; padding: 10px; line-height: 14px; font-size: 14px; width: 160px; margin: 0 auto; border: 1px solid #aaa; border-radius: 10px; box-shadow: 0 5px 0px #666; }

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

元に戻すツール10選

  1. AWS(Amazon Web Services)Cloud9
  2. CSS Minifier
  3. Sublime Text 2
  4. Visual Studio Codespaces
  5. YUI Compressor
  6. Visual Studio Code
  7. Adobe Dreamweaver
  8. Eclipse
  9. CSS Compressor
  10. vim

かつては、YUI(Yahoo User Interface) Compressorが、代表格でした。

 

ツールを使って圧縮を戻してみよう

AWS(Amazon Web Services)のCloud9を例に紹介します。

「Code Formatting」の「Apply Code Formatting」を選択することで、プログラム言語が特定されているソースコードの整形が可能になっています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。