【CSS】レッスン2-01:CSS学習の入り口|文字に色を付けよう

Webページを作るとき多くの人が最初に学ぶのが HTML(ハイパーテキスト・マークアップ・ランゲージ) です。

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

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

CSSの学習を始めるにあたり、最初に「」という簡単な操作を体験してみましょう。

今回のレッスンでは、HTMLファイルに直接スタイルを記述する方法を学びながら、文字の色や背景色を変更する基本を理解します。

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

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

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

<<前のページ HTML/CSSの記事一覧 次のページ>>

CSSの基本構造

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

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

CSSの基本構成

CSSの記述は3つの要素から構成されます。

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

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

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

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

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

  1. セレクター(Selector): スタイリングしたいHTML要素(例:h1, p, sectionなど)
  2. プロパティ(Property): 適用するスタイル(例:color, font-size, background-colorなど)
  3. 値(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の<head>内に<style>タグを使ってスタイルを適用できる。
  • 初心者はこの方法からCSSを学び始めると理解しやすい。

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

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

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

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

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

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

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

1.色の名前(Color Names)

例: redbluegreen などの基本的な色名を使用。

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

2.16進数カラーコード(Hex Codes)

例: #ff0000(赤)、#00ff00(緑)、#0000ff(青)

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

3.RGBカラー(RGB Values)

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

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

4.RGBAカラー(RGB + 透明度)

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

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

5.HSLカラー(色相・彩度・輝度)

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

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

上記の5種類の指定方法を用いて、実際に文字の色を変えた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では 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の色指定方法を試してみてください!

まとめ

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

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

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

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

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

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

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

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

このサイトの Lesson1-1(HTML学習の入り口) か、今見ているこの記事(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

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

サイト作成の準備

まずは以下のリンクをクリックし、基本セットをダウンロードしましょう。

MyWebsite-Lesson2.zip

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

MyWebsiteフォルダの中身
  • MyWebsite.html
  • lesson1(フォルダ)
  • lesson2(フォルダ)
  • image(フォルダ)

Lesson1から継続している人は「lesson2フォルダ」のみをコピーし、作成してきたフォルダの中に貼り付けて下さい。その後、次の章まで読み飛ばしましょう。

lesson1フォルダにはHTMLの基礎知識をまとめたhtmlファイルが入っており、imageフォルダには複数の画像ファイルが入っています。またMyWebsite.htmlはこれから作成するWebサイトのトップページとなります。

また、lesson2フォルダはこれから学習を通して作成するファイルを保存するフォルダです。初期状態ではstyleという空のフォルダとimageという名前のフォルダが入っています。

まずはVSCを使ってMyWebsite.htmlをブラウザに表示して内容を見てみましょう。

この時点ではまだCSSを一切使用していないため、殺風景なWebサイトとなっています。これをこれからあなたの手で、見栄えの良いサイトに育てていきましょう!

Lesson2-1のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-1.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-1/HTMLコード)
<!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>
</head>
<body>
    <header>
        <h1>Lesson2-1: CSS学習の入り口|文字に色を付けよう</h1>
        <nav>
            <ul>
                <li>Lesson2-2:<a href="MyWebSite2-2.html">CSSを読み込む3つの方法</a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>1.CSSの基本構成</h2>
            <p>CSSは「セレクター」「プロパティ」「値」の3つの要素で構成されます。</p>
            <ul>
                <li><strong>セレクター</strong>: HTML要素を指定(例:h1, p)</li>
                <li><strong>プロパティ</strong>: スタイル設定(例:color, font-size)</li>
                <li><strong>値</strong>: プロパティに対する具体的な値(例:red, 24px)</li>
            </ul>
            <p>記述形式:<code>セレクター { プロパティ: 値; }</code></p>
        </section>
        <section>
            <h2>2.内部スタイルシートの適用方法</h2>
            <p>HTMLの&lt;head&gt;内に&lt;style&gt;タグを記述します。</p>
            <code>
                &lt;style&gt;
                    p { color: green; }
                &lt;/style&gt;
            </code>
        </section>
        <section>
            <h2>3.色の指定方法</h2>
            <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(60, 100%, 50%))</li>
            </ul>
        </section>
    </main>
    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-1.htmlに張り付けてください。

続いて、コピーしたコードの<head>タグ内に<style>タグを追加し、以下のようにページを装飾してみましょう。

・h1、h2、段落の文字色を変更
・コードの背景色を変更(例:code {background-color: #BBDEFB;})

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
    <style>
        h1, h2 {
            color: blue;
        }
        p {
            color: #212121;
        }
        code {
            background-color: #BBDEFB;
        }
    </style>

このコードをコピーして<head>タグに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

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

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

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






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