CSSを記述する場所のサンプル

CSSを記述する場所のサンプルのサンプルです。

場所	１．外部のファイルにCSSを記述する
	２．HTML内部でCSSを記述する
	３．タグ内でCSSを記述する
参考	HTML5で不要になったmetaタグ

１．外部のファイルにCSSを記述する

外部のファイルにCSSを記述する場合、linkタグを使用します。
linkタグは、head部に記述します。
hrefは、外部のCSSファイルのURLを指定します。
relは、リンクのタイプです。スタイルシートなので"stylesheet"と記述します。
外部のCSSファイルは、複数のHTMLファイルにCSSを適用できます。

外部のファイルにCSSを記述するサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
    <link href="style.css" rel="stylesheet" />
    <style></style>
  </head>
  <body>
    <p class="t1">テスト1</p>
    <p class="t2">テスト2</p>
    <p>テスト3</p>
  </body>
</html>

6行目は、link要素の中で外部のCSSファイルを指定しています。

外部ファイル

@charset "UTF-8";
.t1{ 
    color:blue; 
}
.t2{ 
    background-color:Lavender;
}

6行目で指定した、sytle.cssファイルです。
1行目の@charasetは、ファイルの文字コードを指定しています。

上記コードの実行結果です。

テスト1

テスト2

テスト3

２．HTML内部でCSSを記述する

HTML内のhead部にstyleタグを記述しそこにCSSを記述します。
CSSは、そのhtmlだけに適用されます。

HTML内部でCSSを記述するサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
    <style>
      .t3 {
        color: red;
      }
      .t5 {
        background-color: Khaki;
      }
    </style>
  </head>
  <body>
    <p class="t3">テスト3</p>
    <p>テスト4</p>
    <p class="t5">テスト5</p>
  </body>
</html>

6～13行目は、styleタグで囲っています。その中にCSSを記述しています。

上記コードの実行結果です。

テスト3

テスト4

テスト5

３．タグ内でCSSを記述する

<タグ style="CSSを記述">

タグの中にstyle属性を追加しそこにCSSを記述します。
インラインスタイルといいます。
CSSは、style属性があるタグ内に適用されます。

タグ内でCSSを記述するサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSSのサンプル</title>
  </head>
  <body>
    <p style="color: Crimson">テスト6</p>
    <p style="background-color: PaleGreen">テスト7</p>
    <p>テスト8</p>
  </body>
</html>

8,9行目では、p要素の中にstyleタグを追加してCSSを記述しています。

上記コードの実行結果です。

テスト6

テスト7

テスト8

HTML5で不要になったmetaタグ

上記はHTML5で不要になったmetaタグです。

HTML4.01では、このmetaタグはデフォルトのスタイルシートの言語を指定していました。
HTML5では、CSSがデフォルトのスタイルシートになっているため不要です。