スライドショー

【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で文字や背景色を変更
・スタイルシートを使って、文字や背景色の変更

ということを行ってきました。

実際の現場では、スタイルシートを利用することがほとんどですので、読み込み方や書き方に慣れておきましょう!

それでは!!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説