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

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

目次

CSSを記述する場所

CSSを記述する場所は3つあります。

  1. link要素でCSSファイルを指定する
  2. style要素を作成しその中にCSSを記述する
  3. htmlの要素の中にstyle属性を追加しそこにCSSを記述する

1.link要素でCSSファイルを指定

link要素で外部ファイルを指定し、その外部ファイルにCSSを記述する方法です。
6行目は、link要素の中で外部の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行目で指定した、sytle.cssファイルです。
1行目の@charasetは、ファイルの文字コードを指定しています。

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

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

テスト1

テスト2

テスト3

2.style要素を作成しその中にCSSを記述

style要素を作成しその中にCSSを記述する方法です。
6行目から13行目までstyle要素を作成しその中に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>

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

テスト3

テスト4

テスト5

3.htmlの要素の中にstyle属性を追加しそこにCSSを記述

htmlの要素の中にstyle属性を追加しそこにCSSを記述する方法です。
8,9行目では、p要素の中に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>

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

テスト6

テスト7

テスト8

metaタグの記述

HTML4.01で必要だったheadタグ内の以下のmetaタグの記述はHTML5では不要です。
<meta http-equiv="Content-Style-Type" content="text/css">
このmetaタグは、デフォルトのスタイルシートの言語を指定していましたが、HTML5はCSSがデフォルトになっているためです。

関連の記事

CSSを適用する優先順序のサンプル
CSS スタイルの継承のサンプル(inherit)
カラーコードの一覧表(Webページの色)



△上に戻る