スタイルシートとは、HTMLで書かれたwebページの見栄えを決定するもの？HTMLよりも細かく見栄えを設定でき、更に一括で管理できるため楽。例えば、自分の管理するwebページ群全部の背景色を一度に変えるといった作業もスタイルシートを使っていれば簡単。
スタイルシートの書き方はいくつかあり、HTMLのタグ中に、style=""などと書いたり、HTMLソース中の<head>〜</head>の間に書いたり、外部ファイルに書いたりする。スタイルシートを読み込み、解釈し、webページに反映する人はインターネットエクスプローラ、ネットスケープ、ファイアーフォックスといったブラウザ。
例えば、文字の色を変え、大きさを変えたりするだけならば、<font color="red" size="6" >変えたい文字</font>と書けばよいが、文字の背景が青で、中身が赤で、文字の大きさを細かく指定したいといった場合は、以下のように書く。
HTMLタグのみで<font color="red" size="6">ここの部分</font>の見栄え変更。<br> スタイルシートで<span style="background-color:blue; color:red; font-size:2.3em;">ここの部分</span>の見栄え変更。<br>
| 表示結果 |
|---|
HTMLタグでここの部分の見栄え変更。 |
HTMLでは、文字の大きさを大きくしたい場合上記のように、<font>タグのsize=""のところに数字を書くと、その数字に応じて大きさが変わる。しかし、1〜7の整数しか指定できず、細かい大きさの変更や、超絶でかい文字を書いたりすることは出来ない。
一方、スタイルシートを用いれば、細かい見栄えの設定、細かい大きさの設定が出来る。上記の例では、font-sizeのところに2.3emを指定した。これは文字の大きさを2.3倍くらい(?)にするという意味。ここを3emとか10emとか123emとかにすれば、めっさでかい文字にすることが出来る。また、パーセント(%)で指定したり、ピクセル単位(px)で指定したり、センチ(cm)とかミリ(mm)とかでもいける。また、font-size:large;のように、キーワードで書いてもよい。詳しくは、
上記の例は以下の様に書くことも出来る。こっちの書き方は、可読性は低いが、拡張性に富み、汎用性があり、便利っぽい。
<html>
<head>
<style TYPE="text/css">
<!--
span { background-color:blue; color:red; font-size:2.3em; }
-->
</style>
</head>
<body>
スタイルシートで<span>ここの部分</span>の見栄え変更。
<span>ここの部分</span>も変わる。
</body>
</html>
| 表示結果 |
|---|
スタイルシートでここの部分の見栄え変更。 |
この例では、<span>タグを用いたが、他の<font>タグとかにスタイルを指定してもよい。（つーか、タグなら何でもよい？）すなわち、以下のように書いてもよい。
<html>
<head>
<style TYPE="text/css">
<!--
font { background-color:blue; color:red; font-size:2.3em; }
-->
</style>
</head>
<body>
スタイルシートで<font>ここの部分</font>の見栄え変更。
<font>ここの部分</font>も変わる。
</body>
</html>
ただし、上記例では、文書中で<span>タグを、すべての部分で色が変更されてしまうため、不便なときがある。そんなときはタグのclass属性を用いる。詳しくは、下記の「まとめて細かくスタイルを指定」を参照。
前述の、自分の管理するwebページ群全部の背景色を一度に変えるといった作業を行うには、外部ファイルにスタイルシートを書き、それをすべてのページで読み込ませる。詳しくは、下記の「スタイルシートを外部のファイルから読み込む」参照。
古いブラウザを用いると、ブラウザ間のスタイルシートの解釈が異なったり、ブラウザにバグがあったりして、思い通りの見栄え/表示にならないときがあるらしい。でも、簡単なページを作るなら、最近のブラウザで見ることを想定した場合、あまりブラウザ間の違いとか、バグとかは気にしないでいいのかも？（勘。）なぜなら、自分のページをインターネットエクスプローラで見ても、Debianの（？）Epiphanyとか、Iceweaselで見ても、大きく変わらないため。
自分の管理するwebページ群全部の背景色や、見栄えを一度に変えるといった作業を行うには、スタイルシートをHTMLの<head>部に書くのではなく、他のファイルにスタイルシートのコード部（？）のみ書き、それをwebページから読み込ませる。
具体的な方法は次のとおり。例えば、スタイルシートのコードの部分を別ファイルに以下のように保存する。拡張子はたいてい.css。
| ファイル名: style.css |
|---|
body { background-color: black;}
span { background-color:blue; color:red; font-size:2.3em;}
/* ここはコメント。 */
|
このファイルをwebページ群全体の見栄えを決定するスタイルであるとして、それぞれのwebページから読み込ませる。実際には、それぞれのwebページのHTML中<head>部に<link rel="stylesheet" href="style.css">のような行を書く。こうすれば、style.cssの2行を変更するだけで、webページ群すべての背景や、文字色が変わる。
例えば、test.htmlというページから、同じディレクトリにあるstyle.cssというスタイルシートを読み込むには、以下のように書く。
| ファイル名: test.html |
|---|
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> 外部のスタイルシートを読み込み、<br> <span>ここの部分</span>の色変更。<br> さらに、<span>ここの部分</span>もかわる。<br> </body> </html> |
| 実行結果 |
|---|
外部のスタイルシートを読み込み、 ここの部分の色変更。 さらに、ここの部分もかわる。 |
すなわち、スタイルシートを外部から読み込ませるには、以下のようなタグを<head>部に書けばよい。
<link rel="stylesheet" href="スタイルシートのファイルパス">
文書の一部分の色などを変えたいときなどは、タグ中のstyle属性（？）を用いて、以下のように変える。
<div style="color:blue; font-weight:bold;">ここの部分が、青字で太字になる予定。</div> <span style="color:red; font-weight:bold;">ここの部分</span>は、赤字で太字になる予定。<br> <div>ここの部分は、別に普通。</div>
| 表示結果 |
|---|
ここの部分が、青字で太字になる予定。 ここの部分が、赤字で太字になる予定。 ここの部分は、別に普通。 |
ちなみに、blueの部分は、#0000ffとRGB表記（？）で書いてもよい。同様に、redは#ff0000と書いてもよい。すなわち、以下のように書いても実行結果は同じ。
<div style="color:#0000ff; font-weight:bold;">ここの部分が、青字で太字になる予定。</div> <span style="color:#ff0000; font-weight:bold;">ここの部分</span>は、赤字で太字になる予定。<br> <div>ここの部分は、別に普通。</div>
例えば、文書中の<span>タグで囲った文字をすべて青字で太字にしたい場合は、以下のように書く。
<html>
<head>
<style TYPE="text/css">
<!--
span {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>
<span>ここの部分が、青字で太字。</span><br>
<div>ここの部分は、別に普通。</div>
<span>ここの部分も、青太字。</span><br>
</body>
</html>
| 表示結果 |
|---|
ここの部分が、青字で太字。 ここの部分は、別に普通。 ここの部分も、青太字。 |
同じタグでも、場合によって違う振る舞いをさせたいときは、タグのclass属性を用いる。例えば、文書にある複数の<span>タグのうち、一部の<span>タグによって囲まれたの文字を青字にしたい場合は、以下のように書く。
<html>
<head>
<style TYPE="text/css">
<!--
div.blue-bold {
color: blue;
font-weight: bold;
}
div.red-1 {
color: red;
}
-->
</style>
</head>
<body>
<div>ここの部分は、別に普通。</div>
<div class="blue-bold">ここの部分が、青字で太字。</div>
<div class="blue-bold">こっちも、青字で太字。</div>
<div class="red-1">こっちは、赤字。</div>
</body>
</html>
| 表示結果 |
|---|
ここの部分は、別に普通。 ここの部分が、青字で太字。 こっちも、青字で太字。 こっちは、赤字。 |
class属性を用いると、タグにまとめてスタイルを指定できが、タグのid属性を用いると、ある一つのタグにスタイルを指定できる。しかし、idの値は一つのタグに一つというように、一対一で対応させねばならない。よって、複数のタグに同じidを振ってはならない。id属性で出来ることは、class属性でも出来るかも？一方、id属性で出来ないことも、class属性で出来るかも？すなわち、id属性によるスタイルの指定って必要あるんだろうか？とりあえず、id属性によるスタイルの指定は以下のよう。
<html>
<head>
<style TYPE="text/css">
<!--
#elm-001 {
color: blue;
}
#elm-002 {
color: red;
}
-->
</style>
</head>
<body>
<div id="elm-001">ここは青字。</div>
<div id="elm-002">ここは赤字。</div>
</body>
</html>
| 表示結果 |
|---|
ここは青字。 ここは赤字。 |
例えば、<div>と<span>タグなど異なるタグでも、同じclass属性を持つタグならば、そのタグに囲まれた部分を同じスタイルにすることができる。以下のようにする。
<html>
<head>
<style TYPE="text/css">
<!--
.blue-bold {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>
<span>ここの部分は、別に普通。</span>
<div class="blue-bold">ここの部分が、青字で太字になる予定。</span><br>
<span class="blue-bold">こっちも、青字で太字になる予定。</div>
</body>
</html>
| 表示結果 |
|---|
ここの部分は、別に普通。 ここの部分が、青字で太字になる予定。 こっちも、青字で太字になる予定。 |
同じタグでも、タグの包含関係によって、スタイルを変えたいときの書き方を示す。例えば、<div>タグが<span>タグを内包したとき、<span>タグで囲まれた部分を赤くしたい場合、すなわち、「<div>とりあえず<span>この部分</span>を赤くしたい</div>」場合、以下のように書く。これを状況依存セレクタというらしい。
<html>
<head>
<style TYPE="text/css">
<!--
div sapn {
color: red;
}
-->
</style>
</head>
<body>
<div>とりあえず<sapn>この部分</span>を赤くしたい</div>
しかし、<sapn>この部分</span>は赤くならない
</body>
</html>
| 表示結果 |
|---|
とりあえずこの部分を赤くしたい
しかし、この部分は赤くならない
|
例えば、<div>または、<span>タグで囲まれた部分を、まとめて同じスタイルにしたいときは、以下のようにする。これをグルーピングというらしい。
<html>
<head>
<style TYPE="text/css">
<!--
div, span {
color: blue;
}
-->
</style>
</head>
<body>
<span>ここの部分が、青字になる予定。</span><br>
<div>こっちも、青字になる予定。</div>
</body>
</html>
| 表示結果 |
|---|
ここの部分が、青字になる予定。 こっちも、青字になる予定。 |
例えば、<div>タグのクラスがblue-1のものと、<span>タグのクラスがblue-2のものと、<p>で囲まれた部分を、まとめて同じスタイルにしたいときは、以下のようにする。
<html>
<head>
<style TYPE="text/css">
<!--
span, div.blue-1, p.blue-2 {
color: blue;
}
-->
</style>
</head>
<body>
<span> ここの部分が青字。 </span><br>
<div class="blue-1"> こっちも青字。 </div>
<p class="blue-2"> こっちも青字。 </p>
<span class="blue-1"> ちなみに、ここの部分も青字。 </span><br>
<span class="blue-2"> ここの部分も青字。 </span><br>
<div> しかし、こっちは青字にならない。 </div>
<div class="blue-2"> こっちも青字にならない。 </div>
</body>
</html>
| 表示結果 |
|---|
ここの部分が青字。 こっちも青字。 こっちも青字。 ちなみに、ここの部分も青字。 ここの部分も青字。 しかし、こっちは青字にならない。 こっちも青字にならない。 |
例えば、<div>タグのclassがblue-1のものと、<div>タグのclassがblue-2に内包された<span>タグのクラスがblue-3のものと、<p>で囲まれた部分を、まとめて同じスタイルにしたいときは、以下のようにする。
<html>
<head>
<style TYPE="text/css">
<!--
div.blue-1, div.blue-2 span.blue-3 {
color: red;
}
-->
</style>
</head>
<body>
<div class="blue-1">ここの部分が赤字。</div>
<div class="blue-2">ここの<span class="blue-3">この部分</span>が赤字。</div>
<span class="blue-3">ちなみに、ここの部分は赤字にならない。</span><br>
<div class="blue-2">ここの<span class="blue-2">この部分</span>も、赤字にならない。</div>
<div class="blue-1">しかし、<span class="blue-2">この部分</span>とか、ここら辺は全部赤字。</div>
</body>
</html>
| 表示結果 |
|---|
ここの部分が赤字。 ここのこの部分が赤字。 ちなみに、ここの部分は赤字にならない。 ここのこの部分も、赤字にならない。 しかし、この部分とか、ここら辺は全部赤字。 |
例えば、<div>タグに囲まれた部分は赤字だが、<div>タグが内包する<span>タグの中は青字にしたいときは、以下のようにする。
また、<style TYPE="text/css">タグ内におけるスタイルの設定の優先順位をあげるには、"! important"を書く。通常は、<style TYPE="text/css">タグ内での設定よりも、style=""で設定したスタイルのほうが優先順位が高い。すなわち、style=""によって上書きされる。
<html>
<head>
<style TYPE="text/css">
<!--
div {
color: red;
}
span {
color: blue;
}
b {
color: blue ! important;
}
-->
</style>
</head>
<body>
<div>ここは赤字だが、<span>ここは青字で</span>ここは赤字。</div>
<div>ちなみに、ここは赤字だが、<span style="color: green;">ここは緑字で</span>ここは赤字。</div>
<div>さらには、ここは赤字だが、<b style="color: green;">ここは青字のままで</b>ここは赤字。</div>
</body>
</html>
| 表示結果 |
|---|
ここは赤字だが、ここは青字でここは赤字。 ちなみに、ここは赤字だが、ここは緑字でここは赤字。 さらには、ここは赤字だが、ここは青字のままでここは赤字。 |
例えば、<div>タグに囲まれた部分は赤字だが、class属性がblue-1の<div>タグに囲まれた部分は青字というようにしたいときは、以下のようにする。
<html>
<head>
<style TYPE="text/css">
<!--
div {
color: red;
font-weight: bold;
}
div.blue-1 {
color: blue;
}
-->
</style>
</head>
<body>
<div>ここは赤字かつ太字。</div>
<div class="blue-1">ここは青字かつ太字。</div>
</body>
</html>
| 表示結果 |
|---|
ここは赤字かつ太字。 ここは青字かつ太字。 |
とほほさんのページによると、H1 { color:red; } を「H1タグにスタイルを指定する」と言ってはいけないらしい。よって、本おぼえがきでは、「H1要素に任意の属性を指定する」ことを「H1タグにスタイルを指定する」と定義する。