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

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

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

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

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

HTMLで文字の色を変える

font colorの使い方

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

<font color=”色”> ~ </font>

色の指定方法

色の指定方法ですが、英語表記とカラーコードで指定する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でこのように<font>タグを使って文字の色を変えることができますが、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


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

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

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

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

無料体験レッスンを申し込む

まとめ

いかがでしたでしょうか。

HTMLで<font>タグを使うと簡単に文字の色を変えることができますが、文字の装飾なのでできるだけCSSを使いましょう。ぜひ実践してみてくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー