こんにちは、Awaisoraの管理人です。
CSSやHTMLを勉強していると、特に初心者の方はわからない用語や構文に遭遇すると思います。
例えばカラーネームという用語も、初心者がよくわからない例の１つですよね。
そこで今回は、CSSやHTMLにおけるカラーネームとは何かや、使い方について初心者向けに解説していこうと思います。
参考にしている記事は、W3CのCSSについての記事です。W3CはHTMLやCSSを開発しているので信憑性100%のサイトです。こちらを参考にしたい方は、上のテキストリンクからW3Cサイトに移動できるのでお使いください。
Contents
カラーネーム（Color name）とはウェブカラーの指定方法
カラーネーム（Color name）は、日本語に直すと色の名前という意味です。「色の言葉？」と疑問に思うかも知れないですが、実はこの言葉あながち間違っていません。
私たちの世界では、赤や黄色、緑というように色に名前を付けることで、色の情報のコミュニケーションをとることができます。それと一緒でネットの世界でも色に名前が付けられおり、パソコン等と色情報のコミュニケーションを取るために必要不可欠なものです。
このネットで使われる色の名前の総称を「ウェブカラー」と言います。ウェブカラーには約1600万種類の色が用意されており、めちゃくちゃ多いです。
でも、「この色を取ってきて」とハードウェアなどとコミュニケーションを取らなければ、せっかく色が用意されていても何の役にも立ちません。
そこで、ウェブカラーには色たちをいくつか引き出す方法が用意されています。その方法の１つこそが、カラーネーム（Color name）なのです。
例えば、カラーネームには「red」「skyblue」「azure」などがあります。このカラーネームを指定場所で記述すると、「red」であれば「赤」、「skyblue」であれば「薄い青色」がスクリーンに反映されます。この他にもウェブカラーには、147種類のカラーネームが用意されていますよ。
以上が、カラーネームの説明です。
つまり、カラーネームとは、ウェブカラーを指定する１つの方法という意味ですね。
また、前述した通りカラーネームはウェブカラーの指定方法の１つなので、この他にもウェブカラーの指定方法があります。
今回はせっかくなので、指定方法の「カラーコード」と「RGB値」についても解説します。「興味の無いよ」というかたは、下のカラーネームの使い方まで飛ばしてくださいね。
カラーコードとは
カラーコードとは、シャープ（#）から始まり、後に６つの数字やアルファベットを続けて記述し色を指定する16進数の方法です。アルファベットは、大文字と小文字どちらを使っても機能しますが、必ず大文字か小文字どちらに統一するようにしましょう。
カラーコードの場合、カラーネームよりも細かく色を指定することができます。
例えば、「#FFFFFF」や「#000000」、「#F0F8FF」のことです。※カッコ（「」）はカラーコードに含まれません。
この他にカラーネーム、カラーコードの他に「RGB値」で色を指定する方法があります。
RGB値とは
RGB値とは、光の三原色の赤，緑，青の各色をそれぞれ0～255の値で指定して色を呼び出す10進数の方法です。
例えば、『「255」「255」「255」』や『「0」「0」「0」』『「148」「0」「211」』といった数字の羅列のことですね。
以上カラーコードやRGB値をご紹介してきました。カラーネームは数字やアルファベットの羅列と違い、言葉なので覚えやすく、頭に入れておけば簡単に色を指定できるというメリットがあります。
ですがカラーネームは、六角RGBや少数と違い色を細かく指定できないので、色に力を入れているウェブサイトやサービスなどは、六角RGBや少数を使ったほうがより自由にデザインできるでしょう。
いずれにせよ、カラーネームはカラーネーム、六角RGBは六角RGBと統一する制限はウェブカラーにはないので、色の指定方法はあまり気にせずに大丈夫ですよ！
カラーネームの使い方【超簡単！！】
HTMLとCSSの知識があるかたは、おそらく使い方の見当がついていると思いますので、HTMLとCSSの知識があまり無い方向けに、カラーネームの使い方を解説していこうと思います。
まずHTMLとCSSの違いですが、HTMLとCSSには用途における大きな違いがあります。
まずHTMLの用途ですが、HTMLの専門はテキストを表示させることです。例えば、今あなたが見ているテキストはすべてHTMLで記述されています。
ではここで、CSSは何なのかという疑問がわきますね。
ズバリCSSの主な用途は、HTMLで記述したテキストをデザインすることです。具体例を出せば、この蛍光マーカーはCSSで記述しています。
ではなぜ、このような違いがあるのでしょうか？HTMLとCSSをまとめた言語にすれば楽ですよね。実は、違う言語でコードを記述することで作業上のメリットがあるのです。
それは、「デザインのテンプレートを作って作業を効率化」できるようなるからです。例えば、後述しますが、HTMLでデザインをするとタグ毎に「style属性」を書かなければいけません。これが１つや２つのデザイン要素ならまだ大丈夫ですが、要素が増えれば増えるほど作業が大変になっていきます。
しかし、CSSという外部のファイルを使用すれば、クラスを入力するだけで、デザインの使いまわしを簡単にすることができます。
以上がHTMLとCSSの違いになります。
しかし、場合によっては、HTMLでカラーネームを指定したいこともあるでしょう。そこで、まずHTMLでカラーネームを使う方法をご紹介していきます。
HTMLでカラーネームを使う方法
HTMLでデザインを記述する場合は、前述した通り「style属性」を使います。※以下、手順を記載していきます。
デザインする前のサンプル表示↓↓↓
サンプル
<p style="">サンプル</p>
このダブルクォーテーション（””）の間にデザインを記述します。
例えば下のような感じです。
<p style="color:red;">サンプル</p>
HTMLファイルにこのような記載をすれば、ブラウザで表示した際、テキストに下のようなデザインが施されます。
ブラウザ表示↓↓↓
サンプル
styleでカラーネームを指定するまえまでは、テキストの文字がデフォルトの黒色でしたが、指定後はテキストが赤くなっているのがわかります。
以上がHTMLでカラーネーム使う方法です。
CSSでカラーネームを使う方法
次にCSSでのカラーネームの使い方をご紹介します。HTMLの時と使い方はそこまで変わらないので、そんなに難しくないですよ。※以下、手順を記載していきます。
HTMLファイル
<p>サンプル</p>
仮に上のようなHTMLにカラーネームでデザインすることとします。
その場合、別で拡張子が「.stylesheet」のCSSファイルを作りましょう。
CSSファイル
p{color:red;
}
そしたら、上の記述のようにデザインを変えたいタグを先頭に「｛｝」この記号を使い、その中にデザインを書いていきます。
そうしてHTMLファイルとCSSファイルを関連付けてあげると、ブラウザの表示でHTMLの時と同じ表示がされます。
ブラウザ表示↓↓↓
サンプル
このように、HTMLとCSSで記述をするとカラーネームを使うことができます。
すぐにカラーネームを使おう
今回は、CSS＆HTMLにおける、カラーネームとは何かと使い方を解説していきました。
まとめると、カラーネームはウェブカラーの指定方法で、その使い方に関しては、HTML＆CSSの知識が少しでもある方なら余裕で使えます。
余談ですが、インプットした情報はアウトプットすると、記憶の定着がいいと言われています。なので、実際にカラーネームを使用してみるといいですよ。
ちなみにカラーネームの種類は「カラーネーム一覧」でご紹介しています。勉強している方は、こちらも一緒にチェックしてみてくださいね！
最後までご覧いただきありがとうございました！
コメント