スタイルシートの考え方

 文字の情報にとっては、文字の形(フォント)や色が大切です。最近は設定方法が多彩になってきているので、細かく設定しているホームページがよくありますが、この設定にはかなり労力が必要です:文字のサイズと色は<FONT SIZE="2" COLOR="red"> とひとつのタグで済みますが、それほど簡単ではありません。さらに、太字やイタリックにするには、タグを2つ重ねなければなりません。
 しかも、タグを使って細かくスタイルの設定を行った場合は、ファイルがタグだらけになり、後で色を修正したりするのがとても大変です。もっと簡単な方法はないのでしょうか?

 このような要求から登場したのが「スタイルシート」です。スタイルシートを使用すると、あるタグに関し、文字のサイズや字形、色、行間隔などをセットで一度に指定することができます。さらに、クラスという「名前」を用いて区別して指定することで、同じタグに対して多彩なスタイルを設定できるので、とても便利です(クラスを用いると、異なるタグに対して同じスタイルを用いることも可能です)。たとえば、10ヶ所ある文字をある色に変える場合を考えてみましょう。タグを使用する場合は、10ヶ所のタグをすべて書き換えなければならないので、面倒で、変更漏れも起きます。一方、スタイルシートを使用する場合は、スタイルを設定している1ヶ所だけ修正すれば、すべてが一度に変わります。
 スタイルシートの便利さが次第に理解されるようになった結果、最近はスタイルシートを用いたHTML文書が増加しています。


スタイルシートの基本

 上の文章には、「スタイルシート」という言葉が5ヶ所出てきており、すべて色が赤で、太字になっています。こうするには、次のように書く必要があるはずです。
 <b><font color="red">スタイルシート</font></b>
 ところが、スタイルシートのおかげで、次のような記述で済んでいます。
 <font>スタイルシート</font>
 つまり、<font> タグに、「文字色は赤、太字」という設定をしているわけです。これは、このファイルのヘッダー部分に <style>というタグを置き、そこに次のように記述した結果です。この html ファイルのソースを見ると、ヘッダーに次のような部分があります。
<style>
  font       { color: #ff0000; font-weight: bold }
</style>
 ヘッダーにある <style> タグの内部に、まず設定したいタグ名(ここでは"font")を書きます。この部分を、セレクターと呼びます。
 続いて {  } の中に、そのタグにどのような性質を持たせたいのかという「宣言」を行います。宣言部は「属性」と「値」で構成され、両者の間を「 : 」で区切ります。この場合は、color 属性を #ff0000、つまり「赤」に設定し、続いて font-weight : bold で文字の太さを太字に設定しているわけです。色と文字太さのように、複数の属性に値を設定する場合は、その間を「 ; 」で区切ります。

クラスを用いる

 これまで、<font> タグにを「文字色は赤、太字」と設定した場合を説明してきました。ところが、この <font> タグは、文字色やサイズを変更する重要なタグです。たとえば青い文字を使用しようと <font color="blue"> と指定しても、 <font> タグに対して「文字色は赤、太字」と宣言しているため、青色でなく、<font color="blue">このように赤の太字になってしまいます!</font>。これでは困ります・・・

 この問題は、同じタグについて複数の設定ができるようにすることで解決できます。つまり、タグにオプションを設定し、そのオプション毎に色や字体をスタイルシートで設定するわけです。このために誕生したのが「クラス」です。試みに、この html ファイルに style1style2 という2種類のクラスを設定し、使い分けてみましょう。先の <font> タグのオプションとしてクラスを用いる方法もありますが、クラスの指定には <SPAN> タグを利用するのが普通です。このタグは任意の範囲をあらわすタグで、ブラウザの表示には全く影響がなく、もっぱらスタイルシートのために使用されています。
 クラスを設定するには、<style>タグの中でピリオドに続いてクラス名を書いた後、 {  } の中に性質を指定します。この文書では、次のようになっています。

  .style1    { color: #007fff; font-size: 140% }
  .style2    { color: #ff00ff; font-size: 90%; font-weight: bold }
 これがスタイル1、そしてこれがスタイル2です。

 元の文書は次のようになっています。

 これが<span class="style1">スタイル1</span>、そしてこれが<span class="style2">スタイル2</span>です。
 どう、便利でしょう?

スタイルシートについての追加説明

 写真と画像ファイルについて説明したこのページも、スタイルシートを活用しています。ページソースを見ればスタイルシートの便利さを実感できると思うので、参考にして下さい。この画像ページのスタイルシートは、次のようになっています。
<style type="text/css">
<!--
  .enl    { color: #ff00ff }
  .siz    { color: #00aa66; font-weight: bold }
-->
</style>
 これが、一般的なスタイルシートの書き方です。そこで、この書き方に関連して、次の点を追加説明しておきたいと思います。  スタイルシートを使用したい人は、本を買うか、使用法を説明しているホームページを見つけて、勉強して下さい。なお、各 HTML ファイルのヘッダーにスタイルシートを書くのではなく、スタイルシートの部分を別ファイルとして独立させ、ヘッダー部分にこのファイル名を指定しておく方法もあります。この方法を用いると、ひとつの CSS ファイルで多数の HTML ファイルに対して一度にスタイルを設定できるので、多数のファイルを提供する場合にとても便利です(この授業では、皆さんのホームページをチェックする関係上、スタイルシートはヘッダー部に書くようにしましょう)。
 これとは逆に、各タグのオプションとしてスタイルシートを書く方法もありますが、ファイルがとても複雑で大きくなるので、勧められません。実は、ワードで文書を作成し、「Webページとして保存」を利用してそれをhtmlファイルにすると、このようなファイルになります:普通に作成した場合の何倍もの大きさがあり、ソースファイルを解読するのが厭になるファイルが出来上がってしまいます。
ホームページ作成要領へ戻る
生活情報処理のページに戻る