誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】
初心者向けにHTMLで文字の色を指定する方法について解説しています。色の指定などは通常CSSで行うことが多いと思いますが、実はHTMLで色をつけることができます。実際にソースコードを書きながら説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、HTMLのみでも可能です。
そこで今回はHTMLで色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
HTMLだけで文字の色を変える
文字の色を変える方法は複数あります。
今回は2通りの方法をご紹介します。
fontタグを使う方法
1つは、fontタグを使用する方法です。
色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。
h1タグを使って、大きな文字で色の変更もできます。
色はred, blue, green, brown など、好きな色を指定しましょう。
HTML
<h1><font color="red">こんにちは！</font></h1>
style指定をする方法
もう1つは、style指定をする方法です。
CSSの記法で、HTMLタグに直接スタイルを適用できます。
色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。
囲うタグが特にない場合は、spanタグで囲いましょう。
HTML
<h2 style="color:blue">こんにちは！</h2>
<span style="color:brown">こんにちは！</span>
<font>タグ利用方式とstyle属性指定方式の違いとメリット
おすすめは、style属性を指定する方式です。
それぞれの方式の違いを詳しくご説明します。
<font>タグを使う方式の特徴
覚えやすくて簡単な方式です。
文字フォント専用に、タグを用意する点が特徴です。
しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。
使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。
style属性を使う方式の特徴
CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。
HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。
また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方なので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。
実際に書いてみよう
それでは実際にHTMLで色を変更してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloTechAcademy</title>
</head>
<body>
<p>Hello TechAcademy !</p>
<h1><font color="red">こんにちは！</font></h1>
<h2 style="color:blue">こんにちは！</h2>
<p style="color:green">こんばんは！</p>
<span style="color:brown">HTMLファイルだけで、</span>
<span style="color:blue">文字色を変更する。</span>
</body>
</html>
文字の大きさをデフォルトにしたい場合は、pタグかspanタグを使います。
通常はpタグを使い、改行しない場合はspanタグを使いましょう。
style属性を使った書き方は、CSSの記法と同じです。
CSSに慣れるためにも、style属性を使う方が良いでしょう。
カラーコードを調べる方法
カラーコードを調べる方法は、以下の4つです。
- Google検索
- HTMLカラーコード
- Web色見本原色大辞典
- TAG index カラーグラデーション
Google検索
Google画像検索で「カラーコード 緑」などで検索すると、上記のような表示結果になります。
表示結果から自分の好きな色のカラーコードを使ってみると良いです。
また、表示結果のサイトに移動して他の色を探してみるのも良いでしょう。
HTMLカラーコード
HTMLカラーコードでは、よく利用するカラーコードを優先的に表示しています。
たくさんカラーコードが表示されるサイトでは選びづらいと感じる人におすすめです。
Web色見本原色大辞典
Web色見本原色大辞典では、一覧性のあるトップページで様々なカラーコードを選択できます。
各色のページに移動すれば、関連する色や配色パターンも閲覧可能です。
TAG index カラーグラデーション
TAG index カラーグラデーションでは、トップページで主要な原色に関連した、3段階の鮮やかさと12段階の明るさのグラデーションでカラーコードを表示しています。
トップページだけで、よく利用するカラーコードを確認したい場合におすすめです。
CSSで文字色を変える方法
ここではCSSプロパティの使い方を解説します。
CSSで色を変える理由
CSSで色を変える理由はいくつかありますが、大まかに言って次の3つがあります。
作業分担する目的
文字の色を変えるだけであれば、HTMLのfontタグを利用すれば変更できます。
HTMLでも文字色を変えることはできるのですが、複数人で実装を行う場合、1つのHTMLを複数人で修正できません。
そのためHTMLとCSSファイルを分けることで、少なくとも2人が作業分担できます。
CSSの機能を活用する目的
CSSは多機能で、色を変えるだけでなく、アニメーションを実装したりゲームを作ることも可能です。
そのため、CSSを利用して色を変えるという判断は、将来的に様々な機能を追加実装することにもつながります。
保守性を高める目的
HTMLとCSSを分けた時点で、CSSファイルも複数ファイル利用します。
CSSファイルを複数利用するのは、色を変えるだけのCSSやアニメーション機能のCSSなど、目的に応じてCSSファイルを用意するためです。
目的に応じて用意したCSSファイルであれば、アニメーションが動作しないときには、アニメーションのCSSファイルを修正すれば不具合が解消する可能性が高くなります。
つまり、保守する時に効率的な修正が可能になります。
HTMLとCSSで色を変えるコードを比較
ここではHTMLとCSSで色を変えるコードを比較してみます。
HTMLの場合
HTMLの場合は、fontタグを利用して色を変更します。
サンプルコード
<font color="#FF0000">テックアカデミーでhtmlをオンラインで学習</font>解説
<font color=”#FF0000″>で囲んだ、テックアカデミーでhtmlをオンラインで学習という文字列は、指定した#FF0000の色になります。
ここで問題が発生するのは、3行の、テックアカデミーでhtmlをオンラインで学習という文字の色を、別の色に変更する場合です。
仮に、青色を意味する#0000FFという色コードに変更する場合は、3ヶ所のfontタグを修正する必要があります。
もし、100ヶ所同じようにfontタグを利用していたら、100ヶ所の修正が必要になります。
CSSの場合
CSSの場合は、CSSファイルで色を指定します。
HTMLサンプルコード
<span class="red">テックアカデミーでcssをオンライン学習</span>HTML解説
HTMLファイルの、class=”red”でCSSのredクラスを用意しています。
CSSサンプルコード
.red {
color: #FF0000;
}CSS解説
CSSサンプルコードでは、HTMLのclass=”red”で用意しているredクラスに対して、.redという指定を利用することで、#FF0000という色をcolorプロパティとして反映できます。
HTMLとCSSで色を変えるコードを比較したときの解説
HTMLの解説で記載したように、仮に、青色を意味する#0000FFという色コードに変更する場合は、3ヶ所のfontタグを修正する必要があります。
もし、CSSで変更する場合は、変更対象のHTML部分が100個に増えても、CSS側のcolor: #FF0000;をcolor: #0000FF;にするだけで修正が完了します。
つまり、CSSで色を変えるメリットとして、作業量が非常に少なくなることも挙げられます。
まとめ
今回の記事は、HTMLで色を変更する方法などを解説しました。
- HTMLのみで文字の色を変える方法
- カラーコードを調べる方法
- CSSで文字色を変える方法
- CSSを利用するメリット
慣れてきたら、CSSを使ってより自由度の高いデザインに挑戦しましょう。
色ってHTMLでも指定できるんですね〜！
そうだね！HTMLでもCSSでも書き方を知っておくと便利だからね！
今担当してるWebサイトのリニューアルにも役立ちそうです〜！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
