【CSS】GEMINI で CSS をデバッグする方法

## はじめに
みなさんは開発する時、AIを活用できていますか？

ChatGPTやGitHub Copilotなど開発する上で、AI使うことが増えてきたと思います。

今回は、**Chrome 131** から Chrome DevToolsでGEMINIを使って、CSSをデバックできるようになるそうです。

そのため、この記事では、Chrome DevToolsでGEMINIを使って、CSSをデバックする方法を紹介します！

https://developer.chrome.com/blog/new-in-devtools-131

## GEMINI で CSS をデバッグする方法
### 事前設定
検証ツールの設定で、AIイノベーションから、`AI Assistance` の トグルスイッチをONにすることで、AIアシストを使えるようになります。
（**ChromeのバージョンがChrome 131以上であることを確認してください！**）

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7652ef29-5f74-697b-e9d2-209fc1ecbae3.png)


### AIアシストパネル を使う
GEMINI で CSS をデバックするには、検証ツールを開きます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/51099061-2128-c8c0-aad9-623878e5288d.png)

その後、デバックしたい要素・修正したい要素で右クリックし、`AIに質問` を選択するか、要素の横にあるアイコンをクリックすることで、AIアシストパネルを開きます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2913e811-8bc7-8a2c-9cfd-36c2dec5a4f1.png)

AIアシストパネルが開いたら、要素に対して質問することで、AIからの回答が得られます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f055c317-3bae-0fcb-3edb-0e188c0b01cc.png)

上記の例では、`How do I center this element top, bottom, left, right?` と質問し、以下のような回答をいただきました。

<details><summary>AIの回答はこちら</summary><div>

Okay, here's how you can center the element both vertically and horizontally within its parent:

**Method 1: Using Flexbox**

- **Apply `display: flex` to the parent**: This will enable flexbox layout for the parent element.
- **Use `align-items: center`**: This will vertically center the element within the parent.
- **Use `justify-content: center`**: This will horizontally center the element within the parent.

```css
div { /* This is the parent element */
  display: flex;
  align-items: center;
  justify-content: center;
}
```

**Method 2: Using Absolute Positioning and Transforms**

- **Apply `position: relative` to the parent**: This will establish the parent as the containing block for absolute positioning.
- **Apply `position: absolute` to the element**: This will take the element out of the normal document flow and allow us to position it freely.
- **Set `top: 50%` and `left: 50%`**: This will position the element's top-left corner at the center of the parent.
- **Use `transform: translate(-50%, -50%)`**: This will shift the element up and left by half its width and height, effectively centering it.

```css
div { /* This is the parent element */
  position: relative;
}

div > div { /* This is the element you want to center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

**Choosing the Best Method**

Flexbox is generally the preferred method for centering elements, as it's more flexible and easier to maintain. However, if you need more precise control over the element's position or if you're working with older browsers that don't fully support flexbox, absolute positioning with transforms can be a good alternative.

I can apply the Flexbox method for you. Would you like me to proceed?

</div>
</details>

## AIアシストパネルの使い方
この便利そうなAIアシストパネルはどのように使うのがいいのでしょうか？

今のうちに考えられそうなのは、以下の3つかなと思います。

1. バグ（予期せぬ挙動）のを原因の分析をしてもらい、解決策を提案してもらう
    - HTMLやCSSで思ったようなレイアウトにならなかった時、AIアシストパネルに原因の分析をしてもらったり、解決策の提案してもらうことには使えそうです
1. ペアプログラミング
    - HTMLやCSSは複数のやり方で実装することができ、どれが最適化相談する相手にもなってくれそうです
1. ユーザー補助アドバイザー
    - アクセシビリティといった、専門知識が必要な分野に対しても、どうすればいいか相談に乗ってくれそうです


## まとめ
この記事では、Chrome DevToolsでGEMINIを使って、CSSをデバックする方法を紹介しました。

AIアシストパネルは、Chrome131から使えることができるので、リリースされるのを楽しみに待ちましょう！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510