【HTML初心者入門】文字色や背景色を指定する方法 | プログラミング入門ならWEBCAMP NAVI
【3月枠も残りわずか】転職保証コース

【HTML初心者入門】文字色や背景色を指定する方法

みなさんはHTMLの学習をしていませんか?今回の記事では文字色や背景色の使い方や注意点について紹介していきます!

span タグのstyle属性を使用します

文字色なら、fontタグのcolor属性、背景色ならbodyタグのbgcolor属性でも可能です。ただ、文章や段落毎のレイアウトと考えた場合に効率よく管理しやすい指定方法はspanタグを使用します。

div タグでも可能ですが、divタグはブロック要素全体の色彩や背景色を指定するのに使います。文中での重要なキーワード等、特定の文字の色彩を変更する場合、span style を使用して設定します。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

「 div 」と「 span 」の違い

div はブロック要素になりますのでその前後で改行が入ってしまいます。そのため、文中の特定の文字だけという使い方はできませんが、span の場合はインライン要素のため文中のキーワードだけの色を指定することが可能です。

HTMLタグにstyle属性

スタイルシートは外部に「.cssファイル」を作成して独立させるのが一般的です。けれども、その箇所にだけスタイルを適用する場合には、htmlタグにstyle属性を指定して直接スタイルシートを記述することができます。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

文字色の指定方法

span で文字の色彩を変える場合は、キーワードの前後に次のタグを入れます。

<span style=”color:#ff0000;”></span>

この例では、赤の#ff0000を指定していますが、変更したい色彩を指定します。

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

文字の背景色の指定方法

文字の背景色を変える場合には キーワードの前後に次のタグを入れます。

<span style=”background-color:#FFCBCB;”></span>

そうすると、タグの範囲の背景色だけを指定することができます。

RGB値

“#000000″ のような数値を RGB値 と呼びます。RGB値は、色を構成する R(赤)・G(緑)・B(青)の光の三原色それぞれに対して、16進数(0-9 と A-F)を用いて2桁の数値で表記し、それを横並びにした6桁の数値で示します。

その数値の先頭には、必ずハッシュ(#)を記載します。また、色は16進数の数値で指定する他にも、”red”, “yellow”, “blue” のように色の名前で指定する方法にカラーネームでの方法があります。

このように、HTML における色は RGB値やカラーネームで指定することができます。

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<span><meta charset="UTF-8"></span>
<title>[TEST]文字色・背景色</title>
</head>
<body">
こちらは、<span style="color:#ff0000; background-color:#CBFFCB;">サンプル1</span>です。
こちらは、<span style="color:#0000ff; background-color:#FFCBCB;">サンプル2</span>です。
</body>
</html>

・HTMLをもっと楽に使いたい人は【HTML初心者入門】無料で使えるおすすめのツール・ソフト○選!を参考にしてみてください。

まとめ

初心者の方向けにhタグを紹介していきましたが、いかがでしたか?

hタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

3月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP

DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。

無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。

【無料】キャリア相談の日程を見る

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。