あなたの使いたい色はなんですか?HTMLのカラーコードを使おう!

どうもみなさんご存知の方はおはこんばんにちは、
初めての方ははじめまして!
ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する
ことです。
春はどこにいったといわんばかりに
夏のような暑さがすでにきてますね……
クーラーのおかげでなんとか生きております…(笑)
今回は、以前お話していたホームページ(以下HP)を
作る際に使う”HTML”をさらに深めていきたいと
思います!


-目次-
1. 前回の復習ーHTMLのタグ使えますか?ー
2. 使いたい色はなに?カラーコードを知ろう!
1. 前回の復習ーHTMLのタグ使えますか?ー
まずは、前回の記事から日にちが経ってますし
復習から始めましょう!
HP作成の際に、使う言語として
「HTML」がある、といいました。
これ今見てくださっているようなブログなど、
Webページが作ることができます。
しかし、とてもシンプルなものしか
HTMLでは作ることができません。
そこで、装飾などのバリエーションを豊かにするために
「CSS」を使います。
と、ここまでお話しました。
実際に、よく使われるHTMLのタグを
もう一度ここでも記載しておきますので
ぜひご確認くださいね!
見出し:< h1 > … < h6 > ~ < /h1 > … < /h6 >
見出しを表示させます。
h1が一番大きく、数字が大きくなるつれて
文字の大きさが小さくなっていきます。
段落:< p > ~ < /p >
このタグで挟むことで段落を区切ります。
改行:< br >
区切りたい場所にこのタグを置くことで、改行を行います。
表組み:< table > ~ < /table >
・横一列:< tr > ~ < /tr >
・見出し:< th > ~ < /th >
・データ:< td > ~ < /td >
・リンク:< a href=”(URL)”> ~ < /a >
~のテキスト部分にリンクを貼れます。
強調:< strong > ~ < /strong >
このタグで囲んだ文字を太文字に出来ます。
イタリック:< i > ~ < /i >
このタグで囲んだ文字を斜体にします。
カラー:< span style=”color: #(カラーコード)”> ~ < /span >
このタグで囲んだ文字の色を
カラーコードで指定したものに変えます。
よく使うカラーコード:黒(#000000),赤(#ff0000),青(#0000ff),白(#ffffff),…
画像:< img src=”(画像ファイル名)” >
画像を表示させます。
このとき、HTMLファイルと画像ファイルもしくはフォルダが
同じ場所に保存されていないと
画像が表示されませんので注意してください。
2. 使いたい色はなに?カラーコードを知ろう!
では、HTMLのタグについての復習をしたので、
今回の目的「カラー」の付け方を紹介します!
赤文字にして強調したり、
文字の背景部分の色を変えて
マーカーを引いたようにしたり、
ができるようになります。
まずは、文字色や文字の背景色の変更をするための
HTMLタグを確認しましょう!
文字色を変更する:< span style=”color:#(カラーコード);” > ~ < /span >
~の部分に色を変更したい文字もしくは文字列を入れることで、#(カラーコード)で指定したカラーに変更できます。
文字の背景色を変更する:< span style=”background-color:#(カラーコード);” > ~ < /span >
~に該当する文字もしくは文字列の背景の色をマーカーで記したように、#(カラーコード)で指定したカラーに変更します。
このように、色の変更を行います。
実際にやってみたのがコチラになります。↓↓↓
文字色変更と文字背景色の変更のテストです。
どうです?ちゃんと変更できているでしょう?
ではカラーコードとはなんなのか。
それは、HTMLがその色を判別するための
番号になります。
たとえば、先ほどのサンプルの色だと赤色であれば【 #ff0000 】、
オレンジであれば【 #ffa500 】、と打ち込んでいます。
この【 #ff0000 】と【 #ffa500 】がカラーコードと言われるものになります。
じゃぁ緑色は?青色は?って疑問が出てきますよね?
ご安心ください!
よく使うであろう色のカラーコードをお伝えします!
ぜひご活用くださいね!
・ 黄色 :黄色を表現する際には、「#ffff00」を入力してください。
・ 黄みのオレンジ :黄みのオレンジ色を表現する際には、「#ffd700」を入力してください。
・ オレンジ :オレンジ色を表現する際には、「#ffa500」を入力してください。
・ 赤みのオレンジ :赤みのオレンジ色を表現する際には、「#ff4500」を入力してください。
・ 赤 :赤色を表現する際には、「#ff0000」を入力してください。
・ :赤紫 赤紫色を表現する際には、「#c71585」を入力してください。
・ :紫 紫色を表現する際には、「#9400d3」を入力してください。
・ :青紫 青紫色を表現する際には、「#4b0082」を入力してください。
・ :青 青色を表現する際には、「#0000ff」を入力してください。
・ 青緑 :青緑色を表現する際には、「#20b2aa」を入力してください。
・ 緑 :緑色を表現する際には、「#008000」を入力してください。
・ 黄緑 :黄緑色を表現する際には、「#7cfc00」を入力してください。
皆さんもぜひカラーコードを使って
自分の好きな色を表現してみてくださいね!
それではまた!(*^▽^*)ノシ