WEB制作、初心者お役立ちブログ

WEB制作、初心者(素人)が最短ルートで、それなりのWEBサイトをつくれるブログを目指しています。個人でホームページ制作をしたい方など、よろしければ私のブログを、ご覧ください。

色のコード(カラーコード)お役立ち情報

今回の記事は、

色のコード(カラーコード)についてです。

webデザインでは、文字の色や背景色などカラーコードで指定します。

webデザインについて全く知識がない方は、

【初心者向け】CSSでのcolor(色)を指定する指定方法 | うるチカラ

こちらのサイトを、参考にしてみて下さい。

雰囲気を知る程度で結構です。

カラーコードを打つ作業が面倒だと感じると思います。

ちなみに私はカラーコードを全然、覚えていません。

実際のところ、

白色は#fff、黒色は#000ぐらいしか覚えていません。

私がカラーコードを打つ場合、

どういう風にしているかというと、

ほとんどがChromeブラウザの検証ツールを利用して色を変更して、

何色にしようかと試行錯誤しています。

【Google Chrome】デベロッパーツールで色の値を調べる方法 - Webis Tech LABO.

こちらのサイトに、その方法が書かれています。

ただwebデザイン初心者には少し、面倒な作業かもしれません。

私のブログで紹介した

こちらの本に、カラーコード一覧が載っています。

それを観て、カラーコードを打つ作業をしてもいいと思います。

ただ、この本に載っている色を観て、

その色に対応したカラーコードを打ってブラウザで確認して、

イメージした色と違うということがあると思います。

それと本を開いて、色を調べて、カラーコードを打つ作業は面倒なものだと思います。

そこで、カラーコードを調べて入力する作業の負担を軽くする方法を紹介します。

カラーコード一覧が載っているサイトがあります。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

こちらのサイトです。

このサイトのカラーコード一覧から

使いたいカラーコードをコピペ(コピー&ペースト)すれば、

カラーコードを調べて打つ作業の負担が軽くなると思います。

よろしければ試してみて下さい。

それとプラスαの情報ですが、

cssでrgbaプロパティというものがあり、

このプロパティで、色の透明度の指定もできます。

CSSで色・透明度を指定するrgbaプロパティの概要・使い方を徹底解説! | 侍エンジニアブログ

こちらのサイトで解説されています。

いろいろと色のコード(カラーコード)について、書きました。

最終的にはChromeブラウザの検証ツールを利用して確認する方法が便利だと気づくと思いますが、

慣れるまでは、紹介した方法を、いろいろと試してみて下さい。

では!