i-mode
Kenshi's Page
ホームMacintoshOpenGLThinkPadJavaダイビング水中デジカメ


インデックス

表紙

i-mode版

作者紹介

使い方
解説
HP管理
i-mode対応
CSS
待受画像
冗談と嘘

実話

今週のツッコミ

映画

リンク

ダウンロード

CSS

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

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

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

見出しに枠を付ける:

H1: 見出し1

H2: 見出し2

H3: 見出し3

H4: 見出し4

H5: 見出し5
H6: 見出し6
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 を枠付きのブロックにする:

DIV ブロック
div{
 border-style:solid;
 border-color:#000000;
 border-width:1px;
 padding: 4px;
 margin: 4px;
}

SPAN のフォントを赤にして太字にする:

普通の文字SPANの中の文字普通の文字

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

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

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

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

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

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

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

CSS ファイルの内容は上の例のように、

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

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

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

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

HTML タグの意味

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

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

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

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

装飾は控えめに

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

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

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

互換性の問題

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

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

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


コンテンツ: [ホーム] [Macintosh] [OpenGL] [ThinkPad] [Java] [ダイビング] [水中デジカメ]

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