現在の接続環境は
です

記事内にプロモーションが含まれています。

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

プロモーションを含みます

CSS圧縮後(minify)にCSS整形方法カスタマイズの為

所要時間目安: 2

This session is using  IPv4  is established in

今日は2025年7月6日です。

この記事は2023年4月26日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年7月6日 (日曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. PITWORKオイルシーリング剤

    オイル滲みオイル漏れにPITWORKオイルシーリング剤評価レビュー 2PV

    オイル漏れオイル滲みなどやケミカル商品で一番メジャーなのがワコーズ製品ですが、今回はエンジンオイル盤部分からのオイル滲みかと思っていたのですがどうもカムシャフト部分からの滲みっぽい…。 一番メジャーな…

    もっと読む

  3. ノートパソコン分解後のファン

    ノートPCファンの異音でLIFEBOOKAH77/E分解 2PV

    富士通製ノートPCで発売当初からブルーレイドライブ対応でかなりの高スペックノートPCだったLIFEBOOK AH77/Eです。 メモリの増設とHDDをハイブリッドHDD(SSHD)に換装はしましたが、…

    もっと読む

  1. プロステージ

    エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた 28PV

    車にとってエンジンオイルは心臓部であるエンジンを保護するための重要な潤滑剤(潤滑油)です。他にもクーラント液やブレーキフルードなどのオイル関係はありますが、一番シビアな環境にあるエンジンを直接保護する…

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 28PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 25PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  1. プロステージ

    エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた 28PV

    車にとってエンジンオイルは心臓部であるエンジンを保護するための重要な潤滑剤(潤滑油)です。他にもクーラント液やブレーキフルードなどのオイル関係はありますが、一番シビアな環境にあるエンジンを直接保護する…

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 28PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 22PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

サイト運営しているうちにCSSがものすごい大きくなってしまうことがありますよね。昔使用していたCSSがそのままだったり、もしくはコメントアウトしたものが残っていたりなどです。そういった不要なCSSをサイト表示速度改善のためにCSS圧縮をすることがあります。

すると、だいたい1行にまとめられて結構な縮小になります。

この記事を読む方へのオススメ

その後、サイト運営を続けているうちにCSSが同じようなことになりつつあることがあります。

しかし、以前のCSSをCSSminifyなどにて1行に圧縮してしまった為に古いCSSのどこのどの部分がどこに該当するのかわかりにくくなってしまいます。

以下のようになってしまいます。

なので、CSSの圧縮は有名ですが逆の圧縮を元に戻すCSS整形をすることにより見やすくなります。

CSS整形が可能なサイト一覧は以下になります。

Thumbnail
DirtyMarkup Formatter - CSS Beautifier for Stylesheets
Messy stylesheets can be impossible to edit. Use DirtyMarkup's free online tool to tidy up your CSS code. Beautify even the ugliest / unformatted CSS.
Thumbnail
CSSのコード整形ツール
Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。
Thumbnail
CSS整形ツールの使い方
このサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。
Thumbnail
JavaScript / CSS 整形
インデント・改行を調節し、ソースコードを整形します。
Thumbnail
CSS整形ツール
整形前のテキスト欄に入力されたコードが、自動的に改行やインデントを付加した見やすい状態にして表示します。

上記の中でも一番おすすめなサイトは一番はじめに紹介したDirtyMarkup Formatter - CSS Beautifier for Stylesheetsサイトですかね。

CSS整形後は以下のように人の目で見てわかるように修正・整形・直してくれます。

それぞれのCSSが見やすくなります。

その他のCSS整形サイトもみんな綺麗に整形してくれます。それぞれのサイトで整形後の容量が少しだけ異なりますが長過ぎる(多すぎる・大き過ぎる)CSSだとわかりにくいです。

CSS整形後の容量が一番少ないツールサイトをご利用されるか、CSS整形後の容量が一番多いツールサイトをご利用されるかなど、

CSSの整形後の容量で、どのサイトが一番自分の使用しているCSS合っているのかの判断材料にしても良いのかもしれません。

あなたにおすすめ


Multiplex 広告

あなたが訪問してから

0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

Total704


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを表示(0)

コメントを書く

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

新着コメント