HTMLとCSSで作るウェブサイト作成入門

CSS(３)HTMLでのCSSの使い方

動画解説を見る

　HTML文書内で、CSSをどのように使えば良いでしょうか。その方法は、(1)HTMLヘッダー内に埋め込む、(2)外部ファイルから読み込む、(3)タグに埋め込む、があります。

●HTMLヘッダー内に埋め込む

　CSSをHTMLで使う方法は、まず、HTMLのヘッダー内、つまり、<head>〜</head>の間に埋め込むという方法です。ブラウザは、HTML文書を読み込む際に、ヘッダー部分に記載されるCSSを読み込んで、「このHTMLでは、○○のタグは、△△という形で表示するんだな」と解釈し、その通り表示します。
　書き方は以下の通りです。<head>〜</head>の間に、<style>〜</style>タグを入れ、その中にCSSを記述しています。CSSの意味は、サンプルCSS内のコメント/*〜*/を確認して下さい。
　ただ、大規模なウェブサイトや、メンテナンス性を考慮してきちんと構築するなら、次の「外部ファイルから読み込む方法」を使います。

[HTMLサンプル]
<html>
<head>
<title>ERG理論</title>
<style type="text/css">
/*見出しタグh1の文字を紺色の太字に*/
h1 {
    color: navy;
    font-weight: bold;
}
/*段落タグpの文字色を青に*/
p {
    color: blue;
}
</style>
</head>
<body>
<h1>生存(Existence)欲求</h1>
<p>生命の維持や、安定した生活を求める本能的な欲求</p>
<h1>関係(Relatedness)欲求</h1>
<p>他者から愛され、受け入れられ、認められたいという欲求</p>
<h1>成長(Growth)欲求</h1>
<p>自ら発展し、なるべきものになりたいという欲求</p>
</body>
</html>

●外部ファイルから読み込む

　HTMLでCSSを使う場合に、最も推奨されるのは、外部ファイルから読み込むという方法です。大規模なウェブサイトと構築する場合や、メンテナンス性も考慮して、しっかりとサイトを構築する場合には、必ずこの方法で構築するべきでしょう。上記のようにHTML文書のヘッダー部分に書き込む方法では、そのCSSは、そのHTML文書にしか適用できませんが、CSSを外部ファイルとして定義すれば、複数のHTML文書でそのCSSを共有することができます。
　基本的な使い方は、CSSファイル(ファイル名.css)を準備し、HTMLファイルでそれを読み込む、という形です。以下のサンプルを確認して下さい。

[HTMLサンプル]　※同じフォルダにあるCSSファイルdesign.cssを読み出すHTML
<html>
<head>
<title>ERG理論</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<h1>生存(Existence)欲求</h1>
<p>生命の維持や、安定した生活を求める本能的な欲求</p>
<h1>関係(Relatedness)欲求</h1>
<p>他者から愛され、受け入れられ、認められたいという欲求</p>
<h1>成長(Growth)欲求</h1>
<p>自ら発展し、なるべきものになりたいという欲求</p>
</body>
</html>

[CSSサンプル]　※テキストエディタで作成しdesign.cssとして保存
h1 {
    color: navy;
    font-weight: bold;
}
p {
    color: blue;
}

　このサンプルをブラウザで表示すると、HTMLヘッダーに埋め込む場合のサンプルと同じ結果となります。HTMLヘッダー内に埋め込まれていたCSSを、外部ファイルdesign.cssというファイルに保存し、HTMLで読み込んでいる状況をよく確認して下さい。

　ところで、このような外部のCSSファイルは、複数読み込むことが可能です。例えば、CSSファイルを、「ウェブサイト全体の共通スタイルを定義するCSSファイル」と、「そのページのみで利用するスタイルを定義するCSSファイル」を分けて作成し、前者はすべてのHTMLファイルで読み込み、後者は個々のHTMLファイルごとに読み込む、ということができます。

[HTMLサンプル]　※kyotsu.cssとkobetsu.cssを読み込むHTML
<html>
<head>
<title>ERG理論</title>
<link rel="stylesheet" type="text/css" href="kyotsu.css">
<link rel="stylesheet" type="text/css" href="kobetsu.css">
</head>
<body>
<h1>生存(Existence)欲求</h1>
<p>生命の維持や、安定した生活を求める本能的な欲求</p>
<h1>関係(Relatedness)欲求</h1>
<p>他者から愛され、受け入れられ、認められたいという欲求</p>
<h1>成長(Growth)欲求</h1>
<p>自ら発展し、なるべきものになりたいという欲求</p>
</body>
</html>

[CSSサンプル1]　※共通CSSファイルkyotsu.css
h1 {
    color: navy;
    font-weight: bold;
}
p {
    color: blue;
}

[CSSサンプル2]　※個別CSSファイルkobetsu.css
h1 {
    color: red;
}

　このサンプルをブラウザで表示するとどうなるでしょうか。HTMLサンプルでは、kyotsu.cssをまず読み込み、その後に、kobetsu.cssを読み込んでいます。kyotsu.cssは、先に見たサンプルと同じく、h1タグの文字色をネイビーに設定しています。これに対し、kobetsu.cssは、h1タグの文字色を赤色に設定しています。このように、同じタグ(セレクタ)に異なる設定をした場合、後に設定されたものが有効となり、このHTMLファイルをブラウザに表示すると、h1タグが付けられた箇所は文字が赤色になります。つまり、基本的な設定は共通のCSSファイルで定義しておいて、差分のみを個別のCSSファイルで定義する、という使い方ができます。

●タグに埋め込む

　CSSは、タグに埋め込んで使うこともできます。しかし、推奨される使い方ではありません。次のサンプルをご覧下さい。

[HTMLサンプル]
<h1 style="color: navy; font-weight: bold;">生存(Existence)欲求</h1>

　このように記載すると、「生存(Existence)欲求」という文字列が、紺色の太字になります。しかし、別の<h1>タグの部分をやはり紺色の太字にしたければ、その<h1>タグにも「style="color: navy; font-weight: bold;"」を指定する必要があります。つまり、一つ一つのタグに個別にCSSを設定しなければなりません。こうした使い方は、言うまでもなく非効率で、CSSの意義に反するものです。ですので、このような使い方は、決して推奨されませんが、ピンポイントで、このタグだけ急いでCSSを適用する必要がある、という場合にだけ利用するようにしましょう。

 　 　
　
　
　
SPONSORED LINK
　

SPONSORED LINK