CSS調査のコツ

• 免責事項
  • セキュリティリスク等については自己責任でお願いします。
  • これを読んで問題が発生しても、筆者は一切の責任を負いません。
  • ご了承ください。
• スクショ
  • chrome DevToolsを開く
  • 左上のアイコンをクリック
    • ※「ページ内の要素を選択して検査」
  • 画面内で調査したい場所をクリック
  • DevToolsの要素タブとスタイルタブが、その場所の要素とスタイルを表示していることを確認する
  • 「調査したい場所と、DevToolsの要素タブ、スタイルタブ」がすべて入ったスクショをとる
  • それをLLMに投げつける
    • ※Claudeが優秀
      • ChatGPTは「断言した内容が、ハルシネーションだった」というケースが多い
        • 結局userが人力で解決した事例があった
          • 壁打ち程度には使えるかも
  • LLMの回答を確認し、各種実装を行う
    • 例
      • スタイルタブでの当該スタイルの直接編集、表示確認
      • custom.scss 等の編集とホットリロード、表示確認
      • DevTools上のCSSファイルの編集（後述）、表示確認
• CSSファイル
  • ※DevTools上のCSSファイルの編集、表示確認
  • 用途：
    • こういうときに使う：
      • DevToolsのスタイルタブを編集するとOK、意図した表示になった
      • だが、localの custom.scss ファイル等を編集してstatic site generatorでbuildしたときはNG、効果がなかった
  • 事例
    • DevToolsのstylesは、
      • custom.scss 等だと効かないようなものも効いてしまう
    • その場合、ブラウザ上のDevTools上のCSSファイルを直接編集すると、
      • CSSファイル編集でOKなものは、
      • custom.scss 等に書いてもOKとなる
    • ということがあった
  • 手順
    • chrome DevTools/ネットワーク で index.css 等が使われていることを確認する
    • index.css 等を右クリックして「ソースパネルで開く」
    • CSSファイルが開かれるので、それを直接編集する
    • 意図した表示になることを確認する
    • custom.scss 等を編集してホットリロードし、意図した表示になることを確認する