スタイルシートの記述   

 ブラウザがスタイルシートに対応したのは、IEでいえば3つ前のバージョン(IE3.0)からなので、5年も前からです。なかなかその意味が理解されなかったので、普及するのに時間がかかりましたが、今やスタイルシート無しではhtmlは作れません。スタイルシートは、ページのデザインやレイアウトなどを設定するもので、これまでのタグはデータの構造を定義するもの・表示を定義するものがスタイルシートと、役割分担がはっきりしてきました。これに伴い、タグの整理が進み、廃止が決まっているものもあります。

スタイルシートの記述は3通りあって、その一つがタグに埋め込んで使う「インライン形式」と呼ばれるものです。これが、従来のタグの表現と混乱し、分かりにくくなっているので、ここでは「インライン形式」から説明します。

インライン形式とは

<p>タグの中などに、オプションのように組み込んで使う。
  <p align=”center”>は、従来のタグのオプションです。
  これと同じように、スペースで仕切って入れます。
スタイルコマンドを示すために style=”   ” のように”に挟んで記述する。
””の中の書式は 属性1:値;属性2:値2; のようにコロンとセミコロンで区切る。

例: <p style=”line−height:140%”> ・・・・  </p>
 ””の中が一つなら、セミコロンは省略できる。line−heightは、改行の幅を示す。・・・の段落が、通常の1.4倍の高さで改行され、行間が空いて見やすくなる。更に、フォントサイズなどを指定すると
<p style=”font−size:12pt;color:#ff0000;font−weight:bold”>・・・</p>

 実際に上のように指定すると、このようになります。

これまでのタグ形式の表記では、このようになります。
<p><font color=”#ff0000” size=”12pt”><b> ・・・</b></font></p> 

インライン形式は、タグの使い方と似ているので、馴染みのある使い方ではあります。

<style>でまとめて表記する方法

実際の使い方としては、最も代表的な使い方で、便利な方法です。スタイルシートという名前の通り、ページ全体の書式を決められます。

<head>と</head>の中に定義する。
<style type=”text/css”> と </style>の間に記述する。
タグやクラスの名称 {     }の形に書く。
{ }内の記述法はインライン形式と同じ

タグに定義する場合の例

<style type=”text/css”>
  h1,h2  {font−weight;bold}  見出しタグh1とh2に同じ設定を定義する
  p   {line−height:140%;font−size:10pt}
</style>

このように定義すると、このページの中の<a>・<p>すべてに適用されるので、いちいち書く必要がない。<a>・<p>のスタイルを決めることができる。

タグの一部分だけに適用したいとき

p.high  {line−height:200%}  タグ名.クラス名の形式で、クラス名は任意の文字
p.low  {line−height:140%}
.blue   {background−color;blue}  タグ名を指定しない場合

のように定義すると、<p>・・</p>では何も設定されない。
<p class=”high”>や、<p class=”low”>のように使い分けができる。
タグ名無しの場合は、<p class=”blue”>や<td class=”blue>のように、異なるタグでもクラスを指定すれば使える。

特別な場合(疑似クラス)

a:link  や a:hover a:visited は、リンクの<a>タグに設定されるもので、これまでは<body>の中にオプションで設定されました。

a:link  {text−decoration:none}は、リンクのアンダーラインを表示しないスタイルです。
a:hover {background−color:#00ff00}は、リンク上にマウスが乗ったときの設定です。

スタイルシートの共有(別ファイルからの呼び出し)

スタイルシートの設定を、拡張子cssのファイルにまとめ、htmlの中にこれを呼び出すようにすれば、別のhtmlファイルと共有することができます。

<link rel=stylesheet href=”シート名.css” type=”text/css”> 
を<head></head>の間に記述します。シート名.cssに<style></style>の中身だけ書き出します。スタイルシートは、このように共有することが本来の使い方です。

スタイルシートを使う訳

フォントサイズや色の指定だけだったら、これまでのタグでも実現できる、わざわざスタイルシートを使わなくとも・・という理由でスタイルシートを遠ざけてきたきた人もいると思います。しかし、スタイルシートでないと設定できないことが多く、ページを見やすくするにはやはり覚えていくしかありません。他人のページのソースを見て、スタイルシートの記述と分かったら、コピーして使っていきましょう。行間をあける書き方など、使うと使わないとでは見栄えがかなり違います。
最初はインライン形式で試し、次にスタイルシートにまとめ、最後は別ファイルに書き出して、べー字全体で揃えていくようにします。タグのオプション表記が減り、すっきりしたソースにもなります。スタイルシートは辞典ができるほど沢山あります。こうした辞典を1冊は手元に用意しておきましょう。

例:タイトル・見出し文字の修飾

<h1>や<h2>で書くタイトルは、あまり見栄えがしません。boder−topやborder−leftなどの設定で<table>を使わなくともきれいな線囲みのタイトルが作れます。

h1 { color: #880000; font-size: 14pt; font-weight: bold;
border-left: 32 solid #00c0c0; border-right: 0 solid #00c0c0;
border-top: 0 solid #00c0c0; border-bottom: 6 solid #00c0c0;
margin-left: 16px; padding-left: 16px }

これは、ここのページのタイトルに使っているスタイルです。使うときは、<h1>・・・</h1>で使えます。同様な設定を<h2><h3>など作っておくと、スタイルを揃えた見出しが使えます。