1-2 スタイルシートの書式

スタイルシートをHTML文章に直接記載する際は、必ず<head> ~ </head>内で使用して下さい。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
■ ここに指定したい項目を書きます
-->
</style>

<title>ページタイトル</title>
</head>
<body>ここに本文が書かれます</body>
</html>

見本では<title>の上で書いておりますが、この下で記述しても構いません。但し、書く場所はどちらか一つに統一して下さい。

ちなみにメタタグの意味は <meta http-equiv=" (略)Shift_JIS"> で日本語を使用しますという宣言をし、 <meta http-equiv="(略)text/css"> で、このページにCSSを使用しますという意味の宣言をしております。

[ 関連事項 : HP-TIPS > HPの作り方 > META要素とは ]

1-2-1 セレクタ、プロパティ、値とは

この色の文字部分の書式は全て小文字の英数字で記入し、
<style(略)> ~ </style> というタグの中にセレクタ { プロパティ : 値 ; } という形で記述されます。 意味は 何処に { 何を : どうするのか ; } です。

<style type="text/css">
<!--
body { font-size: 10pt ; } /* 文字の大きさ */
-->
</style>

上記のように記述した場合、bodyの文字サイズは10ptになります。
プロパティ(上記の場合は「font-size」)はセミコロン(;)で区切れば複数指定出来ます。 (その際、改行をして見やすくすれば記述ミスを防げます)

1-2-2 CSSの中にコメントを記述する場合

/* コメント */  という形で書きます。この部分はスタイルシートには適用されませんので、管理者の覚え書きに使用出来ます。

1-2-3 小文字で書く

厳密にいうとセレクタ(上記の場合は「body」)を記述する場合、HTMLでは大文字でも構いませんが、XHTML(HTMLの親戚みたいなシステムだけど物凄く厳格な物)では小文字で記述するそうです。(間違え兼ねないのでどちらも小文字で書くことをお勧め致します)

1-2-4 おまけ

「<!--」 と 「-->」 はコメント化を意味するタグですが、古いブラウザでスタイルシートのソースがそのまま表示される事を防ぐ為に記述しております。(出来るだけ省かずに記入して下さい)。