このサイトの色使いオシャレだな。パクれねぇかな・・・
やる木なし男くん
トリ田課長
おやおやなし男くん。サイトのカラーコードは簡単に調べられる方法があるんだよ。
課長たまには役に立つっすね
やる木なし男くん
トリ田課長
・・・
カラーコードの調べ方
ブラウザの検証を使う ※CSSで指定された色のみ
今回はこのサイトの見出しタグ(h2)の背景色のコードをGoogleChromeで調べてみよう。FireFoxでも同じような方法で調べられるぞ。
- STEP.1検証をクリックGoogleChromeでサイトを開き、右クリックを押す。検証をクリック。
- STEP.2選択ツールをクリックソースがずらっと並ぶ画面が出てきただろう。画面上の矢印キーをクリック。するとカーソルが選択モードになっているので、そのまま見出しタグ(h2)をクリック。
- STEP.3カラーコードをGET画面下の#から始まるアルファベット6桁のコードがカラーコードだよ。
少し手間はかかるが、ブラウザの標準機能で調べられるから簡単だね。
ただ、CSSで指定された色しか調べられないため、調べられない色もある。調べられなかった場合は、以下のツールが便利だ。
Chromeの拡張ツール ColorZilla
サイトに表示されているどんな色も調べられるのがColorZillaというツールだ。クリックした場所のカラーコードを瞬時に表示してくれる。
- STEP.1ChromeにColorZillaを追加する
- STEP.2ColorZillaを起動する検索バーの右上に追加されたColorZillaのアイコンをクリック。「Pick Color From Page」をクリック。
- STEP.3カラーコードをGETサイトの好きな場所でクリック。今回はヘッダーの色をクリックしたよ。画面上の黒いバーに出た、#から始まるアルファベット6桁のコードがカラーコードだよ。クリックした時点で自動的にカラーコードがコピーされているから、後は貼り付けるだけなんだ。
どうだい?簡単だろう?
ぜひ使ってみてくれたまえ。

コメントを残す