HTMLで文字色を変える場合、<font>タグを利用する2つの方法があります。また、文字の装飾に利用するCSSでのフォントサイズの変更方法も説明します。しかし、昨今ではfontタグの仕様は推奨されていません。特別な理由がない限りはほかのタグの使用が推奨されています。
HTMLで文字色を変更する
font colorの使用方法
HTMLでは、フォントの色・サイズ・種類を変更する場合に<font>タグを使用します。そのうち、フォントの色を変更する場合は、<font>タグにcolor属性を付加して文字色を指定します。
<font color="色"> テキスト </font>色の指定方法
文字色は、color属性を用いて、ハッシュ（#）を先頭に置いた6桁のカラーコード、または、redやgreenといった、カラーネームで指定します。
色の指定方法
color="#ff0000"
color="red"カラーコード
カラーコードは左から2桁ずつ赤、緑、青を意味し、色の強さを00～ffまでの16進数で表現します。00 に近いほど要素が弱く、ff に近いほど強くなります。たとえば、白は「#FFFFFF」、黒は「#000000」、青は「#00FF00」になります。
カラーネーム
カラーネームは、なじみのある英語表記で「red」や「black」、「white」などの色名です。直感的にイメージがつきやすく、シンプルな色を指定する場合に適しています。RGBで指定する場合は合計16,777,216通りの色を表現できるので、細かい色味を調整したい場合に適しています。
注意点
HTMLでは<font>タグを使用してフォントサイズを変更できますが、HTMLはコンピュータがテキスト構造を理解できるようタグをつける言語です。文字のデザインを指定する場合はスタイルシート言語であるCSSでの記述が推奨されています。
CSSが標準利用されるまでは<font>タグが用いられていましたが、HTMLとデザイン指定をするCSSの使い分けが行われ、HTMLで行われていたフォント指定はCSSで代替されるようになりました。HTML5からは<font>タグは廃止されています。しかし、モバイル端末のなかにはCSS未対応のものもあり、そういった場合に<font>タグが使用されます。
2通りの方法で文字色を指定します。
実行コード
<font color="00ff00">文字色は青になります</font>
<br>
<font color="red">文字色は赤になります</font>実行結果
フォントサイズを指定する方法
フォントサイズの指定方法は、”大きさ” の部分に1（最小）～7（最大）の数値を指定します。また、このほかにも+、-といった符号を使用して相対値で指定する方法もあります。基準のフォントサイズは3となるため、0だと3、-1だと2、+1 だと4というように表現できます。この場合でも、1～7に収まるようにする必要があります。<font >タグでフォントサイズを指定する場合、そのページを訪れた人のディスプレイサイズやブラウザ設定によっても表示サイズが異なります。
<font size="1">フォントサイズ1</font>
<br>
<font size="2">フォントサイズ2</font>
<br>
<font size="3">フォントサイズ3</font>
<br>
<font size="4">フォントサイズ4</font>
<br>
<font size="5">フォントサイズ5</font>
<br>
<font size="6">フォントサイズ6</font>
<br>
<font size="7">フォントサイズ7</font>
<br>
<font size="-2">フォントサイズ-2</font>
<br>
<font size="-1">フォントサイズ-1</font>
<br>
<font size="+0">フォントサイズ+0</font>
<br>
<font size="+1">フォントサイズ+1</font>
<br>
<font size="+2">フォントサイズ+2</font>
<br>
<font size="+3">フォントサイズ+3</font>
<br>
<font size="+4">フォントサイズ+4</font>
フォント名を指定する方法
字体の指定は、faceの属性を用いて行います。左から優先順にカンマ(,)で並べることができ、複数指定できます。フォントを指定した場合でも、そのデバイスにフォントが未対応の場合は表示されません。
フォントの指定方法
font face="候補1,候補2,候補3"実行コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
フォントのサイズ・色・種類を指定しないテキスト
<br>
<font color="#0000ff">カラーを青色に指定したテキスト
<br>
<font size="5" color="red">フォントサイズを5でカラーネームを赤色に指定したテキスト</font>
<br>
<font size="2" color="black" face="ＭＳ 明朝">サイズを2でカラーネームを黒色でフォントを明朝体に指定したテキスト</font>
<br>
<font size="6" color="#00ff00" face="ＭＳ Ｐゴシック,ＭＳ ゴシック">フォントサイズを6でカラーを緑色、字体をゴシック体に指定したテキスト</font>
</font>
</body>
</html>実行結果
CSSで文字色を変更する方法
CSSで文字色を変更する場合は「color」プロパティを用いて「色（カラーネームまたはカラーコード）」を指定します。
HTMLファイルのタグ内に組み込む
タグ内にフォントサイズに関する情報を組み込みます。
<body>
<h1 style="color: red;">文字色を赤に指定する</h1>
</body>h1タグ内のテキストのフォントカラーをカラーネームで赤色に指定します。
囲うタグがない場合には、spanタグで囲います。
<span style="color: red">文字色を赤に指定する</span>HTMLファイルにCSSファイルを組み込む
CSSファイルの記述内容をHTMLファイルのタグ内に組み込む方法です。Webページ内で共通の設定をする場合に適しています。
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>文字色を赤に指定する</h1>
</body>headタグ内にstyleタグとフォントカラーの設定を記述します。
HTMLファイルからCSSファイルの情報を読み込む
HTMLファイルからCSSファイルを読み込んで反映する方法です。複数のWebページで設定を統一する場合に適しています。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>文字色を赤に指定する</h1>
</body>headタグで「style.css」というCSSファイルを読み込むことで、HTMLファイルを開くとCSSファイルで設定した内容が読み込まれます。
作成するWebページによってどの方法を用いるか選択しましょう。
HTML/CSSとは？関係性や書き方を解説
HTMLの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTMLに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
