🎨 CSSで思った通りのUIが作れない人へ：AIを使って“イメージをそのままコード化”するコツ

はじめに

CSSは「簡単」と言われることが多いですが、実際にWeb画面を作ると意外と時間がかかります。
私自身もレイアウトが思った通りにならず、いわゆる CSS地獄 に何度も陥りました。

最近は、自分のイメージをAIにそのまま伝えてCSSを書いてもらう という方法で、作業効率が大きく改善したので、そのコツを共有します。

---

🌟 一覧画面で「列固定」を実装したいケース

たとえば、案件を管理するシステムの一覧画面は、表示する項目が多いため、どうしても横長になりがちです。
項目数が多いと横スクロールが必須になり、主要項目である案件名や管理者名がスクロールで見えなくなる問題があります。

そこで「Excelみたいに列を固定したい」と考えます。

---

🔍 まずは“元のUI”を観察する

今回の例では Excel がヒントになります。

• A列とB列を固定したい
• Excelでは B列の項目名の下でウィンドウ枠の固定 をする

このように、
なぜそのUIはそう動くのか？
を理解しておくと、CSSで再現する時に非常に役立ちます。

---

⚠ sticky だけで列固定しようとすると崩れやすい

「position: sticky で固定すればいいでしょ」と思いがちですが、実は崩れやすいです。

• 横スクロール時に固定列に下の文字が透ける
• 行ごとに高さが違うとズレる
• Bootstrapなどと干渉して意図しない余白がつく

つまり、sticky を書くだけでは不十分 です。

---

🤖 AIにCSSを書かせるコツ：プロンプトを“具体的にすること”

ここが最重要ポイントです。
AIは抽象的な説明だと曖昧なCSSを返すので、できるだけ イメージを言語化して伝える ことが必要です。

実際に投げたプロンプト例

項目名「No」と「案件名」の2列を、Excelのウィンドウ枠の固定のように横スクロール時に固定したいです。
さらに、その2列の各行（td要素）も同じ位置で固定されるようにしてください。
横スクロールしたときに下の文字が透けないよう背景も設定してください。
以下が対象のHTMLです：（※本記事では省略します。）

ポイント：

• どう見せたいか を説明する
• 何が固定され、何が動くのか を書く
• 避けたい動作（透ける・ズレる）も指定する

これらを伝えたところ、AIが一発で理想のCSSを生成してくれました。

---

🛠 列固定で「テーブルの罫線が消える」問題について

実装している中で、列を固定した途端にテーブルの罫線が一部消えてしまう という事象に遭遇することがあります。

これは position: sticky を使ったときに、ブラウザがセルの描画順序を変えるため、border が正しく再描画されない ことが原因です。

そんな場合は、固定対象の th要素 / td要素 に明示的に border を指定すると改善します。

border: 1px solid #eee !important;

!important を付けて優先度を上げることで、他のスタイルに上書きされず、罫線が安定して表示されるようになります。
特に Bootstrap などフレームワークを併用しているプロジェクトで発生しやすいので注意が必要です。

---

🛠 仕上げは手動で微調整する（DevTools活用）

AIが生成したCSSはほぼ完璧ですが、次のような微調整が必要なことがあります。

• 1〜2px のズレ
• 既存CSSとの干渉
• Bootstrapの余白が残る

そんな時に便利なのが Chrome DevTools（開発者ツール） です。

🔎 DevToolsでCSSをシミュレーションする手順

1. 固定したいセルを 右クリック → 検証
2. 画面右側に表示される「Styles」でCSSを編集
3. 実際に表示を確認しながら微調整
4. 問題なければCSSファイルに反映

リアルタイムで見た目が変わるので、“px単位の細かい調整” に最適です。

---

🎨 Bootstrap などフレームワークが干渉する場合

UIフレームワークを使っていると、margin や padding が勝手に付くことがあります。

どうしても崩れる場合は以下のように !important を付けることで優先度を上げられます。

.fixed-column {
  background-color: white !important;
}

まとめ

• CSSは初心者にとって単純そうで意外と難しい
• AIにCSSを書かせると効率が大幅に向上
• ただし、曖昧な指示では期待通りにならない
• Excelなど“実在するUI”を例にするとAIに伝わりやすい
• 仕上げは DevTools で手動微調整すると安定する

CSSで悩んでいる方、AIを使って効率よくUIを作りたい方の参考になれば嬉しいです！！