フォントカラーをHTML・CSSで指定する方法を初心者向けに解説！

などなど、WebデザインやHTML・CSS学習中のあなたは、カラー指定で悩んでいることがありますよね。

今回は、ITエンジニアの私が、フォントカラーの指定方法をご紹介し、あなたの悩みを解消していきましょう！

フォントカラーはHTML・CSSのどちらで指定できる？

フォントカラーはHTML・CSSのどちらでも指定することができます。

ただ、「CSS」で指定するのが一般的なので、とりわけ理由がない場合は、CSSで指定するようにしましょう。

もし、「1行だけ文字色を変えたい」といった一部だけフォントカラーを変更したい場合は、HTMLでの指定でもOKです！

フォントカラーを指定する「Colorプロパティ」

フォントカラーを指定するには、「Colorプロパティ」を使用するのですが、以下3種類の指定方法があります。

「Colorプロパティ」種類名称	説明	例（白、黒）
カラーコード	#RRGGBB（#赤赤緑緑青青)の16進数で指定	color:#FFFFFF; color:#000000;
カラーネーム	色の名前を英語で記載	color:white color:black
RGB	R(赤)、G(緑)、B(青)の数値を指定	color:rgb(255,255,255) color:rgb(0,0,0)

基本的に「カラーコード」で指定することが多いので、この後はカラーコードを指定した例をご紹介していきます！

フォントカラーをHTMLで指定する方法

フォントカラーをHTMLで指定するには、「<font color=”色”> ~ </font>」を使用します。

手順はとっても簡単です！

これで、実際にオレンジに変更されます！

ちなみに、よくある質問で「カラーコードは覚えた方が良い？」というものがありますが、全く覚える必要はありません。

というのも、「カラーコード　”あなたの調べたい色”」などで検索すれば、すぐに出てくるので、わざわざ暗記はしなくて良いです。

私も、「黒」「白」「赤」のコードしか覚えていないですね。

お気に入りの配色サイトをブックマークしておくのもおすすめですよ！

参考：https://www.colordic.org

フォントカラーをCSSで指定する方法

フォントカラーをCSSで指定する手順は次のとおりです。

説明のために、HTMLの不要部分をかなり省略していますが、本来なら各種設定や見出し設定の記載もあるので、注意してください。

また、文章全体の色を変更したい場合は、例と同じように「body」の部分にカラー設定をするだけで簡単に変更することができます！

HTML・CSSが難しい時におすすめのスクール

HTML・CSSが難しい時におすすめのスクールは、「シーライクス（SHElikes）」です。

シーライクスは、未経験者向けのWebスクールなので、コーディングやWebデザインの基本から学べ、挫折しない仕組みもたくさん整っているスクールになります。

もし、興味があったらこちらの記事も読んでみてください 

まとめ

フォントカラーをHTML・CSSで指定する方法をご紹介しました。

実際にあなた自身の環境でも試してみてくださいね。

また、コーディングでわからないことがあった時は、早めに誰かに相談することがおすすめです。

ちなみに、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行なっています。

無料でシーライクスの体験ができますし、カウンセリングの時間があるのであなたの悩みを相談することも可能です。

「HTMLやCSSの学習が難しい」、「ポートフォリオ作成が進まない」などの悩みをこの機会を活用して、相談するも良いですね。

無理な勧誘もないので、良かったら参加してみてください！

私が体験レッスンに参加した内容はこちら