CSSゼミ

チーフ：小出順平　／　サブチーフ：伏見俊彦，迫田岳志　／　指導院生：上浦二郎

■ INDEX

■ CSSとは？

CSS(Cascading Style Sheets)の略名で，一般的にはスタイルシートと呼ばれ，WEBページ上の「見栄え」を定義するための新しい技術です．「HTMLは本来文書の意味だけを定義するべきで，文書の見栄えは定義するべきではない．見栄えはHTMLではなく，スタイルシートで記述しよう」というのが開発の理由です．

HTMLの標準化を進めるW3Cが1996年12月にCSS1(Cascading Style Sheets, Level 1)を勧告し，IE(Internet Explorer)3.0とNN(Netscape Navigator)4.0がこれの一部機能をサポートしました．また，両者はこのスタイルシートとJavaScriptなどを組み合わせ，ダイナミックHTMLという技術にまとめ，公開しています．

ここでは，W3C勧告のCSS1を中心に，まだ標準化の完了していない「ポジショニング」や，IE4.0独自仕様の「フィルタ」などをあわせて説明していきます．詳細の仕様に関しては下記のサイトなどを参照してください．

CSS1の仕様書(W3C勧告)
http://www.w3.org/pub/WWW/TR/REC-CSS1
CSS2の仕様書(W3C勧告)
http://www.w3.org/pub/WWW/TR/REC-CSS2
CSS1仕様書の日本語訳(どら猫本舗)
http://www.doraneko.org/webauth/css1/
Positioning(W3Cワーキングドラフト)
http://www.w3.org/pub/WWW/TR/WD-positioning
Super Style Sheets Reference(ZSPCさん)
http://www.zspc.com/

■ CSSのメリット

スタイルシートを使用することのメリットには次のようなものがあります．

1：見栄えを一度に指定できます
すべてのH1要素に<FONT COLOR=red>～</FONT>を指定してまわるよりも，スタイルシートで一度に指定した方が楽になります．外部ファイルで指定しておけば，より一層楽になります．

2：同じスタイルを沢山のページに適用するのに有効
一度スタイルシートを作ると，あとは全く飾りのないWebページを作っていくだけで，それら全てのページに同じ表示スタイルを簡単に適用することができる．また，沢山あるページも一度で変更可能なのでWebページの模様替えが簡単にできます．

3：読む人に優しいWebページ作りができます．
HTMLで凝ったページをデザインしようとすると，どうしても画像や表を使いすぎることになりがちです．ところがWebページではいろんな環境の人がWebページを見に来ることがあるので，画像を使いすぎると表示が遅くなり，見にくいページになってしまいます．スタイルシートを使うことで，画像や表の使いすぎを押さえることが出来るので，ページの表示を速くすることができます．

4：見栄えと意味を分離できます．
Webページを自動収集して情報データベースを作成したり，目の見えない人が音声ブラウザでWebページを読む場合など，見栄えがあまり重要視されないケースもあります．見栄えを別のページで記述することにより，不要な見栄え情報を読み込んでくる煩わしさを解消することができます．

■ ＣＳＳの基本構造



最初に，CSSを書くために必要な知識をまとめます．

CSSは①「どの部分で」②「何を」③「どうするか」という指定を好きな数だけ並べた形で表示します．①を「セレクタ」，②を「プロパティ」，③を「プロパティ値」と呼ぶ．書式は以下のようになります．

【書　式】

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

また，下記のようにセレクタやプロパティとその値を一度に複数記述することもできる（グルーピング）．

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

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

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


実際に例を以下に示す．スタイルシートを適用していない状態のHTMLソースと表示は以下のようになります．

<HTML>
<HEAD>

<TITLE>Sample</TITLE>
</HEAD>
<BODY>
<H1>sccゼミのサンプル</H1>
<H2>スタイルシートを使うとこのようになる</H2>
スタイルシートを使ってカッコイイWebページをつくろう！
</BODY>
</HTML>

【使用例】

H1 { color: #0000ff } /* カラーをブルーに設定 */
H1 { text-align: center } /* 行揃えを中央に設定 */
H2 { margin-right: 2em } /* 右マージンを２emに設定 */
BLOCKQUOTE { font-style: italic } /* 斜体で表示 */
BLOCKQUOTE { line-height: 1.5 } /* 行間を1.5倍に設定 */


H1, H2, H3 { color: green } /* カラーをグリーンに設定 */

P { color: green; font-size: 10pt } /* グリーンで10point に設定 */

BODY {
margin-top: 1em; /* 上マージン設定 */
margin-right: 2em; /* 右マージン設定 */
margin-bottom: 3em; /* 下マージン設定 */
margin-left: 2em; /* 左マージン設定 */
}

BODY { margin: 1em 2em 3em 2em } /* 上右下左のマージンを一度に設定 */


BODY { margin: 1em 2em } /* マージンを上下=1em、左右=2emに設定 */

　

■ CSSを適用する

スタイルシートをHTMLへ組み込むには様々な方法があるが，ここでは3つの方法を説明します．

・外部のスタイルシートへのリンク
・スタイルシートをHTMLヘッダーに組み込む
・タグ内にインラインで書き込む

以下この3つについて説明します．

■外部のスタイルシートにリンクする

外部のスタイルシートを読み込む場合，＜LINK＞タグを使って，外部にあるスタイルシートを参照します．この方法を用いることで1つのスタイルシートを複数のHTML文書に適用できるため，統一感のあるWebを作成することができ，また，1つのスタイルシートを変更することで一度に複数のHTML文書のスタイルを変更することができます．

【使用例】

<HTML>
<HEAD>
<TITLE>CSSゼミ</TITLE>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
</HEAD>
<BODY>
　　　・
　　　・
</BODY>
</HTML>

<LINK>タグを<HEAD>に置いく．上の例では，同階層下にある"style.css"というファイルを読み込んでいます．<TYPE>タグの"text/css"というのは，媒体のタイプを特定するのに使われ，Cascading Style Sheets　には，"text/css"が使われ，Cascading Style Sheetsをサポートしていないスタイル・シート・タイプをブラウザは無視します．

■スタイルシートを組み込む

スタイルシートをHTML本文のなかに<STYLE>タグを用いて組み込む方法です．この組み込みの方法を使うことによって，1つだけ変わったページを作成したりすることもできます．

【使用例】

<HTML>
<HEAD><TITLE>CSSゼミ</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
</HEAD>

<STYLE>タグは<HEAD>内に組み込む．旧いブラウザは，STYLEに気付かなくて，普通は BODYの一部と見て，その内容を見せてしまいます．これを防ぐにはSTYLE要素の内容を上の例の様にSGMLコメント内に入れて置きます（ <!-- comment -->）．

■タグ内にインラインで書き込む

インラインスタイルを使うとHTMLの中の好きなところにスタイルシートをその部分だけに適用することができます．書き方は<BODY>タグに中に<STYLE>属性を用いてインライン化する．

【使用例】

<HTML>
<HEAD>
<TITLE>CSSゼミ</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">ココにスタイルシートを適用したい文字列を書く</H1>
<P STYLE="background: yellow; font-family: courier">背景をyellowにして，フォントを指定しています．</P>
</BODY>
</HTML>

　

■ グルーピング

カンマ（,）を用いて，H1要素，H2要素の属性を一度に指定することができる．グルーピングを使用することで，要素をまとめて設定できます．

H1, H2 { color:red; }

また，セミコロン（;）で区切って，H1要素に対して複数の属性値を一度に指定することもできます．最後の属性値のセミコロンは省略することができます．改行は行っても行わなくてもよい．

H1 {
color:red;
background:yellow
}

　

■ 継承

ある要素が，別の要素に含まれる時，その属性が継承されることがあります．例えば，H1 { color:red; } と定義されている時，H1要素の color:red の属性がEM要素にも継承されて，「is」の部分も赤くなります．

<H1>The headline <EM>is</EM> important!</H1>

'EM'要素にカラーが指定されていなければ, 強調された"is"は, 親要素のカラーを継承します．つまり, それも青く表示されます．'font-family', 'font-size'などの他のスタイル特性も同様に継承されます．

"デフォルト"のスタイル特性を文書に設定するために, すべての可視要素を下位にもつ要素に対して特性を設定できます．HTML文書では, 'BODY'要素がこの機能を果たします．

BODY {
　color: black;
　background: url(texture.gif) white;
｝

たとえ著者が'BODY'タグを省略しても(文法には違反しない), これは動作します．それは, HTMLが欠けたタグを推定することによる．この例は, テキストカラーを黒に, 背景をある画像に設定する．もしその画像がなければ, 背景は白になります．

■ クラス

HTMLファイル内にまとめて指定する場合に，すべてのタグに対してスタイル設定を行いたくない場合は，適用範囲を選択することができます．
次の例は<P>タグでredクラスやgreenクラスを使用することを可能にします．

<HTML>
<HEAD>
<TITLE>テスト</TITLE>
<STYLE TYPE="text/css">
<!-- P.red { color:red; } P.green { color:green; }
-->
</STYLE>
</HEAD>
<BODY>
<P>これには適応されません</P>
<P CLASS="red">これはredクラスです．</P>
<P CLASS="green">これはgreenクラスです．</P>
</BODY>
</HTML>

タグ名に依存しないクラス名を指定することもできます．

.red { color:red; }
<H1 CLASS=red>これはredクラスです．</H1>
<P CLASS=red>これもredクラスです．</P>

IE5.0以降では，複数のクラスを重複して指定することができます．

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

<SPAN CLASS="red bold">赤い太字</SPAN>

　

■ 定義済みクラス

A要素にはいくつかの定義済みクラスを指定することができます．定義済みクラスはピリオド( . )ではなくコロン( : )で指定します．link, visited, activeはそれぞれ，通常のリンク，読み込み済みのリンク，クリックされた瞬間のリンクの状態を示します．hoverはIE4.0でサポートされたもので，マウスをその上に乗せた時のスタイルを指定します．

A:link { color:green; }
A:visited { color:blue; }
A:active { color:red; }
A:hover { color:red; } /* IEのみ */

その他にも次の定義済みクラスがあります．first-lineは最初の1行を，first-letterは最初の1文字を示しますが，IE3.0, NN4.0共にまともには使えないようです．

P:first-line { color:red; }
P:first-letter { font-size:200%; }

　

■ ID属性

クラスの代わりにIDを指定することもできます．クラスはスタイルの集合につける名前で，複数のタグに同じクラス名を指定することが可能です．しかし，IDはひとつのHTMLファイルで一度しか使ってはいけません．使い方は，#'を前置して指定してします．

#elm123 { color:red; }
H1#elm124 { color:green; }

<SPAN ID=elm123>あいうえお</SPAN>
<H1 ID=elm124>かきくけこ</H1>

IDは一意なので H1#elm124 の H1 を記述するケースはあまりありませんが，ひとつのスタイルシートを複数のファイルから参照することも考慮してか，クラス定義とのバランスをとってか，仕様上は記述できるようになっています．

ID属性を選択子として用いることによって, スタイル特性を要素ごとに設定できます．スタイルシートは文書構造を活用して設計されてきたましたが, この機能は, HTMLの構造要素の利点を用いることなく, 描画面にうまく表れる文書を, 著者が生成することを可能にします．スタイルシートのこの利用は, 推奨しません．

■ 状況依存セレクタ

<H1>～</H1>の中で使用される場合のみの，<EM>要素のスタイルを指定することができます．上記のグルーピングとは違ってカンマ( , )が無いことに注意してください．

H1 EM { color:red; }

<H1>あああ<EM>いいい</EM>ううう</H1>

次の例は，第1レベルの<LI>は青色で，第2レベルの<LI>は緑色で表示するようになります．IE3.0では正常に動作しますが，NN4.0では文頭の黒丸( ・ )しか色が変化しませんでした．

UL LI { color:blue; }
UL UL LI { color:green; }

■ コメント

/* と */ の間はコメントとして無視されます．自分で作ったCSSファイルにコメントを入れておくと後でみたときに便利なので入れる習慣をつけておくといいです．

H1 { color:red; } /* Red Color */

■ 優先順位

優先順位（カスケーディング順位）の概念は，複数のスタイルを指定するとどうしても競合が発生します，それらの衝突が生じてしまうことがあります．
それを防ぐために，スタイル設定の優先順位は、高い順で下記のようになります．

●スタイルシート出所による優先順位
1、インラインスタイル（タグに style="" の属性を記述方法）
2、エンベディングスタイルシート（HTML文の<HEAD>～</HEAD>の中で、<STYLE>～</STYLE>で囲んでスタイルを定義方法）
3、リンキングスタイルシート（HTMLとは別に作っておいたスタイルシートファイル（拡張子:css）をリンクさせる方法）
4、ブラウザの初期設定スタイル

●セレクタの詳細度による優先順位
各スタイル指定のセレクタの詳細度（重み）を計算して、その値が大きいものほど優先されます。その計算方法は

「詳細度」= (ID属性の数)*100 + (クラス属性の数)*10 + (要素名の数)*1

となります．

●位置による優先順位
スタイル指定で優先度が同じものは、単純に位置が後にあるものが優先されます．

●!important
スタイル指定で優先度が同じものは、単純に位置が後にあるものが優先されます．
! important声明の使用例は：

BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }

と指定するとrepeat-xが優先されます．

　

■ スタイルシートを外部ファイルで定義する（リンキングスタイルシート）

HTMLとは別に作っておいたスタイルシートファイル（拡張子:css）をリンクさせる方法で、指定は<link>タグで行う。
例えば、main.cssというスタイルシートファイルを使うとき、このようにする．

<link rel="stylesheet" href="main.css">

ちなみにcssファイルには、言ってみれば<style> タグの中身を書く。
この方式の利点は、複数のＨＴＭＬファイルでスタイルシート部分が共有できるため、ＨＴＭＬ文書の容量削減・作業効率アップにつながります．

■ スタイルシートの注意点

上記のように，使いこなすと便利なスタイルシートですが，いろいろ問題もあります．

●未対応のブラウザもある．
現在のIEやNNはcss対応ですが，まだスタイルシートをサポートしていないブラウザもあります．また，いろいろな理由からスタイルシート機能をオフにしている人も居ます．意味だけでなく，見栄えも大切にするページであれば，古いブラウザへの配慮も必要です．

●ブラウザによって動作が異なる．
IEとNNで動作が異なります．同じブラウザでもバージョンやWindows版とMacintosh版でも動作や見栄えが異なります．

■ ブラウザのバグや実装の違い

上記に書いたとおり，ブラウザやOSによってcssの実装がかなり違います．
大半のシェアをしめるwindows版のIEをターゲットにして，MacユーザやLinuxユーザを閉め出すのもいいかもしれません．
しかし，

NN では定義付けが中途半端なために指定が無視されたり、特定スタイル（日本語書体名）を指定したために他のスタイル指定も含めて全て無効にしたり、エラーが多発します．
そのようなエラーと呼ばれる実装の違いで，

・NNではBODY属性がテーブルに継承されない
・間隔の違い
・フォントの違い
・etc........

などなど沢山あります．この問題の解決方法の一つとして，JavaScriptを使う方法があります．

●JavaScriptによるリンキングスタイルシートの変更
スタイル指定で優先度が同じものは、単純に位置が後にあるものが優先されます．

<HEAD>
<LINK rel="stylesheet" type="text/css" href="style00.css">
<SCRIPT type="text/javascript">
<!-- if(navigator.appName=="Microsoft Internet Explorer"){ 　　　　　document.write('<LINK rel="stylesheet" type="text/css" href="styleIE.css">'); } else {(navigator.appName=="Netscape"){ document.write('<LINK rel="stylesheet" type="text/css" href="styleNN.css">'); } //
-->
</SCRIPT>
</HEAD>

とJavaScriptでクライアントの情報を読み込み，リンキングスタイルシートを変更する方法があります．JavaScriptの関数例は以下の通りです．

navigator.appName（クライアントのブラウザ名称をもってくる）
navigator.platform（クライアントのプラットフォームの判別：Windows="Win32"，Mac="MacPPC"）

ただし，JavaScriptの設定をOFFにしていた場合も考慮しなければなりません．

■ アクセシビリティ

アクセシビリティー
[accessibility]
利便性。交通手段への到達容易度．ある地点や施設への到達容易度。（大辞林第二版）

ユーザーが Web ページを対話的に操作するときには、アクセシビリティの問題が発生することがあります。たとえば、ユーザーは視覚に障害があるためにページの内容を見られないことがありますし、ページを対話的に操作できないこともあります．
アクセシブルなサイトは、使用しているブラウザ・解像度・設定や視力の良し悪しに関わらず、すべての利用者にとってアクセスすることが可能なことをさします．
　理解しがたい構造，視覚的にやさくない色使い，プラットフォームに固執するなどはさけ，HTMLの理解を深め，より良いサイトづくりに励みましょう！

■ 参考文献

・最新HTMLタグ辞典 / 古籏一浩著 / 東京 : 技術評論社 / 2000.3
・カスケーディング・スタイル・シート
http://www.htmlhelp.com/ja/reference/css/
・とほほのスタイルシート入門
http://www.google.com/search?sourceid=navclient-menuext&q=cache:http://tohoho.wakusei.ne.jp/wwwcss1.htm
・Cascading Style Sheets
http://www.zspc.com/stylesheets/css/index.html#B01


文責：小出淳平 / 伏見俊彦 / 迫田岳志