【HTML入門】文字の色を変えるfontタグの使い方と色の指定方法

2024年3月29日

シホ

こんにちは！侍エンジニアブログ編集部のシホです！

HTMLで色を変えるにはどうすればいいの？

と手が止まってしまっていませんか？

そんなアナタの悩みを解決するために、今回はHTMLで文字の色の変えるときに使う、「タグ」について説明していきたいと思います。また、HTMLだけでなくCSSでの文字の色の変え方も解説していくのでぜひ参考にしてみてください！

HTMLで文字の色を変える

font colorの使い方

HTMLでは、文字の色・サイズ・種類を変える時にタグを使います。色を変える場合は、タグにcolor属性で色を指定して使用します。

~

色の指定方法

色の指定方法ですが、英語表記とカラーコードで指定する2つの方法があります。英語表記は「red」や「blue」などそのまま指定できます。カラーコードは、Webページ上で表現される色を指定するためのコードのことです。

#に続く6桁の16進数で表記され、2桁ごとに赤・青・緑の濃淡が表されます。

16進数（0～F）の0が最も薄く、Fに近づくほど濃い色となり、例をあげると白は「#FFFFFF」、黒は「#000000」、オリーブ色は「#808000」となります。

これは正直覚えておかなくてもOKです！

使いたいときにカラーコード表で使いたいコードをコピペしましょう！

See the Pen rvpzNM by Shiho Sakai (@shiho-sakai) on CodePen.0

注意点

HTMLでこのようにタグを使って文字の色を変えることができますが、HTMLは基本的に構造や内容を表す目的で使うため、文字の装飾などはCSSで記述することが推奨されています。

したがって、色など、文字の装飾を行う場合はCSSを使うことをおすすめします。

CSSで文字の色を変える

colorプロパティの使い方

CSSで文字の色を変えたいときは、「color」プロパティに「色（英語表記orカラーコード）」を指定します。

（上の「font colorの使い方」で色の英語表記とカラーコードについて説明しているので、わからない人は見てみてください。）

See the Pen RyxZoq by Shiho Sakai (@shiho-sakai) on CodePen.0

ウェブサイト制作スキルで自由に働くには

ウェブサイト制作を個人で請け負い、場所や時間に縛られずに自由に働けるようになるには、HTMLだけでなくCSSやJavaScript、WordPressやPHPのスキルも学ぶ必要があります。身につけるべき言語はプロプラミング学習診断アプリでも解説していますので、見てみてください。

クラウドワークスでもお客様の要望に応えるために幅広く技術を習得することをすすめていたり、HTMLコーディングのみよりウェブサイト制作全般の方が仕事数も多く、単価も高くなると言及しています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks

じゃあ、そんな多くの技術をどうやって学べばいいの？
仕事獲得までの道のりが遠く感じる…

そんなあなたはプログラミングスクールでの学習がおすすめです。経験者から教わることのできるため、着実にスキルアップが見込めます。

侍エンジニアでは、あなたの理想の生活を叶えるキャリアから逆算してあなた専用のカリキュラムをマンツーマン学習ですすめていくため、今学習していることが確実に未来に繋がっている実感を持ちながら、学習を続けていくことができます。

無料カウンセリングでは、効率的な学習方法やキャリアプランのご提案などをさせていただきますので、理想はあるけどどうやったらいいかわからないという方は是非お気軽にお申し込みください。オンラインでも受講可能です。

無料カウンセリングを申し込む