JapanKnowledgeの作り方 その2

適切なタグをつけることで、よりきれいなページを作ることができる、と前回書いたが、今回はスタイルシートについて。

たとえば、文章中に引用文を入れる場合を考える。

<p>地の文 地の文 地の文 地の文 地の文 地の文 </p>
<p>引用文 引用文 引用文 引用文 引用文 </p>
<p>地の文 地の文 地の文 地の文 地の文 地の文 </p>

こういった構造になっていたとして、引用文にインデントをつけたい場合、このままだと引用文をくくっているタグが、地の文のタグと区別がつかないのでオリジナルな装飾をほどこすことができない。そこで利用するのが、クラス（class）である。

<p>地の文 地の文 地の文 地の文 地の文 地の文 </p>
<p class="citation">引用文 引用文 引用文 引用文 引用文 </p>
<p>地の文 地の文 地の文 地の文 地の文 地の文 </p>

こんな風に書いてあげると、同じpタグでもクラスが citation のもの、と区別することができる。

このようにタグを区別するためのやり方には class のほかに id がある。class とid の違いは、同じソース（HTML）の中に何度も書けるか、一度しか書けないか、である。class はいくつも指定できる。引用文のように、文章中に何度かでてくるかもしれないものには、class が適している。一方 id は、その名の通り、一回しか使えない。

だから、比較的大きなくくりに対して id を付ける場合が多い。ヘッダー、フッター、メニューなど。
そうすると例えば、ヘッダーのh2タグは大きい字にするけど、フッターのh2は普通の大きさにするといった装飾も、h2タグに特別な class をつけることなく簡単に実現できる。

話を、引用文に戻そう。

引用文の左側にインデントをつける、というのは次のように書く。

.citation {
    margin-left: 20px;
}

「margin-left：20px」とは、左側に20pxほどマージンを取ってください、という意味。簡単な英語がわかれば、HTML同様、読み取ることができる。右側を開けたければ「margin-right: 20px」という具合だ。「px」とはピクセルのこと。そして「citation」の頭についているピリオドだが、これは class であることを意味している。つまり「クラスcitationに、左マージンを20pxつけてください」ということだ。ちなみに id は「#」をつける。

さて、この「.citation ～～」なるものは、スタイルシートという専用のファイル、拡張子が css というファイルに書くのだが、まずは手近なサイトのソース（htmlファイルやcssファイル）をのぞいて、どんな風になっているかを見ることをおすすめする。