記事の詳細

こんにちわ!前回、ストーリー仕立てでブログを書いていたのですが、
WordPressをローカル環境からネットワーク環境へ移植するの詳細はこちら
次回が最終回なのですが、ちょっとその前に…

Web上のサイトの色って知りたくないですか?

#000000(黒)、#ffffff(白)、などの#から始まるカラーで、「カラーコード」と呼ばれています。

これが0だのfだのが何を意味しているのかというと、難しい話になるのですが、それは知らなくても特に問題ないので大丈夫です!

まずはWEB上で表現できる色はカラーコードで表現することができるということを覚えておいてください。
WEB上の色
「HPのバナー作って」と依頼があった際にすることは、まずバナーを掲載するサイトの色を参考にしたり、
「このサイトの色いいなぁ、何色なんだろ?」とどんな色を使っているのか知りたいな…
などなど。

何色を使っているのか知りたい!

って場面って結構遭遇するものなんです( ゚Д゚)!!

「Google 拡張機能 色」とかで検索すると、WEB上で使っている色を表示してくれるGoogleアプリがたっくさんでてきます。

 

「これ便利そう!!!」と何個かインストールするも、…うまく起動してくれない。

なんでやねん!

と言いたくなるようなシーンが結構ありました。(笑)

使い方が悪かったのか、はたまたすでに使っているアプリと相性が悪かったのか( ;∀;)

 

F12を押すだけ!拡張アプリよりも簡単にWEB上の色がわかる

そこでたどり着いた先は、

「Google デベロッパーツール」

はい、Googleさんにはいつも大変お世話になっております…(*´▽`*)
WEB開発をするにあたって超便利な機能なんです!

 

とくに拡張アプリをダウンロードしたりする必要はありません!

 

唯一のデメリットといえば、英語オンリィな部分でしょうか。(笑)
学生時代の英語が5段階評価のうち2だった日本語しかわからない私でさえも使えているので、大丈夫です(/・ω・)/

Googleデベロッパーツールは日本語化はされておらず、メニューやメッセージなどが英語になってしまっていますが、豊富な機能がズラリ。キラリ(*´ω`)

 

そんなGoogleデベロッパーツールの使い方ですが、

Chromeのブラウザを開いている状態で、F12キーを押します。
(WindowsとMacの場合はCommand+Option+Iキー)を押すとデベロッパーツールが表示されます。

WEB上の色を知りたい

①スマホ表示やいろんなサイズのデバイスを確認でき、デバイスモードアイコンと呼ばれてます。
②機能を切り替えることができ、「パネル」と呼ばれてます。
③デベロッパーツールを別ウィンドウ、下、右に切り替えることができます。

他にも、デベロッパーツールって機能が盛りだくさん!ですが、
ここでは長くなるので割愛します!他にどんな機能があるのか、「Chrome デベロッパーツール 使い方」などで検索するとでてきますよ(^^)/

 

 

WEB上の色を知りたい!実際に見てみよう

実際にどんな色を使っているのか見てみましょう。

焼肉八起のホームページはこちらからどうぞ!もうすぐリニューアル!
WEBのカラー
この色は何色なんだろう?ということで…

…ポチっ!!!!

デベロッパーツールを開きます。(F12キーを押すだけです)
※調べたい部分にマウスをあててから右クリック⇒検証からも見れます。
WEB上カラー検証

デペロッパーツール

これです、これ!

カラーコードが見つかりましたね?
この部分のカラーコードは、#ff6ということがわかりました(*´▽`*)

WEB上の色 ハッシュタッグ

WEB上の色を調べるのに、拡張アプリなんて必要なかったんだ~!♪と喜びました(/・ω・)/

本日も最後までお付き合いいただきありがとうございます(*´▽`*)

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練校卒の新米WEBデザイナー。一児のママで毎日育児に奮闘しながらWEBデザインとマーケティング、SEOについて学んでます。日々壁にぶち当たりながらレベルアップ中!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る