記事の詳細
【WEBサイトの色(カラーコード)が知りたい!】えっ!?拡張アプリは使わないの?
こんにちわ!前回、ストーリー仕立てでブログを書いていたのですが、
(WordPressをローカル環境からネットワーク環境へ移植するの詳細はこちら)
次回が最終回なのですが、ちょっとその前に…
Web上のサイトの色って知りたくないですか?
#000000(黒)、#ffffff(白)、などの#から始まるカラーで、「カラーコード」と呼ばれています。
これが0だのfだのが何を意味しているのかというと、難しい話になるのですが、それは知らなくても特に問題ないので大丈夫です!
まずはWEB上で表現できる色はカラーコードで表現することができるということを覚えておいてください。
「HPのバナー作って」と依頼があった際にすることは、まずバナーを掲載するサイトの色を参考にしたり、
「このサイトの色いいなぁ、何色なんだろ?」とどんな色を使っているのか知りたいな…
などなど。
何色を使っているのか知りたい!
って場面って結構遭遇するものなんです( ゚Д゚)!!
「Google 拡張機能 色」とかで検索すると、WEB上で使っている色を表示してくれるGoogleアプリがたっくさんでてきます。
「これ便利そう!!!」と何個かインストールするも、…うまく起動してくれない。
なんでやねん!
と言いたくなるようなシーンが結構ありました。(笑)
使い方が悪かったのか、はたまたすでに使っているアプリと相性が悪かったのか( ;∀;)
今回のブログの見出しはコチラです!
F12を押すだけ!拡張アプリよりも簡単にWEB上の色がわかる
そこでたどり着いた先は、
「Google デベロッパーツール」
はい、Googleさんにはいつも大変お世話になっております…(*´▽`*)
WEB開発をするにあたって超便利な機能なんです!
とくに拡張アプリをダウンロードしたりする必要はありません!
唯一のデメリットといえば、英語オンリィな部分でしょうか。(笑)
学生時代の英語が5段階評価のうち2だった日本語しかわからない私でさえも使えているので、大丈夫です(/・ω・)/
Googleデベロッパーツールは日本語化はされておらず、メニューやメッセージなどが英語になってしまっていますが、豊富な機能がズラリ。キラリ(*´ω`)
そんなGoogleデベロッパーツールの使い方ですが、
Chromeのブラウザを開いている状態で、F12キーを押します。
(WindowsとMacの場合はCommand+Option+Iキー)を押すとデベロッパーツールが表示されます。
①スマホ表示やいろんなサイズのデバイスを確認でき、デバイスモードアイコンと呼ばれてます。
②機能を切り替えることができ、「パネル」と呼ばれてます。
③デベロッパーツールを別ウィンドウ、下、右に切り替えることができます。
他にも、デベロッパーツールって機能が盛りだくさん!ですが、
ここでは長くなるので割愛します!他にどんな機能があるのか、「Chrome デベロッパーツール 使い方」などで検索するとでてきますよ(^^)/
WEB上の色を知りたい!実際に見てみよう
実際にどんな色を使っているのか見てみましょう。
焼肉八起のホームページはこちらからどうぞ!もうすぐリニューアル!
この色は何色なんだろう?ということで…
…ポチっ!!!!
デベロッパーツールを開きます。(F12キーを押すだけです)
※調べたい部分にマウスをあててから右クリック⇒検証からも見れます。
これです、これ!
カラーコードが見つかりましたね?
この部分のカラーコードは、#ff6ということがわかりました(*´▽`*)
WEB上の色を調べるのに、拡張アプリなんて必要なかったんだ~!♪と喜びました(/・ω・)/
本日も最後までお付き合いいただきありがとうございます(*´▽`*)
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。