現在の接続環境は
です

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

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

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

所要時間目安:2

This session is using  IPv4  is established in

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

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

目次に行く・戻る

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

  • 本日
  • 週間
  • 月間
  1. 新型デイズステアリングエクストレイルT32に取り付け夜間点灯

    新型デイズプロパイロットのステアリングをエクストレイルT32に取り付ける 9PV

    新型デイズB44W(B40系)が今年2019年3月28日に公表されて、3月29日新発売されてから早いもので約3ヶ月半が過ぎました。中古で良いのでオークションなどないかなぁと思いながら2週間くらい見てい…

    もっと読む

  2. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 4PV

    エクストレイルT32型(NT32も含め)がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  3. Googleアドマネージャーjs遅延読み込み方法AdManager遅延読み込み 3PV

    Googleのサービスにはいろいろなものがあります。GmailをはじめとしてGoogle AdSense(アドセンス)やGoogleタグマネージャーやGoogleアドマネージャーGoogle Anal…

    もっと読む

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

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

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

    もっと読む

  2. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 27PV

    エクストレイルT32型(NT32も含め)がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 25PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

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

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

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

    もっと読む

  2. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 27PV

    エクストレイルT32型(NT32も含め)がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 25PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

今日は2025年4月19日です。

メルカリ招待コード:

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

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

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

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

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

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

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

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

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.
Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。
このサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。
インデント・改行を調節し、ソースコードを整形します。
整形前のテキスト欄に入力されたコードが、自動的に改行やインデントを付加した見やすい状態にして表示します。

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

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

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

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

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

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

Windows10サポート終了まで

【AmazonタイムセールSALE車&バイク】!


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展:Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

あなたが訪問してから

0 秒経過 🎉

あなたにおすすめな関連記事

CSSファイル圧縮

カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

サイト表示速度を高速化とAMPの為にCSSファイルをMinify圧縮する方法

えー、ブログやホームページを運用されている方であれば、一度は気にしたことのあるはずのファイル圧縮についてです。英語ですと、「Minify」と言います。中でもAMP対応する場合には、CSSのファイルサイ…

もっと読む

インフィード広告アドセンス

桜花見

伝えたいこと 備忘録 時事ネタ

花見の季節・時期ももうすぐ終わり…。地域により異なるが…。

花見の季節が、 花見に時期がもうすぐ終わってしまう…。 幼い頃は、 桜まつりなるものに言ってはいたものの幼心だったせいか、 桜の花見という情緒あふれる日本人ならではの文化を意外と理解できていなかったと…

もっと読む

インフィード広告アドセンス

Gmailスクショ

PC 伝えたいこと 備忘録

Gmailで未読のみ表示する方法

Gmailが招待制から登録制になって早10年近くになります。招待制の頃から使用させていただいていましたが、Gmailのユーザインターフェイス(UI)も結構変わりました。また、デベロッパーツールでも公式…

もっと読む

インフィード広告アドセンス

今日の人気記事

Stinger6 WordPress カスタマイズ

記事の上に今日の人気記事を表示する方法

↑ のように、 個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。   WordPressにおいては、 WordPress Popular Postsという人気記事のプ…

もっと読む

インフィード広告アドセンス

年末年始渋滞予想

メンテナンス 伝えたいこと 備忘録 旅行 時事ネタ

年末年始の渋滞予測・渋滞予想は、名神・東名は1月2日、3日がピークで55km…。

さてさてもうそろそろ、年末年始の帰省ラッシュ時期に近づいてきました。年に幾度となくこの帰省ラッシュという言葉が踊るのでしょうか。 まずは今回のように年末年始、そして夏のお盆時期の会社が夏休みの時期が大…

もっと読む

インフィード広告アドセンス

最善策

AFFINGER4Pro WordPress テーマ 伝えたいこと 備忘録 時事ネタ

テーマ選びは何が最善策なのか?迷う時はどうした良いのか!?

人生において迷うことは多々あると思います。絶対にあります!!と言い切れますよね。 生まれてから義務教育を終えて高校受験からどの高校に行こうかなどの時が人生においての初めての最善策を選択するのに迷うこと…

もっと読む

WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

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

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

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


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total628


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.