1. HOME
  2. ブログ
  3. あなたの使いたい色はなんですか?HTMLのカラーコードを使おう!

あなたの使いたい色はなんですか?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」を入力してください。


 

皆さんもぜひカラーコードを使って
自分の好きな色を表現してみてくださいね!

それではまた!(*^▽^*)ノシ

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2019年5月
« 4月   6月 »
 12345
6789101112
13141516171819
20212223242526
2728293031