ウェブデザインをスタイルシートでおこなおう！

スタイルシートを扱うにあたって知っておくべき事項をここで述べよう。

１．HTMLを理解すること。

HTMLをまったく知らないという方は、まずはHTMLの基礎を学習する必要がある。
CSS無しで簡単なページが作れる程度の知識は必要だ。
この基礎を知りたい人は、本館のウェブマイスタｰで学んでもらいたい。
CSSはタグの動作を定義する物であり、基本となるタグを知らなければ何もはじまらない。

２．ＣＳＳの書式。

CSSの次の書式で記述することになる。

セレクタ { プロパティー : 値 }

セレクタとは要素名、すなわちタグと覚えればいいだろう。
たとえば <h1> をCSSで操作したい場合、セレクタは h1 となる。
<table>ならば table である。

プロパティーとは、何を行うかの命令と覚えればいいだろう。
値とは、その命令で使う内容である。
たとえばh1要素の文字の色を白にしたいときは以下となる。

h1 { color : #ffffff }

h1要素の文字色(color)を白(#ffffff)にしろ、という意味である。

複数の要素を同じ設定にするとき、同じことを繰り返し書くのは面倒だ。
ことのきは、セレクタをまとめて書くことができる。

h1, h2, h3 { color : #ffffff }

では、プロパティーを複数指定する場合はどうなるか？

h1 { 
  color : #ffffff;
  font-size : 12px; 
}

このように、最後に　；(セミコロン)　を書いて複数行にまたがって指定する。

次に、同じ要素でも、さらに目的別に分けたいときもあるだろう。
たとえば、ある場所の p要素 の文字は白、またある場所の p要素 は黒にしたい。
その場合、使っている p要素 をクラス分けして使うことができる。
学校でたとえれば、p要素が生徒達であり、クラス分けを行うことと一緒だ。

CSSの書式はこうなる。

セレクタ.クラス { プロパティー : 値 }

『．クラス』が追加されただけである。
また、セレクタを省略して、同じクラスのあらゆる要素に適用することもできる。

.クラス { プロパティー : 値 }

そして、これを使用するタグにはこう記述する。

<セレクタ class="クラス">

たとえば p要素のクラス hehe が文字色白、hoho が黒とした場合。

p.hehe { color : #ffffff }
p.hoho { color : #000000 }

そして使用しているタグはこうなる。

<p class="hehe">この文字は白い</p>
<p class="hoho">この文字は黒い</p>

まだ他にも便利な書式があるが、とりあえずここまで知っておけば９９％問題ないだろう。

３．ＣＳＳの動作の仕組みを知っておこう。

ＣＳＳは、同じセレクタを複数書くことができる、同様にファイルも複数にわけられる。
複数同じセレクタが登場した場合、プロパティーの内容は上書きされる。
すなわち、最後に指定したプロパティーが有効となるわけだ。
たとえば、以下の指定ではどうなるだろうか。

p { color : #ffffff; font-size : 12px;}
p { color : #000000 }

一行目で、文字色と大きさを指定している。
２行目で、再び同じセレクタを定義している。
後から登場した物のプロパティーが上書きされるので、

p { color : #000000; font-size : 12px;}

こう書いた場合と同じ結果になる。
font-sizeは再定義していないので、そのまま前のを引き継ぐ。

ただ注意が必要なのは、大きさを決める値を再定義した場合だ。
相対値は絶対値を上書きしない。その直前の値をさらに掛け合わせてしまう。
たとえば、この定義をみてみよう。

p { font-size : 12px }
p { font-size : 130% }

一見、２行目は同じプロパティーで上書きしていて一行目を無視するかと思われる。
一行目は 12px と、絶対値で指定している。
ニ行目では、130% と、相対値で指定している。
この動作結果は、12px の 130% で表示される。

また、相対値は親要素の値からの相対値であるため、こんなことも起きる。
table を 130% に指定して、その中にこの p を使ったとしよう。
すると、130%の130%で表示という、とんでもない状態になってしまう。
よって、％を扱う時には十分注しよう。

よって、tableの文字の大きさを％で指定するのは厳禁である。でなければ、テーブルの中にテーブルを入れたとき、どうなるかおかわりだろう。
テーブルに限らず、ブロック要素で％を扱う場合は注意しよう。

４．背景色と文字色には十分に注意しよう。

これはCSSにとどまらず、htmlのみでページを作成した時にも当てはまる。
背景色を指定しないで文字色のみを指定したとする。
すると、背景色は見る人のブラウザの種類や設定により変わってしまう。
結果、文字がまったく読めない状態にもなりうる。
文字色を指定した場合は、必ず背景色も指定しよう。逆もしかりだ。
特に多いのが、背景を壁紙で埋め尽くすから背景色は要らないと言う人だ。
画像が読めこめなかったらどうだろうか？
サーバーの処理が遅くて、背景読み込みに時間がかかったらどうなるか？
特に後者になる場合が非常に多いので注意が必要だ。
初めてそのサイトに訪れる人は、背景の表示に時間がかかることを覚えておこう。

現在は問題視されることはあまり無いが、次の事も覚えておこう。
タグで背景を指定し、CSSで文字色を指定した場合やその逆。
CSSが使えないブラウザではどうなるか、おわかりいただけるだろう。

５．タグとは何か、クラスとは何かを理解しよう。

基本中の基本だが、理解が難しいところでもある。
中には、「うごけばいいじゃん」という人もいる。
しかし、本当によければ多くの人が従うはずもない。
でもこれから初めてＣＳＳをためす人には、理解できないのも無理も無い。
したがって、実践で使い慣れて、「何故」かを体感していけばいいだろう。
『最終的な効率のよさ』を考えた結果、こうなったと思えばいいだろう。
ごちゃごちゃほど効率の悪いものは無い。サイトが大きくなるほどその度合いが増す。

『タグ』、これは文章の意味を表す。　決してレイアウトを指定するためのものではない。
たとえば、 <h1> は大きな文字を指定ではない。見出し１を意味する。
実際のレイアウトは、ブラウザやＣＳＳの定義によって異なる。

『クラス』、クラスとは種別をあらわす。決して個人名称ではない。
よって、クラス名は通常使用目的を書く。
たとえば、メニューに使う場合、クラス名を『menu』にする。
メニューの文字色を赤に指定するだけだからって、『red』と指定するのは間違いである。
red はその時点での動作内容を指すにすぎない。
このクラスは、メニューに使うという意味を与えるべきであり。赤色にするという動作内容を与えるべきでない。
ただし例外的に、その動作意外に設定不能な場合はいいだろう。
たとえば、『赤』とう文字を赤色にする場合、他の色に変更することはありえない。
これは、動作内容とグループ種別が一致する特殊な例である。

ここで一つの問題がある。<font>を代表としたレイアウトを指定する目的にしか存在しないタグである。
これらは、CSSがまだ出現する前の苦肉の策で登場したタグである。
現在はCSSが存在するので、このタグを使う価値は無い。
使っても良いが、苦労するのは使う人だけ。というのを頭に入れておこう。
全ページに無数に散らばる<font>を変更するのと、CSSのたった一行を変更するのとではどちらが楽かを考えよう。

以上の全てを理解すれば、自由に簡単に思いのままのレイアウトが可能となる。
最初からフル導入は大変なので、少しずつ慣れながら導入していくといいだろう。
やがて、CSS無しにサイトを作るのが非常に面倒に感じることだろう。

では次のステップへ進もう！
＞実際にページを作る時の使い方はこちら
＞もっとＣＳＳの書式を知りたい人はこちら