【HTML5初心者入門】フォントの色を変える方法を解説！お役立ち情報あり
Webサイトを制作している時に、
「HTMLでフォントの色ってどうやって変えるんだっけ？」
「この文章の一部だけフォントの色を変える方法がわからない」
と思うことはありませんか？
基礎中の基礎だから聞きづらい…と思っている方もいるでしょう。
今回はそんな方のために、
- HTMLでフォントの色を変える方法
- HTMLでフォントの様々なカスタマイズ方法
- フォントの色を変える時のお役立ち情報
という内容を解説していきます。
HTML5から変わったフォントに関する仕様や、フォントの色を決める時に便利なお役立ち情報も紹介しますので、ぜひ最後までみてくださいね。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
初心者でも簡単！HTMLでフォントの色を変える方法【基本編】
まずは、HTMLでフォントの色を変える基本の方法から解説していきます。
- HTMLのstyleタグに直接書き込む
- .CSSファイルを用意してcolorプロパティを指定する
上記2つのうち、どちらかの方法であればHTML内のフォントカラーを変えることができます。
しかし、中には「あれ？fontタグは使わないの？」と思った方もいるでしょう。
以前は、HTMLのfontタグを使ってフォントの色を変えることができましたが、HTML5からは廃止されたため使用できません。
HTML5以前の知識のままアップロードしていない人は、今日このことを覚えてしまいましょう。
1.HTMLのstyleタグに直接書き込む
最も手っ取り早く、簡単にフォントの色を変えたい時におすすめの方法です。
「CSSを外部ファイルとして読み込むのが面倒」
「本当に一部分しかフォントの色を変えない」
などの場合に使いやすいでしょう。
具体的には、以下のように使用します。
<!-- HTML -->
<body>
<p>styleタグを使ってフォントの色を指定します。</p>
<style>
p {
color: red;
}
</style>
</body> 2.CSSファイルを用意してcolorプロパティを指定する
外部のCSSファイルを用意してフォントの色を変える方法を紹介します。
HTML内にstyleタグを直接書き込むと、CSSとHTMLの境目がわかりづらくなってしまうため、一般的にはこの方法を使います。
<!-- HTML -->
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p>外部CSSファイルでをフォントの色を指定します。</p>
</body> /* CSS */
p {
color: #ff0000; /*赤色*/
}Webサイトを作るとなると、フォントの色をカスタマイズする機会が多くなります。
同じ色を様々な文字に指定する場合は、できる限り同じタグやclass属性を指定して、まとめてフォントの色を指定すると楽ですよ。
colorプロパティの指定方法【色を指定する時のお役立ち情報も】
上記で紹介したcolorは、フォントだけでなく、背景色などHTMLの色も指定できる便利なプロパティです。
colorプロパティで色を指定する時には、色を示す値を使用します。
値は複数あり、それぞれ指定方法が異なります。
| カラーネーム | color: red; |
| 16進数 | color: #ff0000; |
| 10進数 | color: rgb(255, 0, 0); %指定も可能 |
| HSL指定 | color: hsl(0, 100%, 50%); |
| 10進数の透明度指数 | color: rgb(255, 0, 0, 0.5); |
| HSLの透明度指数 | color: hsla(0, 100%, 50%, 0.5); |
それぞれの値や指定できる色は、かなりの数になるので覚える必要はありません。
指定したい色を調べる時には、以下のような早見表を確認できるサイトを利用しましょう！
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
自由にカスタマイズ！HTMLでフォントの色を変える方法【応用編】
HTMLでフォントの色を変える基本的な方法をマスターしたら、様々なパターンに応用できる方法を学んでいきましょう。
ここでは、2つのパターンでフォントの色を変える方法を紹介します。
自由にカスタマイズしたい時は、外部CSSファイルをHTML内で読み込んで使用する方法が最適なので、今回はその方法で紹介していきます。
HTMLでフォントの一部だけ色を変える方法
文章の一部だけフォントの色を変えたい時は、spanタグを使用します。
<!-- HTML -->
<body>
<p>HTML全体のフォントの<span>一部だけ</span>色を指定します。</p>
</body> /* CSS */
span {
color: rgb(255, 0, 0); /*赤色*/
}上記のように変えたい部分のフォントをspanタグで挟み、CSSのcolorで指定することで、その部分のみ色を変えることができます。
HTMLでフォントの色と背景色を変える方法
フォントの色だけでなく、背景色を変えたい場合には以下のように記述します。
<!-- HTML -->
<body>
<p>HTML全体のフォントの色と背景色を指定します。</p>
</body> /* CSS */
p {
color: #ffffff; /*白色*/
background-color: black;
}フォントの色はcolorプロパティ、背景色はbackground-colorプロパティで指定するので、間違いないように注意しましょう。
HTMLでフォントの色が変わらない！主な原因と対策を解説
CSSで指定したのに、HTMLのフォントの色が変わらない！！
という問題に直面した方は少なくないでしょう。
ここでは、そんな時の原因と対策を解説しますので、つまづいた時に参考にしてください。
CSSファイルが正しく読み込まれていない
フォントの色が変わらない原因で最も多く挙げられるのが「CSSファイルが読み込まれていない」ことです。
CSSファイルが正しく読み込まれているか確認するには、各ブラウザの開発用機能を使います。
Google Chromeの場合は、デベロッパーツールを開き、「Console」を確認します。
この時、「Failed to load resource: net::ERR_FILE_NOT_FOUND」という表示がでていたらCSSファイルが正しく読み込まれていないということになります。
CSSのコードに誤りがある
そもそもHTMLやCSSコードが間違って記述されている場合も、原因として多く挙げられます。
CSSファイルの読み込みを調べる方法と同様で、開発用機能を使います。
ブラウザがGoogle Chromeの場合、デベロッパーツールの「Elements」でCSSの反映状況が確認できます。
調べたいHTMLを指定した時、指定したCSSが線で消されて何らかのマークが表示されている場合は、コードに誤りがあることになります。
aタグフォントの色を変えたいのに全体で指定している
なぜかaタグだけフォントの色が変わらない…ということに悩まされている方も多いでしょう。
これは、各ブラウザであらかじめaタグにフォントカラーが設定してあるために起こる現象です。
むしろ正常な現象ですので安心いてください。
aタグにも色をつけたい場合は、以下のように個別で指定する必要があります。
<!-- HTML -->
<body>
<a href="#">aタグフォントに色を指定する。</a>
</body> /* CSS */
a {
color: hsl(0, 100%, 50%); /*赤色*/
}「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
まとめ：HTMLでフォントの色を変えるのは初心者でも簡単
今回は、HTMLでフォントの色を変える基本的な方法や、自由なカスタマイズ方法まで解説しました。
外部CSSを使ってフォントの色を変える場合もメインで使うのはcolorプロパティぐらいなので、初心者でも簡単に指定できるでしょう。
色の値はたくさんあるので、覚えずに早見表からコピペして使うのが便利ですよ。
フォントの色が変わらなくても焦らずに、この記事で紹介した原因を一つずつ確認していけば対処できます。
HTMLでフォントの色を変える方法をしっかり身につけて、見やすくメリハリのあるWebサイトを作りましょう！
