スタイルシートを使う その１

いよいよスタイルシートについて説明していきたいと思います。

スタイルシートとは

スタイルシートはその名の通りホームページのデザインのスタイルを指定した文です。スタイルシートを用いると、表題のデザインを複数のページで共通にすることができる(例えばこのページの小見出しのデザイン)上に、箇条書きのマークを画像にしたり、マウスカーソルを乗せたときだけ文章がアンダーライン付きにしたりなど今までできなかったことも可能になります。スタイルシートはそれほど難しいものではないのですぐに覚えてしまいましょう。とりあえずこの章ではスタイルシートをどのようにして使うのかその３つ方法について説明しようと思います。

インライン指定

スタイルシートをインラインで指定する方法を説明します。
color:#5028ff　というのはテキストの色の指定を行います。このようにスタイルシートはタグの属性として指定することもできます。style属性は文を囲めるほとんどのタグに存在します。

まとめて記述

記述のstyle属性ではスタイルシートを適用したい箇所すべてに似たような文章を書かなければならず、あまりありがたみがありません。なので似たような文章を一括して扱う方法について説明します。
上の例ではスタイルシートの設定を<style>タグの中で行っています。このタグは通常<head>の中に記述します。そうすることでスタイルシートの設定がHTML文書すべてに有効になります。
<style>タグによるスタイルシートの設定は通常次のような形で行います

[適用させるタグ][適用させたいIDまたはCLASS] { スタイルシートの設定 }
つまり1行目では「<a>タグで囲まれた箇所は全て青っぽい色にする」という指定をしてるわけです。
しかし、これでは同じタグ同士に違うスタイルシートを適用させたいときに困ります。そこで特定のタグだけにスタイルシートを適用させることができます。style属性と同様に文章を囲めるほとんどのタグにclass属性を指定できます。2行目では<a>タグのclass属性がunderだった場合のみスタイルシートを適用させるという意味になります。東京大学のリンクにはclass="under"と指定してあるのでこのスタイルシートが適用されています。もしタグ指定の部分を省略すると4行目のようにすべてのタグに適用されます。
3行目では、:hoverとありますがこれはマウスがリンクの上にのった時に適用されます。
スタイルシート自体の説明は次章で説明することにします。

別ファイルに記述

さらにスタイルシートの指定を複数のファイルにまたがって行いたい場合は、<style>タグの中身を別ファイルに保存して複数のHTML文書からそのファイルにアクセスする、という方法があります。
まず、次のファイルを用意してください。
Mystyle.css
a {color:#5028ff;}
a.under {text-decoration:none;}
a.under:hover{text-decoration:underline;}
.English {font-family:cursive;font-style:italic;}
そしてスタイルシートを適用させる場合は次のようにします。
<html>
<head>
<link rel="stylesheet" href="Mystyle.css">
</head>
<body>
私の名前は東大太郎です。現在<a href="http://www.u-tokyo.ac.jp/" class="under">東京大学</a>に通っています。
<div class="English" align="right">sorry.this page is Japanese only.</div>
</body>
</html>
ここまで来るとスタイルシートのありがたみが分かってくると思います。このページも、表題やリンクに関するスタイルシートを別ファイルにまとめ、<link>タグでその指定をロードしているという形式をとっています。そうすることでaやh2と書いただけで自動的に飾りがつくし、逆に飾りを変えたくなったらスタイルシートを変更するだけでよいので楽です。
最後に付け加えておくと、複数のスタイルシート指定が重なった場合、優先順位は、インライン指定＞<style>＞<link>の順になります。つまり効果範囲が狭いところが優先されるということです。
スタイルシートでどのような指定ができるかについては次章で触れたいと思います。