公開日: 2024 年 10 月 21 日
先週、DevTools にまったく新しいパネルを導入しました。AI アシスタントを使用すると、Gemini のスタイル設定の問題を DevTools で直接デバッグできます。
どんなことができるのか、興味がある方はレイアウトの把握から飛行機の修正まで、この新機能によりページのスタイル設定が簡単にできる 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 で実践しましょう。
ご利用の状況について、公開バグトラッカーでお知らせください。