【HTML入門】文字や背景の色を変える方法をマスターしよう！
みなさんこんにちは！かいです。
みなさん、HTMLはきちんと書いていますか？
正しいマークアップはバグを遠ざけるだけでなく、SEOにも良い効果を及ぼしたり、保守や改変も加えやすいですよね。
マークアップをしていて文字や背景の色を変えたい、ということは多々あると思います。
そこで今日は文字色、背景色を変える方法や、CSSからきちんと読み込ませる方法などを詳しく解説していきますので、HTMLを書き始めの方に参考にしていただければ幸いです！
この記事の目次
RGBについて理解しよう！
実際に色を扱うときはカラーコードというものを利用するのが一般的です。
このカラーコードというのはRGBという表現方式で表されていてRGBとはRed, Green, Blueの三原色を混ぜて作られる加法混合方式の一種です。
また、カラーコードは16進数で表すことができます。
例えば、10進数ではカラーコードは0から255で表しますが、255を16進数で表すとFFとなります。
一桁が16の重みを持っていてかつ、Fは10進数の15に相当するので、
16^0 * 15 + 16^1 * 15 = 255ですね。
つまり、FFは一番濃い色を表します。
なので、#FF0000とすれば、#R(FF)G(00)B(00)ということなので、赤を表していて、
#FFFFFFとすればRed, Green, Blue全てを合わせた色なので画像の通り白になります。
実際に色を変更してみよう！
それでは、カラーコードの見方がわかったところで実際に色をつけてみましょう！
文字色を変更する
文字に色をつけるにはfontタグを使います。
以下のようにfontタグにcolor属性をつけてやると良いです。
<p>
<font color = "#000000">sayhello</font>
<font color = "black">sayhello</font>
<font color = "#FF0000">sayhello</font>
<font color = "red">sayhello</font>
</p>
このように指定してやると、色をつけることができます。
また、簡単な色であれば上記のように、直接英語で色を指定することもできます。
きちんと色がついていますね。
背景色を変更する
次は背景を変更する方法も見ておきましょう。
背景色を変えるときは、styleタグを利用します。
styleタグのbackground-color属性で変更します。
<p style="background-color:#00FF00">
<font color = "#000000">sayhello</font>
<font color = "black">sayhello</font>
<font color = "#FF0000">sayhello</font>
<font color = "red">sayhello</font>
</p>
うまく背景色がついていますね。
CSSに書いて読み込ませよう！
これまで、HTMLに直接スタイルを書いてきましたが、この方法はあまり実際の現場では使われません。
実際には、CSSというstylesheetを用意してそちらに記述して、読み込ませます。
なので、その方法を見ていきましょう。
画像のように、HTMLファイルと、CSSファイルを用意し、HTMLファイルでそのパスを読み込んでやります。
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<p>sayhello</p>
</body>
</html>
このように、linkタグタグで読み込みましょう。
他HTMLの記述が増えていますが、一応HTMLとして機能させるために書いていますが、本質ではないので深くここで理解する必要ないです。
そして、CSSのほうでは、
style.css
body {
background-color: #00FF00;
}
p {
color: #FF0000;
}
このように書いてやると、
このように、文字や背景色が適応できていますね。
CSSで背景色を変更する方法については以下の記事で詳しく説明されているので、気になる方は確認しておくと良いでしょう。
CSSで背景色指定！ background-colorの使い方
更新日 : 2019年7月30日
ウェブサイト制作スキルで好条件の仕事を獲得したい人は
この記事をご覧の方の中にはHTML及びCSSを習得して、フリーランスとして案件を請け負い、自由に働いていきたいと考えている人もいるのではないでしょうか？
そんなあなたは、HTMLのようなマークアップ言語だけでなく、いわゆる「プログラミング言語」も一緒に学ぶ事をオススメします。なぜならそのほうが、HTML単体よりも好条件な案件を獲得しやすくなりますし、案件自体も多くなるからです。
JavaScriptやPHPなどを筆頭に、HTMLとセットで学ぶのにオススメの言語はたくさんありますので、興味がある人はまず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を無料で診断することができます。
そしてプログラミング言語の習得も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。というのも、HTMLやCSSと比べて、プログラミング言語の習得は一気に難易度が上がるので、独学では挫折してしまう可能性が高いからです。
弊社「侍エンジニア塾」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。
「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日
少しでも興味を持った方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！
まとめ
いかがでしたでしょうか。
今日は、
・カラーコードの読み方
・HTMLで文字や背景色を変更
・スタイルシートを使って、文字や背景色の変更
ということを行ってきました。
実際の現場では、スタイルシートを利用することがほとんどですので、読み込み方や書き方に慣れておきましょう！
それでは！！
