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

nas

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

目次

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

<link href="style.css" rel="stylesheet" >
  • linkタグは、head部に記述します。
  • hrefは、外部のCSSファイルのURLを指定します。
  • relは、リンクのタイプです。スタイルシートなので"stylesheet"と記述します。
  • １つの外部のCSSファイルは、複数のHTMLファイルに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

 

２．内部でCSSを記述する

<style>
　CSSを記述
</style>
  • styleタグは、head部に記述します。
  • styleタグの間にCSSを記述します。
  • CSSは、sytleタグを記述したhtmlだけに適用されます。

コード

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

 

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

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

コード

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

 

HTML5で不要になったmetaタグ

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

<meta http-equiv="Content-Style-Type" content="text/css">

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

関連の記事

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

△上に戻る