【初心者でも簡単!】HTMLで文字のカラーを変更する方法



【初心者でも簡単!】HTMLで文字のカラーを変更する方法

ブログやサイトで黒以外の文字を使いたいとき、簡単なHTMLのタグを使って色を変更することができます!今回は、色を変更するタグと、色の探し方について入門者にもわかりやすく解説します。

目次
  1. HTMLのカラーとは
  2. HTMLのカラーを変更する方法
  3. HTMLタグで文字色を指定する方法
  4. HTMLのカラーを調べるのに便利なサイト5選
  5. Google検索
  6. HTMLカラーコード
  7. Web色見本
  8. TAG index カラーグラデーション
  9. サルワカ 配色パターン見本40選
  10. まとめ

HTMLのカラーとは

HTMLでの色は、RGB値で設定するカラーコード、redなどの色名で設定するカラーネームのどちらかで設定します。

image

RGBとは、R(Red:赤)、G(Green:緑)、B(Blue:青)を混ぜることで、ディスプレイ上で様々な色を表現するための手法です。赤、緑、青をそれぞれどの分量混ぜるかを、RRGGBBと並べて16進数の数値で表現します。例えば、黒なら #000000 、赤は#ff0000 、緑は #008000 という記述になります。

カラーネームとは、RGBで表現する色のうち、Webでよく使われる140色につけられた色の名前です。黒なら black 、赤は red 、緑は green という記述で指定ができます。

HTMLのカラーを変更する方法

HTML上でカラーを変更する時には、HTML上のタグに色の指定を行う方法と、CSS(スタイルシート)上で指定する方法があります。

HTMLタグで文字色を指定する方法

今回は、簡単に文字をHTML上で変更するために、タグで文字色を指定してみましょう。HTML上で、文字のカラーを指定するにはこのように記述します。

<font color="色指定"> 〜 <font>

早速使ってみましょう!

<font color="#ff4500">■■■■■■■</font>
<font color="orangered">オレンジレッド</font><br>
<font color="#00bfff">■■■■■■■</font>
<font color="deepskyblue">ディープスカイブルー</font><br>
<font color="#f5f5f5">■■■■■■■</font>
<font color="whitesmoke">ホワイトスモーク</font><br>
■■■■■■■ オレンジレッド
■■■■■■■ ディープスカイブルー
■■■■■■■ ホワイトスモーク

いずれも、RGB値とカラーネームでうまく指定ができました!

HTMLのカラーを調べるのに便利なサイト5選

RGB値とカラーネームを調べるのに便利なサイトを5つ紹介します!

Google検索

ちょっと確認したいならここで十分。Googleに便利なカラーコード検索機能がありました!

image

画像出典:Google

URL:https://www.google.co.jp/

検索窓にカラーコードを入力すると、カラーピッカーが表示されます! カラーピッカー上で丸を好きな色にドラッグすると、その色のカラーコードが取得できます。ちょこっと色を調べたい時に、手軽に利用できますね。

HTMLカラーコード

シンプルにカラーコードを探したい方に!

image

画像出典:HTML Color Codes

URL:http://html-color-codes.info/japanese/

選択した色のコードがボックスに表示されるシンプルなサイトです。探したいカラーコードが決まっている人におすすめです。

Web色見本

みやすい一覧でらくらく色探し!

image

画像出典:Web色見本

URL:https://www.colordic.org/

カラーネームとカラーコードがみやすい一覧になっていて、とても探しやすいページです。原色、和色、パステルカラーなどテーマ別にまとまっているのもとても便利ですね。

TAG index カラーグラデーション

グラデーションで色を選びたい時に!

image

画像出典:TAG index

URL:https://www.tagindex.com/color/color_gradation.html

グラデーションで色を使いたい時に便利なのがこちらのグラデーションチャート。スタイルシートで薄い色から濃い色に変化させる時などに便利です!

サルワカ 配色パターン見本40選

簡単におしゃれな色使いがマネできます。

image

画像出典:サルワカ

URL:https://saruwakakun.com/design/gallery/palette

Web作成の初心者に役立つ情報がいっぱいのサイト、サルワカ。こちらのページでは、クリックで配色パターンを選ぶと右に表示されているサイトイメージも更新されるので、実際に使用した雰囲気を確認しながら配色パターンを考えることができます。「親近感を感じさせる配色」「クール系の配色パターン」など、ジャンルに分けて紹介してくれているので、近づきたいイメージに合わせて選ぶことができますね。文字以外でも、サイト全体の配色に自信がない方に利用をオススメします。

まとめ

今回はフォントのカラーを変更してみましたが、背景や画面の指定部分など、色々な所にこの色指定を応用することができますよ。他の記事も参考に、色々と試してみてくださいね。

CodeCampus 参考記事:
【初心者向け】HTMLで文字色や背景色を指定する方法を詳しく解説

関連記事

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp