• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / CSSを1行ごとに整形する作業をChatGPTにしてもらう

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

池田祐太郎 | 2023年8月9日 公開 コメントを書く

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

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

目次

  • 1 複数行のCSS要素を1行につき1要素にしたかった理由
    • 1.1 例 GoogleのデベロッパーツールでCSSを記述する場合
    • 1.2 ウェブ上のツールを探してみたが無し
  • 2 ChatGPT で複数行のCSSを1行毎にまとめてもらう
    • 2.1 複数行が混ざったサンプルCSS
    • 2.2 ChatGPTに条件をつけて整形するよう指示を出す
    • 2.3 期待した改行位置ではないものの、即座に整形したコートが出力される
  • 3 コードが長すぎると正しく整形してくれない
  • 4 結論。ChatGPTは希望のコードに整形してくれる

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

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

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

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

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

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

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

例えば、Chrome デベロッパーツールで既存のCSSを上書きしてCSSを確認しながらというフローの場合、以下のようにCSSを書くと、当たり前ですが、app.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行毎の記述となっているのがわかるかと思います。

今回利用したサンプルCSS
/* ----------
 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への指示文章

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

ChatGPTは即座に整形して返します。コメントアウトも維持されている

コメントアウトの「後」にもなぜか改行が入ってしまっていますが、それ以外は瞬時に以下のように目的のコードに仕上げてくれました。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自体の出力が正しくないケースもありました。

typeの後にセレクタが入ってしまっていてCSSとして成り立っていない

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

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

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

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

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

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:ChatGPT, css

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPressの不要なプラグインは残していいのか、それとも削除したほうがいいのか
2023年8月23日
タグ: ChatGPT, wpcli, 保守管理
カテゴリー: WordPress
ChatGPTの「Code Interpreter」によってデータサイエンティストの職が奪われる?
2023年7月26日
タグ: ChatGPT
カテゴリー: TIPS
ChatGPTとWebPilotを組み合わせて、WordPressプラグインの脆弱性をサクッとチェックする方法
2023年6月21日
タグ: ChatGPT
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  5. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  6. WordPress で PHP エラーメッセージを非表示にしたい時

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress保守あるある:プラグインを更新したらエラー表示
  • WordPressのアップデートはどのタイミングで行うのが正解か
  • 同一ページでMW WP Formのフォームを切り替える方法
  • WordPressの不要なプラグインは残していいのか、それとも削除したほうがいいのか
  • WordPressの自動&定期バックアップをプラグインで簡単に設定する

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP Photoshop php SEO SNS ssh Sublime Text UpdraftPlus Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 効率化 最適化

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.