DevTools のヒント: 色の作成

Sofia Emelianova
Sofia Emelianova
GitHub

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

以下の DevTools のヒント動画では、カラー オーサリングの基本機能のほとんどを説明しています。ただし、動画の公開後、いくつかの機能が実装され、1 つの機能が非推奨になりました。

色をすばやく作成する方法については、動画と更新されたドキュメントをご覧ください。

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

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

  • スポイトツールを使用して、画面上の任意の色を選択します。

  • 動画に示すように、

    • 角度目盛りを使用して、グラデーションの値を変更します。
    • カスタム CSS 変数をカラーパレットとして使用します。

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

  • 動画で説明されているように、[CSS の概要] パネルでページのすべての色の概要を確認します。

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