公開日: 2024 年 10 月 21 日
先週、DevTools にまったく新しいパネルが導入されました。AI アシスタントを使用すると、DevTools で Gemini を使用してスタイルの問題を直接デバッグできます。
どんなことができるのか、ぜひご覧ください。レイアウトの把握から飛行機の修正まで、この新機能によりページのスタイル設定が簡単にできる 5 つの方法をご確認ください。
1. レイアウトについて理解する
ウェブサイトを構築する際に、必ずしもゼロから始めるわけではありません。多くの場合、事前に知識がない既存のコードの上に構築する必要があります。最悪の場合、周囲の誰も知識を持っていないこともあります。
要素のレイアウトについて AI に質問し、最後のノードまでそのように表示されている理由と、要素のこの overflow: hidden; が実際に存在する理由を理解します。👀
試すプロンプト
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. ペアプログラミング
CSS は現在非常に強力になっています。可能性がたくさんあるので、必要なのは align-items なのか、または justify-items ですか？justify-self または align-content ですか？
何をすべきかわかっていても、適切な CSS プロパティのセットを取得できないことがあります。次回このような状況になったら、AI に問題を説明し、AI に解決してもらいましょう。
AI アシスタントは、既存のコードを調査し、達成しようとしている内容と比較して、コードベースにレビュー、適用、コピーするために必要な修正を提案します。
3. ユーザー補助アドバイザー
ウェブサイトをユーザー補助技術でアクセスしやすく、使いやすくすることは重要です。アクセシビリティは後からではなく、開発の最初から検討し、開発プロセス全体で ウェブ コンテンツ ユーザー補助ガイドライン（WCAG）に準拠することを目標としてください。
AI アシスタントを使用して、<div> をよりセマンティックな HTML 要素に置き換えることができる場所、追加の aria-* 属性が役立つ方法、色のコントラストを改善する方法に関するヒントを入手します。
試すプロンプト
What about color contrast in this element?
4. 自分好みにカスタマイズ
トレンドは移り変わります。グラデーション、シャドウ、シャープなボーダー、フラットデザイン、そして暗い背景に明るいネオンカラーを配した今日のデザイン時代へと移り変わってきました。
しかし、ウェブ上のデザインが統一されすぎて、疲れてしまうことはありませんか？気分が乗らない日には、AI アシスタントに頼んで、ウェブをテーマパークの乗り物のように楽しく変えてもらうのもおすすめです。
試すプロンプト
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. 航空整備士になる
スタイルに関する問題の説明、問題の修正、アクセシビリティに関するアドバイス、既存のスタイルの変更など、AI アシスタントはすでに多くのサポートを提供しています。AI アシスタントが飛行機の修理にも役立つと信じられますか？経験は不要です。オーバーオールを着て、Chrome DevTools Hangar で実践しましょう。
ご利用の状況について、公開バグトラッカーでお知らせください。