スタイルシートの定義方法

スタイルシートの定義方法について説明したページです。スタイルシートの定義について少し慣れてくると悩むと思われる点について説明し、最後にセレクタ、要素、プロパティ等の用語が何を示しているのか補足しています。

外部ファイルでのスタイルシートの適用

 スタイルシートをどこで定義するかですが、定義箇所は3箇所あります。1つ目が外部ファイルを読み込んで適用する方法です。

 外部ファイルではファイルに@charset "UTF-8";、又は@charset "Shift_JIS";等と文字コードを記述した後、定義を記載してファイル名.css等で保存します。一般的にcssディレクトリ配下等htmlファイルと違うディレクトリに配置します。

 html側では<head>と</head>の間に以下を記述して保存したスタイルシートを読み込むようにします。

<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="ファイル名.css">

 ファイル名.css部分は例えばcssディレクトリ配下に保存したのであればcss/ファイル名.cssと記述します。

 外部ファイルのスタイルシートはどのhtmlファイルにも2行書くだけで全ての定義が反映出来るため、これを基本に使うのがお奨めです。

 詳細は「トップページのヘッダー作成」をご参照下さい。

 尚、外部ファイルとしては<link rel=部分を複数行記述して複数ファイルを読み込む事が出来ます。複数行記述した場合で定義が重なった場合は後から記述した方が有効になります。このため、ホームページがカテゴリ分けされるような時に全体のスタイルシート、カテゴリ毎のスタイルシートを作って、全体としては統一しているものの、カテゴリ毎に違いを出す場合等に有効です。

html内のヘッダーでのスタイルシートの適用

 もう1つの適用方法がhtmlのヘッダーで記述する方法です。htmlの<head>と</head>の間に以下のように記述します。

<style type="text/css">
<!--
p {color: rgb(255,255,255);}
-->
</style>

 上記は<p>タグに対するテキストの色を指定しているだけですが、外部ファイルと同様の記述が出来ます。

 htmlのヘッダーに記述したページだけに適用されるため、このページだけのスタイルを指定する時に向いています。

タグで直接スタイルを指定

 html内のタグで直接スタイルを指定する事も出来ます。。

<p style="color: rgb(255,0,0);font-weight: bold;">赤の太字</p>

 上記は<p>タグに対してテキストを赤の太字で指定しており、<p>タグが閉じた時に無効になります。style=の後の"と"の間に定義しますが、定義方法は外部ファイルと同様の記述が出来ます。

 これを表示すると以下になります。

赤の太字

 このタグだけに有効な定義をする時に向いており、<p>タグ以外にも様々なタグで使えます。

 よくあるのがテキストの途中で色を変えたい場合です。htmlで以下のようにします。

<p>テキストの途中で<span style="color:red;">色を赤に</span>変えます。</p>

 上記は以下のように表示されます。

 テキストの途中で色を赤に変えます。

 <span>自体は何も変更しませんが、スタイルを変えるために利用します。色だけでなくフォントサイズを変更したり、通常の定義と同様に出来ます。又、idやクラス指定する事も可能です。

<p>テキストの途中で<span class="red">色を赤に</span>変えます。</p>
<p>テキストの途中で<span id="green">色を緑に</span>変えます。</p>

異なる定義箇所での定義の重複による上書き

 定義が重複していた場合、外部ファイル→htmlのヘッダーに記述したスタイル→<p>タグ等で指定したスタイルと上書きされます。

 外部ファイルで以下の定義をしたとします。

【外部ファイルで<p>タグ内の文字を青に定義】
p {
color: blue; /* タグで青 */
}

 htmlのヘッダーで<p>タグを紫に定義した場合の表示は以下のようになります。

【外部、head、タグでの優先順位】
<head>
※一部略
<style type="text/css">
<!--
p {color: purple;}
-->
</style>
</head>

<body>
<p>外部ファイルでpを青に指定しても紫になります。</p>
<p style="color:red;">headで紫を指定しても赤になります。</p>
</body>

 つまり、html内で指定すると外部ファイルの指定を上書きする事になり、各タグで指定するとhtmlのヘッダーで指定したものも上書きします。

 因みに、外部ファイルでcolorだけでなくbackground-colorと背景色も指定しており、html内ではcolorだけ指定した場合、colorだけが上書きされbackground-colorは上書きされません。このように重複した内容だけが上書きされます。

 イメージは以下の通りです。

スタイルシートの定義方法1

タグに定義

 外部ファイル、ヘッダー等どこで定義するかを上記で説明しましたが、次は何に対して定義するかです。

 タグに指定するのは上でも説明した通り、以下のように定義します。

p {color: red;}

 この場合、普通に<p>タグを使うと反映されます。

<p>赤で表示されます。</p>

 上記は<p>タグに定義していますが、他のタグでも同様に定義出来ます。

idに定義

 idは独自に名前を付けられる独自定義です。独自定義にスタイルを指定するためには#を付けて定義します。

#center {color: red;}

 この場合、htmlでid指定すると反映されます。

<p id="center">赤で表示されます。</p>

 idはhtmlの1ページ内で1回だけ使うための定義です。つまり、3つ広告を載せるために定義するのではなく、A社の広告を1つ掲載するための定義、B社の広告を1つ掲載するための定義と個別に作りたい場合に使います。

 3つの広告の定義をしたい場合はクラス分けを行い、これは広告用のクラスと定義します。

クラスに定義

 クラスは主として場合分けする時に使います。例えば文字を赤で表示したり、青で表示したり場合分けしたい時はスタイルシートで以下のように記述します。

.red {color: red;}
.blue {color: blue;}

 htmlでは以下のように記述して赤と青を場合分けします。

【クラス分けの記述例】
<p class="red">赤になります。</p>
<p class="blue">青になります。</p>

 上記は<p>タグで場合分けしていますが、クラスのいい所は1つの定義で全てのタグに対して場合分け出来る点です。つまり<p>タグでも<h2>タグでも同じクラスが使えます。

【様々なタグでのクラス分けの記述例】
<h2 class="red">赤になります。</h2>
<h2 class="blue">青になります。</h2>
<p class="red">赤になります。</p>
<p class="blue">青になります。</p>

 他にも例えば.thecenter {text-align: center;}と定義しておけば、必要な時にタグにclass="thecenter"を指定する事でtext-alignが有効なタグに限りますが、テキストをセンタリング出来ます。

 又、クラスは空白で区切って2つ以上適用出来ます。

.red {color: red;}
.blue {background-color: blue;}

【クラスを2つ指定するhtml例】
<p class="red blue">背景が青で文字が赤になります。</p>

 尚、以下のように矛盾する内容を定義して2つのクラスを適用したとします。

.red {color: red;}
.blue {color: blue;}

【矛盾したクラスを2つ指定するhtml例】
<p class="red blue">文字が青になります。</p>

 この場合は後に指定したクラスが有効になります。

 汎用的に使っているクラスがあり、たまに色を変えたい、背景色を変えたい等の場合は汎用的に使っているクラスと殆ど同じ定義で色だけ違うクラスをもう1つ定義しても可能ですが、クラスを2つ指定すると楽に出来ます。つまり、色指定だけしたクラスを別に定義し、htmlではそれを汎用的なクラスの後に記述する事で指定した色に変える事が出来ます。

 <p>タグだけに適用したい等限定する場合はスタイルシートで以下のように記述します。

p.red {color: red;}

 <p>タグでクラスredを指定した場合は赤になりますが、他のタグでクラスredを指定しても赤になりません。

【同じクラス指定でもタグで表示が異なるhtml例】
<p class="red">文字が赤になります。</p>
<h2 class="red">文字は赤になりません。</p>

id、クラス、タグでの定義の重複による上書き

 定義が重複していた場合、タグの定義→クラス→idと上書きされます。

 スタイルシートで以下の定義をしたとします。

【重複するスタイリストの定義】
#black {
color: black; /* 独自定義で黒 */
}
.green {
color: green; /* クラスで緑 */
}
p {
color: purple; /* タグで紫 */
}

 この場合、htmlでの定義と表示は以下のようになります。

【定義の優先順位】
<p id="black" class="green">黒になります。</p>
<p class="green">緑になります。</p>
<p>紫になります。</p>

 黒になりますの部分は<p>タグで紫、classで緑が指定されていてもidのblackで黒と指定されているため、黒になります。

 緑になりますの部分は<p>タグで紫が指定されていてもクラスが優先されて緑になります。

 紫になりますの部分はid、クラス共に使われていないため<p>タグの定義で紫になります。

 因みに、<p>タグでcolorだけでなくbackground-colorと背景色も指定しており、idやクラスではcolorだけ指定した場合、colorだけが上書きされbackground-colorは上書きされません。このように重複した内容だけが上書きされます。

 イメージは以下の通りです。

スタイルシートの定義方法2

強制優先

 上で説明した通り、以下はclassで緑の指定があっても黒になります。

<p id="black" class="green">黒になります。</p>

 これをクラス指定している緑で表示させる場合はスタイルシートで以下のように記述します。

.green {color: green !important;}

 !important指定する事で他の定義より優先させる事が出来ます。

入れ子

 タグに対して独自定義の中でだけ有効な指定をするためには#center等の後にタグを記述します。

#center p {color: red;}

 htmlの<div id="center">と</div>で囲まれた範囲の<p>タグだけ文字が赤になり、それ以外の場所で<p>タグを使っても赤になりません。

【タグに対して、独自定義の中だけで有効な指定】
<div id="center">
<p>赤になります。</p>
</div>

<p>赤になりません。</p>

 <div id="center">と</div>で囲まれている状態を入れ子と言います。

 独自定義に対して、独自定義の中だけで有効な入れ子を作成するためには#center等の後に独自定義を再度#を付けて記述します。

#center #main {color: red;}

 htmlの<div id="center">と</div>で囲まれた範囲の中の<div id="main">と</div>で囲まれた範囲の文字だけが赤になり、それ以外の部分は赤になりません。

【独自定義に対して、独自定義の中だけで有効なスタイル指定例】
<div id="center">
<div id="main">
赤になります。
</div>
赤になりません。
</div>
赤になりません。

 後はこの繰り返しです。例えば以下のような感じです。

#center #main p {color:red;}

 上記では<div id="center">と</div>で囲まれた範囲の中の<div id="main">と</div>で囲まれた範囲で<p>タグに対してだけ有効な定義になります。イメージとしては以下の通りです。

スタイルシートの定義方法3

 クラスも以下のように入れ子で使う事も出来ます。

#center p.red {color: rgb(255,0,0);}

 上記はidがcenterで囲まれた<p>タグでredをクラス指定した時だけ赤になります。p.redは入れ子ではないので「p」と「.red」の間に空白を付けない事に留意して下さい。

#center .red {color: red;}

 上記はidがcenterで囲まれた<p>タグでなくてもredをクラス指定すると赤になります。

 ポイントは入れ子の時だけ有効にする時はスタイルシートで空白を入れて連続で記述する事と独自定義だと#が付く事、クラスだと「.」が付く事です。

 入れ子の形式でスタイルを定義する使い方の例として、通常<p>タグの文字は黒を使うけど、あるボックスだけは背景が黒なので、このボックスの入れ子になっている場合だけ文字を白にする等、部分的に変えたい場合に利用します。

継承

 入れ子には継承があります。例えば親で文字の色を赤で指定していると子でも継承されて文字は赤になります。

スタイルシートの定義方法4

 フォントを指定していても同様です。このため、「フォントの変更」でも説明した通り、body {}等で指定しておくと一々入れ子の中で指定しなくてもページで統一したフォントや色にする事が出来ます。

 【重複するスタイリストの定義】と同じスタイルリストを使っても入れ子の場合は表示が異なります。

【入れ子の場合の定義の優先順位】
<div id="black">
<div class="green">
<p>紫になります。</p>
緑になります。
</div>
黒になります。
</div>

 既に説明した通り、タグと一緒にidやclass指定をするとタグの定義→クラス→idと上書きされますが、idやclass指定に囲まれた入れ子になっているからといってそれが優先される訳ではなく、タグで指定した内容等一番最後に指定した内容が優先されます。

 言い換えると、入れ子では親でidやclass指定していると継承されますが、子のタグに対する定義で上書きされます。当然ですが、その子のタグに対してidやclass指定されているとクラス→idと上書きされます。

 尚、文字の色やフォント等は継承されますが、幅(width)、外側の余白(margin)、内側の余白(padding)等、一般的に継承しない方がいいものは継承しません。背景色(background-color)も継承しませんが、デフォルトではtransparentと言って透明なので継承したように親の背景色で表示されます。

htmlのタグで直接スタイルを指定すると全ての指定を上書き

 タグで直接スタイルを指定すると、これまでの指定を全て上書きします。

【タグで直接スタイル指定のCSS例】
#black {
color: black; /* 独自定義で黒 */
}
#orange {
color: orange; /* 独自定義でオレンジ */
}
.green {
color: green; /* クラスで緑 */
}
p {
color: purple; /* タグで紫 */
}
【タグで直接スタイル指定のhtml例】
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="ファイル名.css">
<style type="text/css">
<!--
p {color: white;}
-->
</style>
</head>

<body>
<div id="orange">
<p id="black" class="green" style="color:red;">赤になります。</p>
<div>
</body>

 これまで説明した通り、外部ファイル、htmlのヘッダー両方で定義した場合、htmlのヘッダーが優先されてタグやid、クラスのスタイルが決まります。上記では<p>タグに対する定義は重複しているのでヘッダーの定義のwhiteで上書きされます。

 そのあとでid、クラス、タグの定義の順で優先度が高くなるためidのblackが優先されます。親のorangeの継承はされますが、左記で指定があれば上書きされるためidのblackが優先されます。しかし、タグに直接styleでredの指定があるため全て上書きされます。

 これは優先順位を説明するための極端な例です。通常は外部ファイルで指定し、このページだけはスタイルを一部変えたい時はhtmlのヘッダーで指定、idはページに1つの指定、クラスは場合分けする時に使う、タグにstyleで直接指定するのはここだけ赤で強調したい等一部に留めます。この通りの優先順位になっているので、これに従っていれば通常は余り意識しなくても上手くいくと思います。

補足:セレクタ、要素、プロパティ

 上で説明した定義方法には名前が付いています。

セレクタ {プロパティ:値;}

 例えば以下であればp部分がセレクタ、colorがプロパティ、redが値です。

p {color:red;}

 セレクタでpという要素を指定し、色を赤に定義しています。h2であればh2という要素を指定した事になります。

 以下であればセレクタでgreenというクラスを指定し、色を緑に定義している事になります。

.green {color:green;}

 以下であればセレクタにblueというidを指定し、色を青に定義している事になります。

#blue {color:blue;}

 htmlで以下のように記述すると、p要素に対してクラスgreenとidのblueが反映され、優先度により青になるという言い方が出来ます。

<p id=""blue" class="green">青になります。</p>

 入れ子で説明したようにセレクタを半角で区切って2つ以上記述した場合は子孫セレクタと呼びます。

#blue p {color:red;}

 上記ではp部分が子孫セレクタ部分でblueの子孫要素のpにだけ反映されるという言い方が出来ます。又、pの入れ子にもプロパティがcolorなので継承されると言えます。

補足:改行について

 ルールは以下のように改行すると分かり易くなります。

【改行するCSSの記述例】
#orange{
color: orange;
background-color:orange;
font-family:"Meiryo UI";
}

 しかし、以下のように1行で記述しても解釈されます。

【改行しないCSSの記述例】
#orange{color: orange;background-color:orange;font-family:"Meiryo UI";}

 改行がない分、ファイルサイズを小さく出来るメリットがありますが、分かりにくくなってしまいます。どちらでも大丈夫というのだけ覚えておいてよいと思います。

サイト関連1

ホームページ作成「スタイルシートの基本
  • このエントリーをはてなブックマークに追加