スタイルシート(CSS)の種類

スタイルシートの使い方には 三つのパターンがあります。

例えばスタイルシートを使って背景を黒くして、ページ内の全ての文字の色を白くしたいとします。 次の三通りの方法があります。

style属性を使って直接書く

一つ目はBODY要素の開始タグ<body>にstyle（スタイル）属性というものをを使って直接タグに、 <body style="background-color: black; color: white;"> と書く方法です。 色を16進法で表すなら、<body style="background-color: 000000; color: ffffff;"> です。

スタイルシート（CSS）の書き方はこの次で説明しますが、 このタグからなんとなく、「background-color: black;」で背景を黒くしてるんだな、 「color: white;」で文字を白くしているのかな、ということがわかるのではないでしょうか。

style属性はBODY要素に限らず、ほぼすべての要素に使うことができます。

しかし、この方法では「おすすめできない」と説明したbgcolor属性とtext属性を使って 「<body bgcolor="#000000" text="#ffffff">」と書くのと変わらず、 わざわざスタイルシートを使うメリットがありません。

そこで次のような方法を使います。

CSSファイルを作る

まずエディタを開いて、

body {
	color: #ffffff;
	background-color: #000000;
}

と書き、「○○○.css」という形の名前で保存します。 ここではわかりやすく「style.css」として保存しました。 これだけではhtmlファイルには何も起こりません。

そこで、背景を黒くして、文字を白くしたいhtmlファイルを （ここではHTML講座から使っているindex.htmlを開いてください） 開いて、HEAD要素の中に、

<link rel="stylesheet" type="text/css" href="style.css">

と書いてください。 これでHEAD要素は以下のようになるはずです。

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="description" content="">
<meta name="keywords" content="html,てーこく">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

すると、BODY要素には直接なにも書いていないのに、背景が黒く、文字の色は白くなります。

このLINK要素はHTMLファイルからスタイルシート(CSSファイル)にリンクして、そのスタイルシートを HTMLに適用するために必要なもので、 詳しくは説明しませんが、
<link rel="stylesheet" type="text/css" href="style.css">
のタグのうち、rel="stylesheet" type="text/css"の部分はどんなときにも絶対必要で、 「href="style.css"」href属性はA要素のhref属性と同じく、cssファイルまでのパスを指しているという ことだけ覚えてください。

これなら各HTMLファイルにLINK要素を書いてCSSファイルにリンクするだけで、背景と文字色が変わります。

もし、色を変えたいと思ったら、HTMLファイルを一切開くことなく、CSSファイルを書き換えるだけで、そのCSSファイルに リンクしているすべてのHTMLファイルの色が変えることができます。

わざわざ一つ一つのHTMLファイルを開いて、bodyタグを書き直すのとどちらが楽なのかは書くまでもないと思います。

このように、デザインをHTMLから切り離すと、作る側としても非常に手間が省けるのです。

STYLE要素を使ってHEAD要素の中に書く

もう一つ、HEAD要素の中にSTYLE要素を使って書く方法もあります。 

<head>
（省略）
<style type="text/css">
<!--
body {
	color: #ffffff;
	background-color: #000000;
}
-->
</style>
</head>

しかし、1つ1つタグにstyle属性を使って書くよりはまとまってはいるものの、この方法もCSSファイルにリンクする方法とは違って、ファイル1つに つき、1つのスタイルシートを書かなくてはならないので、特別な事情がない限りは CSSファイルを作成して、HTMLファイルからLINK要素でリンクする方法を使うようにしましょう。

HOME