★備忘録→ > 01DOCTYPE宣言 > 02META情報 > 03SCCの記述 > 04JavaScriptの記述 > 05 > END
０３CSSスタイルシート記述例
《CSSスタイルシート記述例》
（１）スタイルシート記述例
（２）要素に直接指定
（３）外部スタイルシートの指定
（４）外部スタイルシート（メディアタイプ）の指定
（５）固定・優先・代替スタイルシートの指定
END
《CSSスタイルシート記述例 》
スタイルシートの記述には、いくつかの方法があります。
<head>～</head>内に直接スタイルシートの定義を記述する方法、各要素に直接指定する方法、<link>を使って外部スタイルシート指定する方法の記述例を紹介します。
（１）スタイルシート記述例
（２）要素に直接指定
（３）外部スタイルシートの指定
（４）外部スタイルシート（メディアタイプ）の指定
（５）固定・優先・代替スタイルシートの指定
（１）スタイルシート記述例
サンプルコード（<style>要素使用）
HTML
<html>
<head>
<style type="text/css">
p {
color: #333333;
font-size: 10pt;
}
</style>
</head>
<body><p>本文</p></body>
</html>
（２）要素に直接指定
サンプルコード（<style>要素に直接指定）
HTML
<html>
<head>ヘッダ</head>>
<body>
<p style="color: #333333;">xxxx</p>
<p style="font-size: 1em; color: #777777;">xxxx</p>
</body>
</html>
（３）外部スタイルシートの指定
サンプルコード（外部スタイルシートの指定）
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>本文</body>
</html>
（４）外部スタイルシート（メディアタイプ）の指定
サンプルコード（外部スタイルシート（メディアタイプ）の指定）
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="example1.css"
media="all" />
<link rel="stylesheet" type="text/css" href="example2.css"
media="screen, tv" />
<link rel="stylesheet" type="text/css" href="example3.css"
media="print" />
</head>
<body>本文</body>
</html>
（５）固定・優先・代替スタイルシートの指定
サンプルコード（固定・優先・代替スタイルシートの指定）
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="example1.css" />
<link rel="stylesheet" type="text/css" href="example2-base.css"
title="base" />
<link rel="alternate stylesheet" type="text/css"
href="example2-alt.css" title="alt" />
</head>
<body>本文</body>
</html>
RSSフィード