超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ CSS 設定の方法 その2

2.ページ全体に適用する方法

この方法は、HTML ファイルのヘッダー部分(<head> タグで囲まれた部分)にスタイルを書き込みます。こうすることで、ファイル中の同じタグには全て同じスタイルが適用されることになります。
<h1> タグなどは1ページの中で、そう何回も使うことはないでしょうが、小見出しとして使う <h4> タグにスタイルを設定したり、同じ罫線を引きたい場合 <hr> タグにスタイルを設定しておけば、色や幅、長さなどを変えたいときの修正はヘッダー部分の一カ所だけで済みます。<p> タグや <div> タグにスタイルを設定すれば、段落の文字色や文字の大きさ、画面に対する位置なども統一することができます。

ページ全体に適用する方法の書き方はこのようになります。

<html>
<head>
<title>ページ全体に適用</title>
<style type="text/css">
<!--
div{
color:#ffa500;
font-size:50pt;
font-weight:bold;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div>王様の耳はロバの耳</div>
</body>
</html>

ブラウザで見るとこうなります。前ページの見本と同じですね。

画面です

ページ全体に適用する場合は、ヘッダー部分に <style> タグで囲んで記述します。こうすることによって、同一ページの全ての <div> タグにこのスタイルが適用されます。
type="text/css" は「スタイルを CSS で記述します」っていう宣言です。
次の <!-- については後で説明します。
スタイルの記述については見ての通りです。HTML タグ名を書いて、その後を{ }で囲みます。プロパティと値の書き方は、インラインで設定する方法と同じですね。プロパティ:(コロン)値;(セミコロン)です。空白は無視されますので見やすいように書いて下さい。
※ただし全角の空白を入れると、Netscape では、空白の後のプロパティが認識されなくなりますので注意して下さい。

<style type="text/css">
<!--
タグ{ プロパティ:値; プロパティ:値; プロパティ:値; }
-->
</style>

■HTML のコメント■
HTML で作った文書の中では、 <!-- と -->  で囲まれた全てのタグや文章は無視されます。したがって <!-- と -->  の間に記述されたものはブラウザには表示されません。この部分をコメントと言います。コメントの部分にタグの意味や記述の説明・内容などを書いておけば、後で修正するときにわかりやすくなります。
<style>〜</style> の間を <!-- と -->  で囲むのは、CSS に対応していないブラウザへの配慮です。ブラウザは知らないタグが出てきた場合はタグを無視して、テキストはそのまま表示します。したがって、CSS 未対応ブラウザでは <style> や </style> は表示されずに、そのなかのスタイル設定部分だけが表示されてしまうことになります。かっこ悪いですね。
ちなみに JavaScript なんかも同様で、未対応ブラウザに対応するためにコメントを使います。

■CSS のコメント■
CSS にもコメントを入れる方法があります。 /* と */ に囲まれた部分はコメントとして無視されます。コメントを記述しておけば、後で修正する時にわかりやすいですね。