今までの話を総括してサイトを創ると、なんとも味気ないサイトになってがっかりしている方も多いのではないでしょうか？

それもそのはず、これまでは見栄えを一切気にせずひたすら文書を論理構造化してきましたから。

ちなみにこのサイトもスタイルシートを指定しないとこうなります。no CSS(新しいウィンドウで開くことをお勧めします)

スタイルシートとは、この要素はこういう風に表示するといった情報を記述したファイルのことです。

ここではその中で最も使用されている、CSSの説明をします。

このサイトのスタイルシートを見ていただくと分かるように、なんだか複雑怪奇なファイルに見えます。

ある程度の規則を知っているとそうでもないのですが、知らないうちはどうしようもないので、その"ある程度の知識"に絞って説明します。

まだ皆さんはスタイルシートを何のために使うのかが分からないかもしれません。

ただ単に面倒なことを増やしているだけのように見受けられるかもしれませんが、そうではないのです。

例えば、このサイトに別のスタイルシートを適用したサイトを見てください。

このサイトとの変更点はスタイルシートのみです(印刷用&やっつけ仕事のスタイルシートなので色々と変ですが・・・)。

このように、スタイルシートを変更するだけでデザインを簡単に変えることが出来るようになります。

これはサイトの保守を考えるととても大きな利点となります。

副次効果として、HTML文書内に余計な修飾系タグが無いおかげでHTML文書がすっきりし、文書の修正も簡単になります。

更にHTML文書に直接見栄えを記述した場合は同じ見栄えに関する記述を何度もしなければいけないため、ミスを起こしやすくなりますが、スタイルシートを使用すれば見栄えはまとめてスタイルシートに記述できるためにそういったミスが起こりません。

しかもスタイルシートを使用することでサイトに統一感が生まれ、見やすいサイトとなります。

では少しだけスタイルシート(CSS)の文法を説明します。

CSSとは、上でも言いましたが現在最も使用されているスタイルシートです。

CSSの全てをここに書こうと思っても、著者の知識不足もありますが、それよりもCSS自体の奥の深さが深すぎて書ききれませんので、興味をそそられた方は各自調べてみてください。

セレクタは、HTMLのどの要素に対する見栄えの情報なのかを指定する部分で、一番の基本形は要素名(bodyとかpとかstrongとか)を記述します。

要素にclass属性を記述し、値を指定した場合はそのclassに対しての見栄えの情報の指定として".(ドット)"を使用します。

要素にid属性を記述し、値を指定した場合はそのidに対しての見栄えの情報の指定として"#"を使用します。

要素名をスペースで区切って指定すると入れ子になった要素の見栄え情報の指定が可能です。

要素名を",(カンマ)"で区切って指定すると、複数の要素の見栄え情報を一度に指定できます。

これは例を見てもらったほうが分かりやすいでしょう。

/* body要素内の文字色を赤に設定 */
body { color:red; }

/* <div><pre>hoge</pre>piyopiyo</div>        */
/*      ~~~~~~~~~~~~~~~ココ                  */
/* div要素内のpre要素の背景色を#ffeeffに設定 */
div pre { background-color:#ffeeff; }

/* class="weak"とした要素の文字色を灰色に設定 */
.weak { color:#888888; }

/* ul要素の中でclass="link-navi"           */
/* と設定されている要素の文字色を白に設定  */
ul.link-navi { color:white; }

":(コロン)"などは説明していませんが、それでもかなりこのサイトのスタイルシートが読めるようになったのではないでしょうか？

CSSでブロック要素の余白を設定するためにはmarginとpaddingが存在します。

marginは要素の外側の余白、paddingは要素の内側の余白を設定します。

これは分かりにくいので、以下のようなスタイルシートを自分のサイトに適用してmarginとpaddingの値を弄ってみるといいでしょう。

p {
    border-style:solid;
    border-width:medium;
    border-color:#0000FF;
    margin:1em;
    padding:1em;
}

HTML文書はp要素を最低連続2つ以上含んだもの(<p>〜</p><p>...</p>みたいな感じの文書)にしてください。

CSSで使用できる絶対的なものから相対的なものまで単位はいくつもあります。

勿論設定する値に応じた単位を選ぶ必要がありますが、それでも何種類かから選ぶことが出来るのがほとんどです。

絶対的な単位よりも相対的な単位のほうが好ましいのですが、印刷用のCSSなどを作成する場合は絶対的な単位が必要不可欠となります。

ここでは、CSSで使用できる主な単位を軽く紹介します。

単位	意味
em	現在のm一文字分を表す相対単位
%	現在のブロックに対する%を表す相対単位
cm	1cmを表す絶対単位
mm	1mmを表す絶対単位
in	1インチを表す絶対単位

CSSの全ての設定項目なんて正直覚えていられません。

そういうときに役立つのが作成支援ソフトです。

そう多くは知りませんし、気に入ったものが少なかったのでここでの紹介は次のソフト1本に絞ります。

名前はStyleNoteで、開発は中断したままのようですが、このソフトはかなり使いやすいです。

使い方は直感的に分かりそうなのでここでは省きますが、1つだけ注意しておくと、このソフトでHTMLを書こうと思わないことです。

このソフトはCSS用に特化されており、HTMLはかなりおまけ感が強いので、HTMLエディタには別のものを使用すると良いでしょう。

著者はHTML作成用にはSakura Editorというソフトを使っていますが、このソフトはHTMLエディタではなく、汎用エディタです。

StrictなHTMLを書く場合にはHTMLに特化した機能があるエディタより、こういったエディタのほうがやりやすい場合が多いです。

しかもキーマクロ機能も付いていますので、行をはさむようなマーク付けがとても楽です。

HTML形式のコメントや一行コメント("// 〜")も本来記述可能なのですが、FireFoxではこれらのコメントをうまく処理できないようなのでCSSでのコメントは"/* 〜 */"形式のものを使ったほうが良いでしょう。