けんしのページ

あなたが今使っているブラウザでこの上のタイトルに枠が付いて見えるでしょうか。見えるとしたらあなたのブラウザはCSS(Cascading Style Seet)に何らかのレベルで対応しています。スタイルシートはページに装飾をしたり使われる文字や色を指定するために使われます。

このサイトで使われているスタイル

例えばこのサイトでは以下のようなスタイルを使用しています。それぞれの例とスタイルの記述方法を示します。

H1: 見出し１

H2: 見出し２

H3: 見出し３

H4: 見出し４

H5: 見出し５

H6: 見出し６

h1,h2,h3,h4,h5,h6{
 border-style:solid;
 border-color:#0000c0;
 border-width:1px 1px 1px 10px;
 padding:2px;
 font-weight:bold;
 color:#000000;
 background-color:#ffffff;
}

h1{border-color:#0000c0;}
h2{border-color:#0030c0;}
h3{border-color:#0060c0;}
h4{border-color:#0090c0;}
h5{border-color:#00c0c0;}
h6{border-color:#00d0d0;}

a{
 text-decoration:none;
 font-weight:bold;
}

ul{
 list-style-image:url(images/dot_blue.gif);
}

dt{
 font-weight:bold;
 line-height:200%;
}

div{
 border-style:solid;
 border-color:#000000;
 border-width:1px;
 padding: 4px;
 margin: 4px;
}

span{
 color:red;
 font-weight:bold;
}

このような装飾は普通の HTML でできるものもあれば、できないものもあります。ですがスタイルシートの利点は可能な装飾が増えたという事では無く、もっと別のところにあります。

スタイルを一括で管理する

今までは文字に装飾をしたりフォントを変更したりする場合、それぞれのページで文字を選んで装飾やフォントを施してやる必要がありました。装飾を変更したり追加したりする度にサイトの一貫性を保つために全てのページを変更しないといけないとしたら、だれもサイトのスタイルを変更したいとは思わないでしょう。サイトのスタイルをなかなか変えられない、もしくは思いつくままに変えていって一貫性を失ってしまうのにはこういった理由があります。

CSS ではページ本体とは別に CSS ファイルというものを作成してそこでページのスタイルを定義します。

そしてそのスタイルを使いたいページのヘッダ(<head> の中）で以下のように CSS ファイルを参照します。

<link rel="stylesheet" type="text/css" href="main.css">

タグ名 {
 プロパティ名: 値;
 プロパティ名: 値;
 ...
}

というフォーマットで各 HTML のタグについてスタイルを指定して行きます。

これで全てのページに対して共通のスタイルを適用することができます。

CSS では各ページのヘッダでのスタイルを定義する方法も、タグに対して直接スタイルを指定する方法もサポートされています。ですがページの中で複雑なスタイル指定をしてしまうとそのページに含まれている情報とスタイル指定を分離することが困難になります。自分のページの情報としての価値を高めるためにも情報とスタイルの分離は重要です。世間では複雑なスタイル指定やスクリプトを組み合わせたダイナミックなページがもてはやされていますが、実はこの情報とスタイルの分離こそが CSS の重要なアイデアなのです。

HTML タグの意味

CSS が登場するまで、HTML だけでページのスタイルを整える様々な方法が試みられてきました。例えばページ全体をテーブルで囲んで段組を定義したりといった方法です。またそれぞれのタグの意味を理解していないために見栄えだけを整えるためにタグが間違って使われる事もありました。例えば文章をインデントするために <BLOCKQUOTE> を使ったり（これは引用のためのタグ）、字を大きく見せるために <H1> を使ったり（これは章の見出しのためのタグ）といった事です。

CSS を用いてサイト全体のスタイルを定義したとしても、それぞれのページでのタグの使い方が間違っていれば効果は半減するばかりか逆に分かりにくくなってしまいます。

私がこのサイトに CSS を適用する前に以下のような事を見直しました。

スタイルが指定されて見た目が変化してもページの体裁がおかしくならないことが重要です。

装飾は控えめに

私は今まで自分のサイトを派手に飾ることは避けてきました。それはページのソースに占めるスタイル指定やスクリプトの割合が肥大化してページの情報としての価値が相対的に下がる事、そしてページの見た目に占める文章の割合が下がって同じようにユーザーにとって見難くなる事、この2つを避けるためでした。

今回 CSS を採用したのは前述の通りスタイル指定を CSS ファイルとして分離できること、そして CSS をページをより見やすくするために使えると考えたからです。

そこで CSS を適用するときにもできるだけページが見やすくなるように、派手な装飾は避けるようにしました。

互換性の問題

また CSS でスタイルを指定する場合に重要なのはCCSを使えない、もしくは部分的にしかサポートしていないブラウザでも見られるようにする事です。またブラウザ間でスタイルの適用方法に違いがあり、最終的な見栄えが変わってくる場合がある事にも注意が必要です。例えば上にあげた例のうちいくつかは Netscape 4.x ではサポートされていません。これは CSS だけではなく、サイトを作成する場合にには気をつける必要があります。

つまりサイトの見栄えや動作を確認する場合、以下のような事に気をつける必要があります。

スタイルシートを用いればページに様々な装飾を施すことができます。しかし逆にページを見難いものにしてしまう場合もある事を忘れないことが必要です。

このページについてのご質問はこちらへどうぞ。
このページに用いられている3Dのロゴやボタンは全てGLlogoによってレンダリングされたものです。
このページはリンクフリーです。
著作権等についてはこちらをどうぞ。


	インデックス
	表紙 i-mode版作者紹介使い方解説ＨＰ管理 i-mode対応 CSS 待受画像冗談と嘘実話今週のツッコミ映画リンクダウンロード