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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

文字や背景の色を指定するにはCSSを使用するのが一般的です。

しかし、簡単な色設定だと、HTMLのみでも可能です。

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

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

 

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

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

目次

 

HTMLだけで文字の色を変える

文字の色を変える方法は複数あります。

今回は2通りの方法をご紹介します。

fontタグを使う方法

1つは、fontタグを使用する方法です。

色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。

h1タグを使って大きな文字で色を変更することもできます。

色は、red, blue, green, brown など、好きな色を指定しましょう。

HTML

<h1><font color="red">こんにちは!</font></h1>

style指定をする方法

もう1つは、style指定をする方法です。

CSSの記法で、HTMLタグに直接スタイルを適用することができます。

色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。

囲うタグが特に無い場合は、spanタグで囲いましょう。

HTML

<h2 style="color:blue">こんにちは!</h2>

<span style="color:brown">こんにちは!</span>

<font>タグ利用方式とstyle属性指定方式の違いとメリット

おすすめは、style属性を指定する方式です。
それぞれの方式の違いを詳しくご説明します。

<font>タグを使う方式の特徴

覚えやすくて簡単な方式です。文字フォント専用にタグを用意する点が特徴です。

しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。
使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。

style属性を使う方式の特徴

CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。
HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。

また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方ですので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。

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

実際に書いてみよう

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
  </head>
  <body>
    <p>Hello TechAcademy !</p>
    <h1><font color="red">こんにちは!</font></h1>
    <h2 style="color:blue">こんにちは!</h2>
    <p style="color:green">こんばんは!</p>
    <span style="color:brown">HTMLファイルだけで、</span>
    <span style="color:blue">文字色を変更する。</span>
  </body>
</html>

 

文字の大きさをデフォルトにしたい場合は、pタグかspanタグを使います。通常はpタグを使い、改行しない場合はspanタグを使いましょう。

style属性を使った書き方は、CSSの記法と同じです。CSSに慣れるためにも、style属性を使う方が良いでしょう。

まとめ

今回は、HTMLで色を変更する方法について解説していきました。慣れてきたら、CSSを使ってより自由度の高いデザインに挑戦しましょう。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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