誰でも簡単にできる!HTMLで文字の色を指定する方法【初心者向け】

初心者向けにHTMLで文字の色を指定する方法について解説しています。色の指定などは通常CSSで行うことが多いと思いますが、実はHTMLで色をつけることができます。実際にソースコードを書きながら説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

文字や背景の色を指定するにはCSSを使用するのが一般的となっています。しかし、簡単な色設定だと、HTMLのみでも可能になっています。

そこで今回はHTMLで色の指定をする方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

色の指定を行うタグとその書き方

それでは色の指定を行うタグの書き方について解説していきたいと思います。

まずは、背景色の指定の仕方です。bodyタグ内でbgcolorという要素を指定することで、背景色を指定することが出来ます。

<body bgcolor=“色”>

このタグは、bodyタグのみでしか使用できないので注意しましょう。

bodyタグの大きさはデフォルトでは、画面いっぱいなので、丁度画面いっぱいに指定した色の背景が広がります。

 

次に文字の色変更の方法です。

fontタグ内でcolorという要素を指定することで、文字色を指定することが出来ます。

<font color="色">サンプル</font>

このように、文字も、背景も非常に簡単に色を変更することが出来ます。

colorタグはfontタグのみでしか、使用することができないので、HTML内で色を変更したい文字列がある場合はpタグではなく、fontタグを使用するようにしましょう。

 


 

大石ゆかり

「bgcolor」の「bg」ってなんて意味なんですか〜?

田島悠介

bgは、「background」の略語だよ!

大石ゆかり

・・・あ、なるほど!だから背景色が変わるんですねっ!

田島悠介

そうそう!じゃあ実際にHTMLを書いてみようか。

 

実際に書いてみよう

それでは実際にHTMLで色を変更してみましょう。

今回は画面いっぱいの黒い背景の中に、赤い文字を表示するサンプルを作成してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body bgcolor="black">
    <font color="red" bgcolor="black">サンプル</font>
  </body>
</html>

bodyタグ内でbgcolor要素にblackを指定し、背景色を黒に変更しています。

同じようにfontタグ内でも、color要素にredを指定し、文字色を赤に変更しています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

まとめ

今回は、HTMLで色を変更する方法について解説していきました。

一般的にはCSSで指定されることが多い文字色ですが、HTMLのみでも簡単な色の指定は出来ることが分かっていただけたかと思います。

ただ、大きさの指定やmarginなどをCSSで指定する場合、色の指定もCSSに記述した方が、すっきりするケースが多いので、そのような場合はCSSに記入するようにしましょう。

 

大石ゆかり

色ってHTMLでも指定できるんですね〜!

田島悠介

そうだね!HTMLでもCSSでも書き方を知っておくと便利だからね!

大石ゆかり

今担当してるWebサイトのリニューアルにも役立ちそうです〜!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。