ChatGPTにCSSを作ってもらう時は、「ボタンを青くして」のような見た目だけでなく、対象のHTML、変更する要素、残したいデザイン、確認する画面幅まで伝えます。
生成されたCSSは、いきなり既存ファイル全体と置き換えません。元のコードを保存し、変更箇所を絞って追加し、パソコンとスマートフォンの両方で確認すれば、初心者でも戻せる状態で試せます。
ChatGPTでCSSを作る前に知っておくこと
CSSは、HTMLで作られた見出し、文章、ボタンなどの色・大きさ・間隔・配置を指定するコードです。HTMLがページの構造、CSSが見た目を担当します。
たとえば、次のCSSは cta-button というクラスが付いた要素の背景を青くし、文字を白くします。
.cta-button {
background-color: #1260d6;
color: #ffffff;
}
CSSは通常、styles.css などの外部ファイル、HTML内の <style>、要素へ直接書くインラインCSSのいずれかで使います。一般的なWebページでは、複数ページで共有しやすい外部CSSが扱いやすい方法です。基本から確認したい場合は、MDNのCSS入門も参照してください。
すでにCSSがある場合は、後から書いた規則、セレクターの具体性、継承などで表示結果が変わります。ChatGPTが正しいCSSを出しても、既存ルールとの優先順位によって反映されないことがあります。
初めてコードを依頼する方は、先にChatGPTでプログラミングを始める方法で、目的と入出力を小さく決める流れを確認してください。
ChatGPTでCSSを作る5ステップ
1. 元のHTMLとCSSを保存する
変更前のHTMLとCSSを別名でコピーするか、バックアップを取ります。WordPressで編集する場合も、テーマや追加CSSの元の内容を保存してから始めます。
次の5項目を「変更カード」としてメモすると、ChatGPTへ不足なく伝えやすくなります。
| 項目 | 記入例 |
|---|---|
| 対象 | .cta-button が付いたボタン |
| 現状 | 背景が灰色で文字が読みにくい |
| 希望 | 青い背景、白い文字、角丸 |
| 残す点 | ボタンの文言とリンク先は変えない |
| 確認幅 | PC 1200px、スマホ 375px |
2. 対象要素を特定する
変更したい部分のHTMLを確認し、クラス名やIDを探します。ブラウザーの開発者ツールでは、対象要素と適用中のCSSを確認できます。
ページ全体のコードを渡す必要はありません。対象要素の周辺だけを抜き出し、個人情報、会員限定情報、APIキー、管理画面URLなどは含めないでください。
<a class="cta-button" href="/contact/">問い合わせる</a>
3. 条件を付けてCSSを依頼する
対象HTML、希望、変更してはいけない点、出力形式を一緒に伝えます。OpenAIのプロンプト作成ガイドでも、明確で具体的な文脈を与え、結果を見ながら反復して改善する方法が案内されています。
「サイトをおしゃれにして」では判断材料が足りません。「既存HTMLは変更しない」「追加CSSだけをコードブロックで出す」のように変更範囲を固定します。
4. 追加場所を確認して小さく試す
出力されたコードの言語ラベルが css であることを確認し、セレクター、色、幅、余白を読みます。操作の違いはChatGPTのコードブロックの使い方で確認できます。
既存CSS全体を置き換えず、対象ルールだけをテスト環境や追加CSS欄の末尾へ追加します。変更前後を比較し、意図しない部分が変わった場合は元へ戻します。
5. PCとスマホで確認する
パソコン幅だけでなく、スマートフォン幅でも文字切れ、横スクロール、ボタンの押しやすさを確認します。CSSのメディアクエリを使うと、画面幅などの条件に応じてスタイルを切り替えられます。
見た目だけでなく、リンクが押せるか、フォーカスが見えるか、本文を拡大しても読めるかも確認します。問題が出たら一度に複数箇所を直さず、1回に1点だけ変更して再確認します。
CSS作成用のコピペプロンプト
次のひな型へ、対象のコードと希望を入力してください。
次のHTML要素に適用するCSSを作ってください。
【対象HTML】
（ここに個人情報を含まない対象部分のHTMLを貼り付ける）
【現在の問題】
（ここに見た目や動作の問題を入力する）
【希望する見た目】
（ここに色、余白、配置、文字サイズなどを入力する）
【変更しないもの】
（ここに文言、リンク先、他の要素などを入力する）
【確認する画面幅】
PC 1200px、スマートフォン 375px
既存HTMLは変更せず、追加するCSSだけを
言語ラベル付きコードブロックで出してください。
使用するセレクターと、追加する場所も初心者向けに説明してください。
不明点があれば、コードを推測する前に質問してください。
最初から完成形を求めず、1回目は背景色と文字色、2回目は余白というように分けると、原因を追いやすくなります。
CSSが反映されない時の確認順
CSSが動かない時は、次の順番で確認します。
- CSSファイルがHTMLから正しく読み込まれているか
- クラス名やIDの綴りがHTMLと一致しているか
- 波括弧
{}、コロン:、セミコロン;が欠けていないか - 別のCSSルールに上書きされていないか
- ブラウザーのキャッシュではなく最新ファイルを表示しているか
- メディアクエリの条件が現在の画面幅と合っているか
エラーをChatGPTへ伝える時は、「反映されません」だけでなく、対象HTML、追加したCSS、期待した表示、実際の表示、確認した画面幅を示します。ChatGPTでエラー原因を調べる方法の手順も使えます。
よくある失敗と直し方
ページ全体を一度に作り直す
変更範囲が広いほど、どのルールで崩れたか分かりにくくなります。対象クラスを1つに絞り、差分だけを依頼します。
!important を何度も追加する
一時的に反映されても、後の修正が難しくなります。まず既存CSSの優先順位とセレクターを確認し、必要性を説明できる場合だけ使います。
PCだけで確認する
固定幅や大きな余白はスマートフォンで横にはみ出すことがあります。少なくともPCとスマートフォンの2幅で確認します。
見た目が整ったので完了にする
文字の読みやすさ、キーボード操作、リンク先、他ページへの影響も確認します。JavaScriptで動く部分を変更する場合は、ChatGPTでJavaScriptコードを作る方法へ進んでください。
まとめ
ChatGPTでCSSを作る時は、対象・現状・希望・残す点・確認幅を先に決めます。元のコードを保存し、対象を絞って追加し、PCとスマートフォンで確認すれば、初心者でも失敗時に戻せる形で改善できます。
完成ページを一度に作らせるより、小さな変更を1つずつ確認する方が、表示崩れの原因を見つけやすく、CSSの仕組みも理解しやすくなります。
コメント