はじめに
フロントエンドを開発していると、CSSの問題がポツポツと出てくる。
特にコンポーネントのライブラリを使用すると、うまくCSSが変わってくれないときや、逆に変な枠線が出てきたりと、HTMLやCSSを解析する必要がある。
CSSは色々と制限、制約がある。親子の関係だったり、設定の優先順位など、設定する項目によっていろいろ条件がある。そんなことをすべて覚えているわけではない。
そんなときは生成AIを使用して確認すると、それなりに解決してくれる。
その手順を記述します。
準備
- Chrome DevToolsを使用します。
- DevToolsの設定で言語を英語にします。(2025/05/27 現時点で日本語は対応していないが、日本語では答えてくれる)
- 問題のあるページを表示して、Elementsで対象のタグを選択する。
生成AIでの確認方法
- ページを表示して、右クリックで「検証」を選択などし、「Elements」で調査していタグを選択します。
- メニューを表示して「Ask AI」を選択します。
- 日本語設定の場合は、エラーが表示されます。
- 生成AIのテキストボックスでCSSなどについて質問します。
- 今回は、コンポーネントライブラリを使用したときに、丸角になってしまっており、それを尖ったものに直したく、角なしに設定したが、全然効かなかったとき、生成AIに確認しました。
- 生成AIの答え通り、親コンポーネントにも設定したところ、無事な治りました。
- 日本語で答えてとプロンプトを与えてください。日本語で答えてくれます。
最後に
- 使った感じ、最近のAIはよくできているので、大体は答えてくれる。
- Chrome DevToolsを使っているが、Geminiなどの設定が必要なのかは不明です。
- 無料で使えている。
- いつも使っているツールで使えるのでありがたいです。
- 結構、前から使えたが、今回記事にした。