スタイルシート(CSS)講座 トップ >> スタイルシート(CSS)デザインの基礎 >> ヘッダーという場所に定義する

ヘッダーという場所に定義する

インラインCSSは、1箇所だけに直接スタイルシートを定義する方法でしたが、
複数設定する場合など、
いちいち、1つずつ定義しなくては、ならないので、とても手間がかります。

そこで今回は、 スタイルシートをヘッダーに定義して使う方法を解説します。
これを、使えば、1つのページのみで利用する、スタイルシートを定義することができる ので、
かなり、手間をカットできます。

それでは、その方法を紹介します。

ヘッダー部分というのは、  <head> 〜 </head>  で囲まれた部分のことをいいます。
ヘッダーという呼び方は、一般的じゃないかもしれないので、
<head>要素と覚えておくと、いいかもしれません。



まず、<head>〜</head>で囲まれた、領域に、
<STYLE>属性 を書き込みます。(図のように、「TYPE=”text/css”」を忘れずに)
図では、H1という 基本セレクタ で、スタイルシートを定義してるので、
このページ内の、<H1> で囲まれた部分は、すべてこの定義が反映されます。

この方法は、Dreamweaverでサイトをつくっていると、勝手につくってくれるので、
お使いの方は、特に意識する必要はないですけども、

逆に勝手につくられてしまうので、ちゃんと管理しないと、すごいゴチャゴチャしてきます。

それから、1ページだけにスタイルシートを定義する方法ですから、
サイト全体を管理するには向かない方法なんです。

たとえば、新しいページをつくったとして、
<H1>でかこった部分は、赤色表示されません。

その新しいページで、<H1>を赤色表示したいのなら、
そのページで再び、このページでしたような定義をする必要があります。

・・・・でも、次に解説する「外部スタイルシート」をつかえば、
そんなお悩みも解消されていってしまうので、次のページはメチャ重要です。(笑)

<< インラインCSS

外部スタイルシート >>

<< スタイルシート(CSS)講座 トップ