DevTools のヒント: 色の作成

Sofia Emelianova
Sofia Emelianova
GitHub

DevTools では、値を入力しなくても、数回クリックするだけで色を作成できます。

以下の DevTools のヒント動画では、カラー オーサリングの基本的な機能を紹介しています。ただし、この動画のリリース以降、いくつかの機能が実装され、1 つの機能はサポート終了となりました。

色をすばやく書き込む方法については、以下の動画と最新のドキュメントをご覧ください。

  • カラー表示形式メニューを開くには、Shift キーを押しながら、カラー値の横にあるカラー プレビュー ボックスをクリックします。

  • 動画に示すように、カラー選択ツールを使用して色を編集およびコピーします。

  • スポイトで、画面上の好きな色を選択できます。

  • この動画では、次のようになっています。

    • 角度時計を使用して勾配値を変更します。
    • カスタム CSS 変数をカラーパレットとして使用します。

  • HD と非 HD の色を変換するには、コマンド メニューのショートカットで形式を変更するのではなく、カラー形式メニューを使用します。

  • この動画に示すように、[CSS Overview] パネルでページのすべての色の概要を確認できます。

詳しくは以下をご覧ください。