HTMLへの組み込み方

※スタイルシートの種類を設定しましょう

<meta http-equiv="content-style-type" content="text/css">

※組み込み方いろいろ

※ブラウザで表示した時の見え方

どのやり方でも見た目は同じなんです♪

※ソースサンプル1(head内に記述)

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
.moji {
color: #ff33cc;
font-size: 10pt
}
-->
</style>
<title>CSSの組み込み方</title>
</head>
<body>
<p class="moji">どのやり方でも見た目は同じなんです♪</p>
</body>
</html>

※解説


※ソースサンプル2(直接BODY内に記述⇒インラインCSSといいます)

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>CSSの組み込み方</title>
</head>
<body>
<p style="color: #ff33cc;font-size: 10pt">どのやり方でも見た目は同じなんです♪</p>
</body>
</html>

※解説


※ソースサンプル3−1(外部CSSを利用するHTMLファイル[例:index.html])

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>CSSの組み込み方</title>
</head>
<body>
<p class="moji">どのやり方でも見た目は同じなんです♪</p>
</body>
</html>

※ソースサンプル3−2(外部ファイル[例:style.css])

<!--
.moji {
color: #ff33cc;
font-size: 10pt
}
-->

※解説

[ 黒※説明中のタグ 紫※省略可能なタグ 赤※変更可能 緑※文章など ]