CSSはAIにおまかせ!アーカイブページのレイアウト崩れを一瞬で解決した話
2025年05月24日
こんにちは、ダンシングポノ制作のニーダです!
今回は「CSSレイアウトの崩れをAIで解決した実例」をご紹介します。
実は、このスタッフブログのアーカイブページでちょっとした問題が起きていました。
そもそもアーカイブページって?
WordPressでは、カテゴリー別、タグ別、著者別などの一覧ページを「アーカイブページ」と呼びます。
例えば「最新情報」や「感動ダンス動画」などのジャンルをクリックしたときに出てくる記事一覧がそれです。
このページはとても大事な役割を果たしています。
でも、見た目が崩れてしまっては台無し…!
レイアウト崩れが起きた!
ある日、スマホで確認したところ…
このスタッフブログの「一覧の表示がぐちゃぐちゃ」 に。
スマホでの表示確認してませんでした。。。。
記事が縦に並ばず、幅もバラバラ。まさに崩壊状態。
こんなとき、私はスマホでスクショを撮って、ChatGPTに送ってみました。
AIに聞いてみた!
ChatGPTには、「カード型にしたい」と伝えるだけ。
さらに、
- Safariであれば「該当部分を右クリック → 要素の詳細を表示」
- Chromeなら「右クリック → 検証」
でHTMLソースを表示して、ChatGPTコピーして送るとより正確に対応してくれます。
すると、AIはすぐに以下のようなCSSを提案してくれました:
```css
.ArchiveCardList {
display: flex;
flex-direction: column;
gap: 16px;
}
.ArchiveCard {
display: flex;
padding: 12px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
これを反映すると、あっという間に見た目が整いました。
でも、問題はそれだけじゃなかった…
後日、TOPページの最新情報の表示も崩れていることに気づきました。
調べてみると、同じ .ArchiveList
というクラス名が共通で使われており、CSSが他の場所にも影響してしまったようです。
解決方法もAIにおまかせ!
再度AIに相談すると、すぐに「親要素に専用クラスを追加して、スタイルを限定する方法」を提案してくれました。
このように、たったちょっと工数でTOPページもスッキリ!
結論:CSSやレイアウトの相談はAIに聞くのが早い!
- レイアウト崩れも、CSS調整も、AIが一瞬で提案してくれる
- ソースを「検証」してコピペ → AIに貼り付けるだけ
- 予想以上に速く、的確なアドバイスがもらえる
同じような悩みがある方は、ぜひAI × スクショ × 検証ツールを活用してみてください!
話題の人気コンテンツ
-
まんがで学ぶペアダンス入門
初心者が最初につまずくポイントを4コマで楽しく解説! -
ペアダンスあるある
〜ペアダンス経験者が共感できる、笑って学べるシリーズ〜 -
スタッフブログ
ほぼ毎日更新、ラテンダンスに関わるライフスタイルをご紹介 -
無料会員登録で便利に!
-
ダンシングポノ公式アプリを今すぐインストール
あなたのダンスライフをさらに充実させましょう!
▶︎ iOS版はこちら
▶︎ Android版はこちら
口コミをする(コメントする)
コメントを投稿するにはログインしてください。