【color】スタイリングのためのタグをつかって文字色と背景色を変えてみよう

こんにちは。ヒロユキです。

Webページのスタイリングには「CSS」を使うのが一般的ですが、「HTML」にもスタイリングのためのタグがあります。

今回は、タグをつかって「文字色」や「背景色」を変更する記述方法を紹介しますね。

文字色と背景色をスタイリングするタグ

小松田くん

HTMLのタグって、文字の色を変えたりすることはできないんですか?

尾地ヒロユキ

う〜ん。文字色とかのスタイリングは「CSS」を使ったほうがいいんだけど…。タグをつかったスタイリングもやってみようか!

文字色を変更する属性値「color」

文字色とは、字のとおり「文字の色」のことです。文字色は通常「黒色」で統一されていますが、スタイルを指定することで色を変更することができます。↓

上の画像は「桃太郎」の文字色を「赤色」に変更した場合のもの。

この場合のコードはこんな感じ。↓

<div style="color:red;">
 <h1>桃太郎</h1>
</div>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

ここからここまでっていう範囲を指定するには、div(!)タグをつかってます。

divタグ

<div></div>で囲まれた部分をひとつのグループとする要素。これによってスタイルの指定などを、まとめて行うことができる。

今回の場合は、h1の文字色を変更するので、divタグでh1を囲みます。↓

<div>
 <h1>桃太郎</h1>
</div>

次に、divタグ内にstyle要素(!)を記述します。↓

<div style="">
 <h1>桃太郎</h1>
</div>

style属性

タグ毎にスタイルを指定できる属性。<head>の中にスタイルシートを記述する<style>(style要素)も存在するので混合しないように注意。

文字色を変更するには属性値を「color」とします。↓

<div style="color">
 <h1>桃太郎</h1>
</div>

色の指定は「color」の後に「:(色);」を記述します。↓

<div style="color:red;">
 <h1>桃太郎</h1>
</div>

はい!これでdivで囲んだ部分の背景色が変更されました!!

尾地ヒロユキ

色の指定は「カラーコード(!)」でもオーケーだぞ。

カラーコード

「#6桁の16進数」で表記される色彩コードのこと。白色は「#FFFFFF」、黒色は「#000000」となる。

divタグは複数のタグをまたいで囲むことができるので、ページ内で文字色を変更したい部分がまとまってる場合は、divタグで一気に囲ってあげましょう。

試しに、今回の文中の文字色をすべて変えるとしたらこうなります。↓

<div style="color:red;">
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>
<h1>~<p>までのすべてをタグを囲んだ場合

ページ全体の文字色を変更する場合は、headタグ内に記述するstyleタグのほうが便利なのでそちらを活用しましょう。

背景色を変更する属性値「background-color」

背景色とは、ページのベースになる色のとこです。↓

この場合は「ピンク色」で、文字や画像の背景になってる部分ですね。

実際のコードを見てみましょう。↓

<div style="background-color: pink;">
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>

文字色の変更と同じく、divタグで変更したい部分を囲んで、style要素で背景色を指定します。記述の工程ごとに見ていきましょう。

まず、divタグで背景色を変更したい部分を囲みます。↓

<div>
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>

divタグ内にstyle要素を記述します。↓

<div style="">
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>

背景色を変更するには属性値を「background-color」とします。↓

<div style="background-color">
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>

色の指定は「background-color」の後に「:(色);」を記述します。↓

<div style="background-color: pink;">
 <h1>桃太郎</h1>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
</div>

はい!これでdivで囲んだ部分の背景色が変更されました!!

小松田くん

「文字色」も「背景色」も基本の記述は同じなんですね。

文字色と背景色をスタイリングするタグのまとめ

  • スタイルを変更したいタグをdivタグで囲む。
  • divタグの中にstyle属性を記述する。
  • style属性の属性値は、
    文字色→“color:(色);”
    背景色→“background-color:(色);”
  • 指定する色の名前は、英語表記かカラーコードを記述する。

文字色や背景色、その他のスタイリングは基本的に「CSS」を活用します。今回のタグを使ったスタイリングは、もしかしたらあまり使う機会がないかもしれません。

ですが、HTMLでスタイリングができる方法のひとつとして習得しておきましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪