CSSでHTMLのテキストの色を変える

WebサイトにCSSを反映させるには、3つのやり方があります。

1つ目は、インラインのstyle属性に書き込む。
2つ目は、head内のstyle要素に書き込む。
3つ目は、外部にCSSファイルを作成して、読み込む。

という感じです。

今回はテキストの色を赤にしてみます。

それぞれ見ていきましょう。

CSSをインラインのstyle属性に書き込む
head内のstyle要素に書き込む
外部にCSSファイルを作成して、読み込む

CSSをインラインのstyle属性に書き込む

まずは元になるHTMLのコードです。

下記のコード内の<p>タグは、パラグラフ（段落）を表します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストをCSSで飾りつけるよ</title>
  </head>
  <body>
    <h1>テキストが表示されます。</h1>
    <p>このテキストの色を変えたり、サイズを変えたりします。</p>
  </body>
</html>

デフォルトの黒いテキストが表示されていますね。
ではインラインのstyleにCSSを書き加えてみましょう。

<p style="color: red">
  このテキストの色を変えたり、サイズを変えたりします。
</p>

<p>タグの中に、style=”color: red” という記述を加えてみました。
ブラウザを再読込すると。

無事に色が変わっていますね。

ちなみに、style=”color: red” の代わりに style=”color: #ff0000″ としても同じく赤になります。
#の後に、赤赤緑緑青青の並びで、0からFまでの16進数で色を調整できます。いわゆるRGBというやつです。

さて、次は、head内のstyle要素に書き込んでみましょう。

head内のstyle要素に書き込む

最初の基本形のHTMLの<head>タグ内に、<style>タグを追加してその中にCSSを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストをCSSで飾りつけるよ</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>テキストが表示されます。</h1>
    <p>このテキストの色を変えたり、サイズを変えたりします。</p>
  </body>
</html>

これでも先程と同じように、パラグラフ内のテキストが赤くなります。

先ほどと違って、p {〇〇} という記述が増えていますね。

この場合の p は、セレクターと言って、そのCSSが適用される対象を指定しています。
例えば p の代わりに h1 を指定すると、

h1 {
     color: red;
   }

見出しが赤くなります。

複数の要素を指定することもできます。
その場合はカンマを使います。

h1, p {
        color: red;
      }

色を変えたりするだけじゃなく、CSSではたくさんのことができますので、いろいろ調べてみてください。

最後は、外部にCSSファイルを作成する方法です。

外部にCSSファイルを作成して、読み込む

まず、CSSファイルを作成します。

拡張子を.cssにすれば、CSSファイルです。

ここでは、style.cssというファイルをindex.htmlと同じディレクトリに置いておきます。

style.cssの中身を編集していきます。

ここでは、先程<style>タグの中に書いたものと同じコードを書きます。

現時点でのindex.htmlはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストをCSSで飾りつけるよ</title>
  </head>
  <body>
    <h1>テキストが表示されます。</h1>
    <p>このテキストの色を変えたり、サイズを変えたりします。</p>
  </body>
</html>

style.cssはこちら。

h1, p {
  color: red;
}

ブラウザでindex.htmlを開くと

まだCSSは反映されていませんね。
index.html側で、style.cssを読み込む必要があります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テキストをCSSで飾りつけるよ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>テキストが表示されます。</h1>
    <p>このテキストの色を変えたり、サイズを変えたりします。</p>
  </body>
</html>

<head>タグ内に<link>タグを追加しました。

rel属性は、読み込むファイルの関係性を指定します。
CSSはスタイルシートなので、stylesheetと記載します。

href属性は、読み込むCSSファイルの場所を指定します。
index.htmlと同じディレクトリにあるので、style.cssでOKです。
例えば、仮にcssフォルダの中に入っていれば、css/style.cssと入力します。

このあたりは、別途絶対パスとか相対パスとかで調べてみてください。

では、ブラウザを再読み込みしてみましょう。