CSSを1行ごとに整形する作業をChatGPTにしてもらう

ウェブ上にはコードを完全に1行に変換するミニファイ化ツールはたくさんありますが、CSS要素ごとに1行に変換するツールは見当たりませんでした。そこでChatGPTに聞いてみたところ、瞬時に整形してくれました。

さらに、コメントアウト前には改行をするように条件を追加し、それを含めて対応してくれて結構便利だったので、どんな感じでやってくれたのかご紹介します。

複数行のCSS要素を1行につき1要素にしたかった理由

よくあるCSSの書き方として、プロパティ名と値を1行に書いてあるような書き方があります。

セレクタ {
 プロパティ名:値;
 プロパティ名:値;
 プロパティ名:値;
}
セレクタ {
 プロパティ名:値;
 プロパティ名:値;
 プロパティ名:値;
}

しかし、今回既存サイトのCSSを編集・追加していく中で、もともとの書き方が以下のように要素ごとに1行になっていました。

セレクタ {プロパティ名:値; プロパティ名:値; プロパティ名:値; プロパティ名:値;}
セレクタ {プロパティ名:値; プロパティ名:値; プロパティ名:値; プロパティ名:値;}

この書き方を維持したかったのですが、CSSを書いていると、テキストエディタやChromeのデベロッパーツールだと、どうしてもプロパティと値毎に改行が挟まれてしまいます。複数行のままでも表示上は問題ないのですが、既存CSSが1行なのに、新規追加のCSSが複数行なのはちょっと気持ち悪い。サイト全体のコードと整合性を取ったり、今後のメンテナンスを考えて統一しておきたいなーと。

例 GoogleのデベロッパーツールでCSSを記述する場合

例えば、Chrome デベロッパーツールで既存のCSSを上書きしてCSSを確認しながらというフローの場合、以下のようにCSSを書くと、当たり前ですが、app.css には複数行のCSSとして追加されます。

よって、画面変化をリアルタイムに確認しながらCSSを書いていくと、気がつくと数十行程度すぐにCSSが書かれます。

ウェブ上のツールを探してみたが無し

まずは、ウェブ上のツールを探してみました。複数行のコードを完全に1行（改行無し）にするツールは日本語・英語たくさん出てきます。

参考:
css one line converter – Google 検索
css 一行 変換 – Google 検索

一方、今回のように要素ごとに1行にし、改行を繰り返すようなツールは見つけられませんでした。

ChatGPT で複数行のCSSを1行毎にまとめてもらう

そこで、要素を1行に整形してくれるようにChatGPTに聞いてみることにしました。

複数行が混ざったサンプルCSS

サンプルのCSSは以下です。コメントアウトを含み、複数行のCSS要素が羅列されています。header部分は新規追加のため複数行なものの、main部分は既存CSSとなり1行毎の記述となっているのがわかるかと思います。

/* ----------
 header
---------- */
.header{
	background: #aaa;
}
.header-inner{
	margin: 0 auto;
	width: 1200px;
	height: 60px;
}
.header-inner h1{
    font-size: 1rem;
    font-weight: bold;
    margin: 0 auto;
    color: #ccc;
}

/* ----------
 main
---------- */
.main{ margin: 0 auto; padding: 0 0 60px; width: 1200px;}
.main-container{ padding: 60px 0 0; margin-bottom: 40px; width: 100%;}

ChatGPTに条件をつけて整形するよう指示を出す

このコードをもとに、ChatGPTに聞いてみます。

「以下のCSSを要素ごとに1行に変換してください。ただし、コメントアウトは残し、さらにコメントアウト前には一行改行を追加して再度整形してください。」と書き、その下に整形してほしいコードを貼ります。

期待した改行位置ではないものの、即座に整形したコートが出力される

コメントアウトの「後」にもなぜか改行が入ってしまっていますが、それ以外は瞬時に以下のように目的のコードに仕上げてくれました。ChatGPT便利！

/* ----------
 header
---------- */

.header { background: #aaa; }
.header-inner { margin: 0 auto; width: 1200px; height: 60px; }
.header-inner h1 { font-size: 1rem; font-weight: bold; margin: 0 auto; color: #ccc; }

/* ----------
 main
---------- */

.main { margin: 0 auto; padding: 0 0 60px; width: 1200px; }
.main-container { padding: 60px 0 0; margin-bottom: 40px; width: 100%; }

コードが長すぎると正しく整形してくれない

ただし、長すぎるコードの場合は途中でChatGPTの生成が終了してしまい、続きを生成するとなぜか1行ではなく、改行してしまっている状態でした。（つまり元のコードと同じ）

また別の例では、続きを生成するとCSS自体の出力が正しくないケースもありました。

このような場合は、長すぎるコードを分割して渡し、途中で生成が止まらないようにしてあげることで回避しました。

結論。ChatGPTは希望のコードに整形してくれる

今回のように、複数行のCSSを1要素単位で改行し、さらにコメントアウトはそのままにするというような条件においても、ChatGPTは正しく整形してくれることがわかりました。ただし、長すぎたりすると途中で止まってしまい、現時点ではうまく続きのコードを同じように出力できないため、分割するなど工夫が必要です。

CSSを直接書くという行為は少なく、現実的にはSassを書いてCSSはコンパイルされて自動変換されるというのが多いでしょうが、既存サイトの改修でCSS直書きしないといけないというようなケースでは、今回のようにルールに則った整形を簡単にしてくれるので助かりました。

正規表現でも同様のことは可能ですが、コメントアウト等の条件を考える手間を省略できるChatGPTの方が楽ですね。ぜひ使ってみてください。