色のコード(カラーコード)お役立ち情報
今回の記事は、
色のコード(カラーコード)についてです。
webデザインでは、文字の色や背景色などカラーコードで指定します。
webデザインについて全く知識がない方は、
【初心者向け】CSSでのcolor(色)を指定する指定方法 | うるチカラ
こちらのサイトを、参考にしてみて下さい。
雰囲気を知る程度で結構です。
カラーコードを打つ作業が面倒だと感じると思います。
ちなみに私はカラーコードを全然、覚えていません。
実際のところ、
白色は#fff、黒色は#000ぐらいしか覚えていません。
私がカラーコードを打つ場合、
どういう風にしているかというと、
ほとんどがChromeブラウザの検証ツールを利用して色を変更して、
何色にしようかと試行錯誤しています。
【Google Chrome】デベロッパーツールで色の値を調べる方法 - Webis Tech LABO.
こちらのサイトに、その方法が書かれています。
ただwebデザイン初心者には少し、面倒な作業かもしれません。
私のブログで紹介した
こちらの本に、カラーコード一覧が載っています。
それを観て、カラーコードを打つ作業をしてもいいと思います。
ただ、この本に載っている色を観て、
その色に対応したカラーコードを打ってブラウザで確認して、
イメージした色と違うということがあると思います。
それと本を開いて、色を調べて、カラーコードを打つ作業は面倒なものだと思います。
そこで、カラーコードを調べて入力する作業の負担を軽くする方法を紹介します。
カラーコード一覧が載っているサイトがあります。
HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
こちらのサイトです。
このサイトのカラーコード一覧から
使いたいカラーコードをコピペ(コピー&ペースト)すれば、
カラーコードを調べて打つ作業の負担が軽くなると思います。
よろしければ試してみて下さい。
それとプラスαの情報ですが、
cssでrgbaプロパティというものがあり、
このプロパティで、色の透明度の指定もできます。
CSSで色・透明度を指定するrgbaプロパティの概要・使い方を徹底解説! | 侍エンジニアブログ
こちらのサイトで解説されています。
いろいろと色のコード(カラーコード)について、書きました。
最終的にはChromeブラウザの検証ツールを利用して確認する方法が便利だと気づくと思いますが、
慣れるまでは、紹介した方法を、いろいろと試してみて下さい。
では!