/*Font Awesome*/ /*Prism.js*/

[Web製作] [16進数] Webサイト上で気になるカラーコードを検索する方法

2020年4月28日

このサイトの色かわいいな

同じ色を使いたいな

そんな疑問に答えます。

カラーコードは、Chromeの拡張機能「ディベロッパーツール」で調べることができます。

はじめに

ディベロッパーツールとは、ChromeによるWeb検証機能です。

ここではカラーコードの調べ方だけを紹介しますが、より詳しく知りたい方は

ディベロッパーツールの使い方 をご覧ください。

①:起動

以下のショートカットを使ってディベロッパーツールを起動します。

  • Mac : ⌘command + ⌥option + I
  • Windows : ^Ctrl + ⇧Shift + I または F12
  • すると表示されるのがディベロッパーツールです。

    ②:選択モードに切り替え

    次に、画面上からの選択モードに切り替えます。

    切り替えはディべロッパーツール左上の四角いボタン(画像参照)、もしくは以下のショートカットで出来ます。

    もしくは

    ⌘command + ⇧shift + C

    ③:調べたい部分にカーソルを合わせる

    カラーコードを見たい部分にカーソルを合わせると、ボックスが表示されます。

    今回はこのサイトの、トップページのタイトルの色を調べてみました。

    「Color」の隣に表示されている、#から始まるアルファベットと数字がカラーコードです。

    ピンクの線で囲まれた部分です💡

    サイトロゴのカラーコードは「#EF97E8」だと分かりました💡

    めでたし😄

    最後に

    カラーコードは、ディベロッパーツールを使って調べることが出来ます。

    ディベロッパーツールを起動
    選択モードに切り替える
    調べたい部分にカーソルを当てる

    それでは良いディベロッパー/ブロガーライフを😄