せっかく全世界に公開するのですから、かっこよく見栄えを繕いたいもの。
HTMLの文字の色を変えるといえば<font>が掲示板の投稿にも使えたりして一般的に浸透しています。
しかしHTMLとかを定める団体W3Cはこの<font>タグを使ってはいけないとしました。
箱庭さんのFONTの代わりにに詳しくわかりやすく書いています。
同じように<table>で見栄えを繕うことは嫌われています。
それは<table>は表を定義するタグであって見栄えを定義するタグではないのです。
極端な例を言うと、テキストを読み込んで合成音声で音を出す、音声ブラウザというものがあります。
通常上から下に読み込んでいくのですが、<table>を使ってレイアウトをすると機械にはどこからどう読んでいけばいいかわからないのです。
というわけで
テキストと見栄えを分離させるためにCSS(カスケードスタイルシート)が1999年に生まれました。
スタイルシートはタグだけの表現以上に表現力が高いので、スタイルシートを使っていない人は理論構造と見栄えの分離のためにも使うべきです。
ちなみにフレームも嫌われています。
いたずらに使ってるといかにも初心者っぽい上にいろいろな弊害を生むことになります。
HTML鳩丸倶楽部さんのフレームに意味はあるのかがフレームの問題点をわかりやすく指摘しています。
とりあえず習うより慣れろということでまずは書いてみましょう。
インライン型と埋め込み型と外部ファイル型がありますが、ここでは汎用性があり最も便利な外部ファイル型で行いたいと思います。
それではまずタイトルを青色にしてみましょう。
さっき作ったHTMLファイルと同じ場所にここでは仮にstyle.cssというメモ帳でも何でもいいのでエディタで作ります。
そして次のように指定しましょう。
h1{color:#0000ff;}
わかりますか？h1の色(color)を青(#000011)にしろ。という命令です。
つまりセレクタ｛プロパティ：値｝ということになります。
プロパティにはいろいろありまして、色を変えるcolorのほかに私の一番好きなborderがあります。
ボーダーは文字や段落等々に枠を指定することができます。
ついでにh2にも装飾しましょう。
h1{ color:#0000ff; border:2px solid #0000ff;}
h2{ color:#0000cc; border:1px solid #0000cc;}
ではここらへんで出力結果を見てみましょう
しかしその前にこのファイルをHTMLに適用させるために<head>タグに書き加えなければならないことがあります
これで準備完了です。
出力結果を見てみましょう
非常に変！いろいろ色を変えてみよう
スタイルシートについて詳しい説明とレクチャーをしてくれる親切なサイトはたくさんあります。
興味を引いたら是非チェックしてください。
特にお勧めなのがCYBER@GARDENさんです。
一からレクチャーしてくれています。そう、ここの講座の意味をなくすぐらい。
次回予定はアクセシビリティについてもう少し掘り下げたいです