初心者向けCSS入門｜文字と背景色を変更する方法と基本解説

ながみえ

HTML/CSSレッスン2-1『CSS学習の入り口｜文字に色を付けよう』記事用アイキャッチ画像

Webページを作るとき多くの人が最初に学ぶのが HTMLです。

HTMLはページの構造を定義し、見出しや段落、画像などを配置できます。しかし、HTMLだけではデザインを自由にカスタマイズすることができません。

そこで登場するのが CSS（カスケーディング・スタイル・シート） です。CSSを使えば、文字の色やサイズ、背景のデザイン、レイアウトの調整などを簡単に行うことができます。

これからCSSの学習を始めるにあたり、まずは「文字に色をつける」という簡単な操作を体験してみましょう。

初心者でも安心して取り組めるよう、具体的なコード例を交えながら進めていきますので、一緒に楽しく学んでいきましょう！

注意点

このページは、既にHTMLの基礎を学習済みの方を対象としています。

HTMLの基礎をまだ習得していない方は↓↓のリンクからHTML/CSSの記事一覧へ飛び、先にHTMLの学習を進めて下さい。

<<前のページ

記事一覧

次のページ>>

HTML/CSSレッスン2-2『HTMLにCSSを読み込む3つの方法とその使い分け』記事用アイキャッチ画像

CSSの基本構造と書き方を知ろう

CSSを使うためには、”どこに” “どのように” スタイルを書けばよいのかを理解する必要があります。

今回はCSS学習の最初の一歩として、HTMLの <head>タグ内に <style>タグを記述する方法を紹介します。

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

CSSコードの基本構成を理解しよう

CSSのコードは3つの要素から構成されます。

その３つの要素を組み合わせた記述方法を CSSの宣言（Declaration） と呼び、スタイルを適用したい部分を特定するためにセレクターというものを使います。

例えば、以下のCSSコードを見てみましょう：

h1 {
  color: blue; /* 見出しを青色にする */
  font-size: 24px; /* フォントサイズを24pxに設定 */
}

これはHTML文書のh1タグを、文字色を青色にし、フォントサイズ24px にするCSSコードです。

CSSコードはセレクター、プロパティ、値の３つの要素から構成されます。

セレクター（Selector）：スタイリングしたいHTML要素（例：h1, p, sectionなど）
プロパティ（Property）：適用する（変更する）スタイル
（例：color, font-size, background-colorなど）
値（Value）：プロパティに対して設定する具体的な値（例：red, 16px, #ffcc00など）

「 セレクター { プロパティ：値； } 」という書き方を丸暗記しましょう。

とくに「：」や「；」が抜けたり打ち間違えたりするミスを、初心者はやりがちです。CSSがうまく反映されないときは、ここにミスがないかチェックしましょう。

参考資料

CSSではコードの可読性を向上させたり、後で修正しやすくするために コメント を使用します。

上記のコード内の「/* 見出しを青色にする */」や「/* フォントサイズを24pxに設定 */」の部分がコメントです。コメントはブラウザが無視するため、ページのデザインに影響を与えることはありません。

コードの整理やメモとして活用しましょう。

CSSでは「/*」と「*/」で囲まれた部分がコメントとして処理されます。

HTMLにCSSを反映・適用させる方法

CSSをHTMLに適用する最も簡単な方法は、HTMLファイルの<head>タグ内に<style>タグを記述することです。

これは内部スタイルシートと呼ばれ、小規模なプロジェクトや試しにスタイルを適用する際に便利です。

以下のコードは、HTMLの<head>内にCSSを記述する例です：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS入門</title>
    <!-- ここから内部スタイルシート -->
    <style>
      body {
        background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
      }
      p {
        color: green; /* 段落の文字色を緑に設定 */
      }
    </style>
</head>
<body>
  <p>これはCSSを適用した段落です。</p>
</body>
</html>

<style>タグの中にCSSコードを記述します。
body全体の背景色を薄いグレー（#f0f0f0）に設定しています。
pタグの文字の色を緑色（green）に設定しています。

上記のコードをコピーして、VSCを使ってブラウザ表示してみてください。緑色の文字が薄いグレーの背景の上に表示されるはずです。

実際に文字の色を変えてみよう

CSSを使うとHTMLのテキストに好きな色を簡単に適用できます。

文字の色を変更するために、CSSでは colorプロパティを使用します。

`color`プロパティによる色の指定方法

color プロパティはテキスト等の色を指定するためのプロパティです。例えば段落や見出しなどの要素に色を適用することができます。

文字の色を指定する方法は大きく５種類あります。初心者のうちは１つ目の「色の名前」による指定だけでも十分ですが、ほかにも方法があることは知っておきましょう。

特に２つ目の「16進数カラーコード」は使われる頻度も高く、４つ目の「RGBAカラー」はデザインに拘る人は使いたくなるはずです。

１．色の名前（Color Names）

例: red、blue、green などの基本的な色名を使用。

p {
  color: red; /* 段落の文字色を赤にする */
}

２．16進数カラーコード（Hex Codes）

16進数カラーコードは、RGBの色を#RRGGBBの形式で表すコードです。

例: #ff0000（赤）、#00ff00（緑）、#0000ff（青）

h1 {
  color: #ff5733; /* 見出しの文字色をオレンジ色にする */
}

３．RGBカラー（RGB Values）

RGBカラーは、赤(R)、緑(G)、青(B)の3色を組み合わせて色を表現するモデルです。

各色は0～255の数値で指定し、例えば(255,0,0)は赤、(0,255,0)は緑、(0,0,255)は青を示します。

例: rgb(255, 0, 0)（赤）、rgb(0, 255, 0)（緑）、rgb(0, 0, 255)（青）

div {
  color: rgb(0, 128, 255); /* テキストの色を青にする */
}

４．RGBAカラー（RGB + 透明度）

RGBAカラーは、RGBカラーに透明度（A：アルファ値）を加えたモデルです。

赤(R)、緑(G)、青(B)は0～255、アルファ(A)は0.0～1.0で指定し、(255,0,0,0.5)は半透明の赤を示します。

例: rgba(255, 0, 0, 0.5)（赤、50%透明）

span {
  color: rgba(255, 0, 0, 0.5); /* 赤色の半透明にする */
}

５．HSLカラー（色相・彩度・輝度）

HSLカラーは、色相(H: Hue)、彩度(S: Saturation)、明度(L: Lightness)で色を表すモデルです。

Hは0〜360°、SとLは0〜100%で指定します。デザインやCSSで直感的に色調整が可能です。

例: hsl(120, 100%, 50%)（緑）、hsl(240, 100%, 50%)（青）

h2 {
  color: hsl(60, 100%, 50%); /* 黄色にする */
}

コードを書いてみよう

上記の５種類の指定方法を用いて、実際に文字の色を変えたHTML/CSSコードを書いてみましょう。

以下のように指定してください。

h1タグ：色の名前で指定（赤：red）
h2タグ：16進数カラーコードを指定（青：#0000ff）
h3タグ：RGBカラーで指定（緑：rgb(0, 255, 0)）
h4タグ：RGBAカラーで指定（半透明の赤：rgba(255, 0, 0, 0.5)）
pタグ：HSLカラーで指定（黄色：hsl(60, 100%, 50%)）

文字色を指定・変更するときの注意点

背景色とのコントラストを考慮する
ユーザーが読みやすいように、文字色と背景色のコントラストに注意しましょう。
一貫したデザインを心がける
サイト全体のカラースキームを統一することで、見た目の調和が取れます。

CSSで背景色を設定・変更する基本

文字の色を変更するのと同様に、CSSでは背景色を変更することもできます。

背景色を設定することで、ページ全体のデザインに統一感を持たせたり、重要な部分を強調することができます。

CSSでは background-colorプロパティを使用して、要素の背景色を指定します。

`background-color` プロパティで背景色を指定する方法

背景色を設定する基本構文は以下の通りです：

セレクター {
  background-color: 色の指定;
}

たとえば、次のようにHTMLの要素に背景色を適用できます：

body {
  background-color: lightblue; /* ページ全体の背景色を薄い青色に設定 */
}
p {
  background-color: rgba(255, 0, 0, 0.3); /* 段落の背景を赤の半透明に設定 */
}

背景色を設定するときの注意点とコツ

テキストとのコントラストに注意する
文字色と背景色のコントラストが弱いと見にくくなります。特に黒文字には薄い背景色を、白文字には濃い背景色を使いましょう。
ページ全体に背景を設定する場合
body セレクターを活用してページ全体に適用することが一般的です。
特定の要素だけに適用する
セクションやボックス単位で背景色を指定すると、視覚的なアクセントになります。

【保存版】CSS初心者向けカラーコード一覧表

CSSで指定できる代表的な色の指定コードを表にまとめました。これからCSSの学習を進めていくにあたり、活用してください。

（RGBA値を使用する際は、「rgb」を「rgba」に変更し、4つ目の値として透過率を入れてください。）

色	CSS色名	16進数カラーコード	RGB値	HSL値
赤	red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
青	blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
緑	green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)
黄	yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
黒	black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
白	white	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)
灰色	gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
紫	purple	#800080	rgb(128, 0, 128)	hsl(300, 100%, 25%)
オレンジ	orange	#FFA500	rgb(255, 165, 0)	hsl(39, 100%, 50%)
ピンク	pink	#FFC0CB	rgb(255, 192, 203)	hsl(350, 100%, 88%)

この表を参考にしながら、CSSの色指定方法を試してみてください！

文字色と背景色を変えるCSSの基本まとめ

このレッスンではHTMLに CSSを適用する基本的な方法を学び、実際に文字の色や背景色を変更する体験をしました。

初心者の方にとってCSSの基礎をしっかり理解することは、今後のWebデザイン学習の大切な第一歩です。

CSSを使うことで、HTMLの見た目を簡単にカスタマイズできる。
<style>タグを使った内部CSSの記述方法をマスターすることが重要。
自分でコードを書いて、試行錯誤しながら学ぶことが成長への近道。

お疲れさまでした！次のレッスンも引き続き頑張りましょう。

【CSS】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

練習問題2-1：文字と背景に色を付けよう

VSCで「training2-1.html」というファイルを作って保存してください。

そのファイルにコードを書き、ブラウザに以下のように表示させましょう。

「CSSを使ってみよう」と題したHTML練習ページ。青い大見出しと、オレンジ色の文字で背景が淡い黄色の段落が表示されている。

初めてのWebサイトを作ろう2-1

このサイトの Lesson1-1（HTML学習の入り口）かLesson2-1（このページ）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Webサイト制作に挑戦する人はここをクリック！

まずはこのLesson2からWebサイト制作を始める人に向けての説明を行います。

Lesson1から制作を続けている人はここをクリックして作成部へ移動してください。

Webサイト作成の準備

まずは以下のリンクをクリックし、基本セットをダウンロードしてください。

【Lesson2用】MyWebsite.zip

このzipファイルを解凍するとMyWebsiteというフォルダが展開され、その中には以下の内容が入っています。

MyWebsiteフォルダの中身

MyWebsite.html
lesson1（学習フォルダ/完成済み）
lesson2（学習フォルダ）
lesson3（学習フォルダ）
image（トップページ用の画像フォルダ）
style（トップページ用のCSSフォルダ）

MyWebsite.htmlはこれから作成するWebサイトのトップページとなります。

これから「Lesson2：CSSの基本」の学習を通してlesson2フォルダの中に新しいhtmlファイルやCSSファイルを追加していき、一つのWebサイトを作成していきます。

ダウンロードが完了したら、MyWebsite.htmlをブラウザで表示してみましょう。表示する方法が分からない方は先にこちらの記事を見て、HTMLの開発環境を構築してください。

各レッスンの学習内容が、それぞれ異なるデザインで表示されているかと思います。

最初は殺風景なページしか作成できませんが、Lesson2～Lesson3へと学習を進めていくことで見栄えの良いWebサイトを作れるようになります。

それでは、ここから実際にその作業に入っていきましょう。

Lesson2-1のまとめノートと練習問題を追加しよう

このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。

１．練習問題の解答を保存

練習問題2-1で作成した「training2-1.html」を、ダウンロードした「lesson2（学習フォルダ）」の中に保存してください。

トップページからリンクで飛べるようになりますので確認しましょう。

２．まとめノートを作成・保存

下記のHTMLコードは、このLesson2-1で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite2-1.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-1</title>
    <link rel="stylesheet" href="style/styles-lesson2.css">
</head>
<body>
    <h1>Lesson2-1：文字に色を付けよう</h1>

    <div class="container">
        <h2>目的・要点</h2>
        <p>
            CSS（カスケーディング・スタイル・シート）は、HTMLで作成したWebページのデザインを調整するための技術です。
            本レッスンでは、CSSの基本概念と記述方法を学び、文字の色や背景色を変更する方法を実践します。
            HTMLの基礎を習得した人が、CSSの入門として最初に学ぶべき重要な内容です。
        </p>

        <h2>到達目標</h2>
        <p>
            本レッスンの到達目標は、CSSの基本構造を理解し、HTML内でCSSを記述して文字色や背景色を変更できるようになることです。
        </p>

        <h2>このレッスンで学習した内容</h2>
        <ul>
            <li>CSSの基本構成：セレクター、プロパティ、値</li>
            <li>HTMLの <code>&lt;head&gt;</code> タグ内の <code>&lt;style&gt;</code> タグを用いた内部スタイルシートの記述方法</li>
            <li>CSSを適用するための基本構文：「セレクター { プロパティ: 値; }」</li>
            <li>文字色を変更する <code>color</code> プロパティの使い方</li>
            <li>背景色を設定する <code>background-color</code> プロパティの使い方</li>
            <li>色の指定方法：
                <ul>
                    <li>色の名前（例：red, blue）</li>
                    <li>16進数カラーコード（例：#ff0000）</li>
                    <li>RGBカラー（例：rgb(255, 0, 0)）</li>
                    <li>RGBAカラー（例：rgba(255, 0, 0, 0.5)）</li>
                    <li>HSLカラー（例：hsl(120, 100%, 50%)）</li>
                </ul>
            </li>
            <li>CSSコードの可読性向上のためのコメントの活用方法</li>
        </ul>

        <h2>トピック・豆知識</h2>
        <ul>
            <li><code>color</code> プロパティと <code>background-color</code> プロパティを組み合わせることで、視認性の高いデザインを作成できる。</li>
            <li>CSSの書き方に誤りがあると、ブラウザに適用されないため、「:」や「;」の打ち間違いに注意する。</li>
            <li><code>body</code> に <code>background-color</code> を設定すると、ページ全体の背景色を変更できる。</li>
            <li><code>color</code> プロパティを使う際は、背景色とのコントラストを意識し、読みやすさを確保する。</li>
        </ul>

        <h2>まとめ</h2>
        <p>
            このレッスンでは、CSSの基本概念を学び、文字の色や背景色を変更する方法を実践しました。
            CSSの適用方法や書き方を理解し、HTMLにスタイルを適用できるようになったことが重要なポイントです。
        </p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </div>

    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>
</body>
</html>

また、下記のコードはLesson2のまとめコード全体で使用する外部CSSコードです。

外部CSSが何かは次のLessonで解説しますが、ここではこれをコピーして「styles-lesson2.css」という名前で保存し、Lesson2フォルダの中にあるstyleフォルダに保存してください。

@charset "utf-8";

/* 全体の設定 */
body {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #007bff;
    background-color: #e3f2fd;
    color: #003366;
    font-family: Arial, sans-serif;
}

/* ヘッダー設定 */
h1 {
    font-size: 26px;
    text-align: center;
    border-bottom: 3px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #0056b3;
}

h2 {
    font-size: 22px;
    border-left: 5px solid #007bff;
    padding-left: 15px;
    margin-bottom: 15px;
    color: #004080;
}

h3 {
    font-size: 18px;
    font-style: italic;
    text-decoration: underline;
    margin-bottom: 10px;
    color: #0056b3;
}

/* コンテナの設定 */
.container {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* リストのスタイル */
ul {
    padding-left: 20px;
}

ul li {
    margin-bottom: 5px;
    color: #003366;
}

/* フッター設定 */
footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid #007bff;
    color: #003366;
}

これでLesson2-2の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

<<前のページ

記事一覧

次のページ>>

FAQ｜CSSで文字色・背景色を変更する方法に関するよくある質問

Q1. 色の名前が英語だと難しいです。日本語で指定はできませんか？

CSSは英語の色名しか使えませんが、最初は簡単な単語だけで大丈夫です。

red（赤）、blue（青）、green（緑）など、基本の色から慣れていきましょう。

色名以外にも「カラーコード」を使う方法はこの記事で紹介しています。

Q2. CSSを書いても文字色が変わらないのですが、何が原因でしょうか？

よくある原因は以下の通りです。

CSSを書く場所を間違えている
セレクタ（指定するHTML要素）が合っていない
CSSの書き方にスペルミスがある

まずはHTML内の<style>タグ内に正しく書かれているか確認しましょう。

それでも変わらない場合は、指定した要素が正しいかCSSのスペルをチェックしてください。

Q3. 背景色をつけたら、文字が読みにくくなりました。どうすればいいですか？

背景色と文字色は「コントラスト」を考えて選ぶ必要があります。

例えば、background-color: yellow;ならcolor: black;のように、明るい背景には暗い文字を選びましょう。

色の組み合わせに迷ったら、この記事の「カラーコード一覧表」を参考にしてください。

もしくは、会員向けとして以下のような記事も用意しています。

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。

HTML/CSSのテキスト＆問題集トップへ戻る
トップページへ戻る