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