【初心者】htmlで文字の色付けをする方法を紹介
「自分のサイトで文字の色を自由にカスタマイズしたいけど、やり方がわからない・・・」
こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。
- htmlで文字に色をつけるやり方がわかる
基本的なことなのにやり方が分からず途方に暮れる経験は誰しもあると思います。本記事ではHTMLのみで文字に色をつけるやり方を紹介しますので、複雑なコードは一切出てきません。是非本記事をお読みいただき、文字の色のつけ方を習得してください。
文字に色をつけるメリット
自身のサイト上で文字に色をつけるメリットはいくつかありますが、代表的なポイントを紹介します。
重要な部分を強調することができる
こちらは直感的に分かりやすいと思いますが、すべての文字が黒でひたすらテキストが羅列されているサイトでは、コンテンツが読みづらくユーザが離脱しやすくなってしまいます。
ですので、重要な部分やより注意して読んでほしい部分に色をつけることは非常に大切なポイントになります。
他のサイトと差別化できる
文字の色は、もちろん代表的な赤や青を使うことが一般的です。ただ、本記事で紹介するやり方では細かい色の違いを指定することができますので、見せ方によっては他のサイトと差別化をすることができます。是非文字色を丁寧に使い分けて、ユーザにとって見やすいサイト設計をしていきましょう。
注意点
1つ注意点をお伝えします。本記事で紹介する文字の色の指定方法では、本当に無数に色のパターンを指定できます。その結果、凝りすぎて複数の文字色を至る所に使いすぎるとかえってユーザにとって見にくいサイトになり、離脱に繋がるので注意が必要です。
htmlで文字に色をつけるやり方
それでは、ここから実際にHTMLで文字に色をつけるやり方を紹介します。本記事では2つやり方を解説していきます。
具体例を見た方が早いと思うので、早速コードを見ていきましょう。
パターン1：fontタグを使う
1つ目は、fontタグを使うやり方です。以下のようにコードを書くと、「ここは赤色です」が赤字で表示され、「ここは青色です」が青字で表示されます。
<font color="red">ここは赤色です</font><br>
<font color="blue">ここは青色です</font><br>
非常にシンプルなコードで文字色を変えられることがお分かりいただけたと思います。
1つポイントとして、上記のコードでは色を「red」「blue」のように直接色の名前で指定（カラーネームと言います）していますが、慣れてきたら次に紹介するカラーコードを使いましょう。
<font color="#ff0000">ここは赤色です</font><br>
<font color="#0000ff">ここは青色です</font><br>
上記のような色の値をRGB値と言います。このRGB値を変えることで、非常に様々な色を指定することができます。
※redやblueのようにカラーネームで指定しても、上記のようにRGB値を使ってカラーコードで指定しても結果は同じになります。
パターン2：style属性を使う
2つ目のやり方は、style属性を使うやり方です。使い方はほぼパターン1のfontタグと同じですので、ここではカラーネームでの指定で茶色と緑色の文字にしてみましょう。
<span style="color:brown">ここは茶色です</span><br>
<span style="color:green">ここは緑色です</span><br>
このstyle属性はCSSと記法が同じなので、CSSに慣れるためにもパターン2のstyle属性を使っていくのがいいでしょう。
htmlの色を検索するのに便利なサイト
ここまで、HTMLでの文字の色の指定方法を紹介しました。その中で、#ff0000のようにカラーコードで書くやり方がありましたが、このカラーコードはどこを見ればわかるのでしょうか。
現在は様々な便利サイトがあるので、カラーコードと実際の色の対比表を簡単に見つけることができます。本記事では、筆者もよく利用しているカラーコードと実際の色の対比表を載せている便利サイトを紹介します。
原色大辞典
上記サイトは、筆者が最もよく利用するサイトです。色が「原色」「和色」「洋色」「web」「パステルカラー」「ビビッドカラー」「モノトーン」「メトロカラー」のようにカテゴリごとにタブが分かれているため、自身のサイトのイメージと合うタブをまずは開き、その中から色を選択することができます。
よくあるのは全色のパターンが羅列されているサイトですが、それだと自分のサイトのイメージに丁度良い色をずばり探すことが非常に難しく、時間もかかります。
この原色大辞典のサイトは本当におすすめですので、是非チェックしてみてください。
Google検索
番外編として、Google検索上での色の確認方法を紹介します。「このカラーコードってどんな色だっけ」とふと確認したくなるケースは多いと思います。
そんなとき、カラーコードをGoogle検索に打ち込んで検索すると、該当する色を表示してくれる便利な機能があります。
上記の原色大辞典のように様々な色を一括で確認することはできないですが、「このカラーコードがどんな色かぱっと確認したい」場面では非常に便利ですので、覚えておくといいでしょう。
まとめ
いかがでしたでしょうか。
HTMLで文字に色をつけるやり方を紹介しました。やり方は主に2つあり、fontタグを使うやり方と、style属性を使うやり方です。CSSに慣れるためにもstyle属性を積極的に使っていきましょう。
また、色の指定もredやblueのように直接指定するカラーネームと、値で指定するカラーコードの2パターンがあります。どちらでも結果は同じですが、HTMLの色の検索サイトにはカラーコードで記載されているケースが一般的なため、カラーコードで指定する癖をつけておくといいでしょう。
最後に、HTMLの色とカラーコードの対応を確認できる便利なサイトを紹介しました。本記事の内容で基本的な色指定の方法は網羅できていますので、是非自身のサイト設計に役立ててください。
