CSS(Cascading Style Sheet)はＷＷＷの規格を作っている団体、 W3C(World Wide Web Consortium)によって提唱されている フォーマティング規格です。CSSによってさまざまなレイアウト要素を少ない労力でWebページに加えていくことが出来ます。
効率的に作成するためにはつぎの三つの段階をふまえましょう。
基本的なタグだけを使って構造的にHTMLドキュメントを作成します。
例えば、<h1>〜<h6>,<p>,<a>,<ul>,<b>････などリファレンスブックの最初の項目にあるようなタグだけを使います。タグに余計なプロパティを設定する必要もありません。
この時点では背景の色、フォントのサイズや色、配置など、レイアウトのことは考えないようにしましょう。
こうしておけばCSSや拡張されたタグをサポートしていないブラウザでもきちんと読めるというメリットがあります。
その結果きれいなソースが書けます。出来の悪いホームページ作成ソフトのソースを見たことがあるでしょ、何がなんだかさっぱりわからんもんね。
またレイアウトばかりにはしり、つい内容のないページを作ってしまうのを未然に防いでくれます。(^^;
さてお待ちかね、CSSを使ってHTMLにレイアウトを加えていきましょう。
これには以下の4種類の方法があります
ある特定のHTML要素にスタイル属性を加えます。以下の書式のように、
書式
<要素名 STYLE="property:value;property:value;･･･">
例えば、以下のような記述があったとします。
<p>おいしそうな<b>赤い</b>リンゴだ</p>
この「赤い」というＢ要素の文字だけを赤くしたいとします。スタイルを使わなければ「赤い」という文字にもう一度font要素を加えることになりますね。これをＢ要素にスタイル属性を加えるという形で同じ効果が得られます。
<p>おいしそうな<b style="color:red">赤い</b>リンゴだ</p>
結果
おいしそうな赤いリンゴだ
このようにインラインスタイルの場合、スタイル属性をつけたその要素にしか効果は及びません。
HTMLファイルのHEAD要素の内容中に、STYLE要素としてまとめて宣言します。
インラインスタイルの場合は影響の及ぶ範囲は一つのタグの中だけでしたが、この方法では、同じセレクタ名を持つすべての要素に効果が及びます。
<html>
<head>
<title>CSS Sample</title>
<style type="text/css">
<!--
この部分にスタイル宣言文を書く
-->
</style>
</head>
<body>
</body>
</html>
<!-- -->で挟むのはstyleに非対応のブラウザに対する配慮です。これを怠ると非対応ブラウザではスタイルの宣言部分が普通のテキストとして表示されてしまいます。
一般的な書式 は以下の通りです。
selector { property : value ; property : value; ････}
セレクタ｛プロパティ：値 ；プロパティ: 値 ;････ ｝
セレクタとして使えるものとして、つぎの三種類のものがあります。
IDやCLASSの名前に使える文字はアルファベット（A-Z,a-z) 、数字(0-9) 、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)ですが、アルファベットと数字だけを使った方がいいでしょう。(ブラウザによって正確に認識されないことがあるので)
エレメント(要素)をセレクタとして使います。この場合、宣言された要素は、すべて同じスタイルになります。
例
ヘッダセクションのスタイル要素の記述
b{font-size:12pt;color:red}
ボディセクションの記述
<b>Sample</b>
結果
Sample
この場合、すべてのＢ要素が12ポイントの赤の文字の属性を持ちます。またＢ要素本来の属性も引き継がれ太字になります。
例）クラス「red1」に属するＩ要素の宣言例
ヘッダセクションに加える記述
<style>
<!--
i.red1{
color: red; /*文字色 赤*/
font-size: large; /*文字サイズ Large*/
font-weight: bold; /*強調文字*/
background: blue; /*背景色 青*/
}
-->
</style>
属性をずらっと並べたときに見やすいように行を変えてあります。このように書いても途中の改行、タブ、空白は一つの空白文字として読み飛ばしてくれます。(全角の空白は文字として認識されてしまいますから注意してください)
スタイル要素の中で /* */ で囲んだ部分は注釈行です。この中は好きなようにコメントが書けます。
例）ボディセクションの記述
<i class="red1">要素「i」のクラス「red1」です</i><br>
<i>ただの要素「i」です</i><br>
<b class="red1">要素「b」のクラス「red1」です</i>
要素にクラス属性を追加するには、開始タグの要素名の後に[class="クラス名"]と記述します。 注) class="name" の引用符は用いることを推奨されていますが、省略可能です。
結果) 要素「i」のクラス「red1」です
ただの要素「i」です 要素「b」のクラス「red1」です
宣言したスタイルの影響は「クラスred1のｉ要素」にしか及びません。本来の属性(イタリック体）は継承され、スタイルで宣言されたクラスの属性が追加されています。
「あれ、もしこの属性が衝突したらどうなるんだろう？」と疑問になりましたか？ この属性の衝突を調整するのがカスケーディングです。これは後で言及します。
「クラスという概念からすれば、一つのタグの中に幾つでもクラスを加えることが出来るの？」この疑問も正当です。もちろん特定の要素の中にいくつものクラスを設定することが出来ます。その場合空白文字で区切ります。しかし一番目のクラスのスタイルしか認識されないようです。
要素名を省略することのよって、そのクラス名のついたすべての要素に効果を及ぼします。クラス名の前にピリオドを付けたものをセレクタとして使います。
例）「comennt」という名前のクラスの宣言例
ヘッダセクションに加える記述
<style>
<!--
.comment{
color: blue;
font-size: medium;
}
-->
</style>
ボディーセクションの記述
<b class="comment">コメントNo1</b><br>
<i class="comment">コメントNo2</i>
結果
コメントNo1
コメントNo2
ID属性をセレクタとして使います。IDという性格上、特定の一つの要素にスタイルを施す場合に使います。例えばトップページの表題をレイアウトするとき等です。
#をID名の前に付けたものがセレクタとなります。
例)
ヘッダセクションの記述
#title1{
color: skyblue;
font-size: 20pt;
font-weight: 800;
font-family: serif;
text-align: center;
}
ボディーセクションの記述
<h1 id="title1">Headline-title1</b><br>
結果
一つのタグにしかスタイルを付けないという点ではインラインスタイルで書くのと一緒ですが、まとめてヘッドセクションに記述したり、外部ファイルに記述できるので、Webページの統一性や保守性があがります。
複数のセレクタを空白文字で区切って一つのセレクタとして宣言します。
例)
ヘッダセクションの記述
h3 i{color: red}
ボディーセクションの記述
<h3>Ｈ３要素です<i>Ｉ要素が追加されます</i>Ｈ３要素です<h3>
結果
h3要素の中にｉ要素が内包されている組み合わせを探して、その部分だけを赤にしています。 この例では要素と要素の組み合わせでしたが、ID属性やclass属性のセレクタを使った組み合わせでも出来ます。また、セレクタの数が二つ以上でも可能です。
例 ヘッダセクションの記述 #ex1 .clsred i{color: blue} ボディセクションの記述 <div id="ex1">わたしの <b class="clsred">なまえは <i>レインです </i> </b> </div>
結果
複数のセレクタが同じ属性を持っている場合には、セレクタ名をカンマで区切ってまとめて表記することが出来ます。
例 ヘッダセクションのスタイル要素の記述 h1{color:blue} h2{color: blue} h3{color: blue} これらをまとめて以下のように書けます。 h1,h2,h3{color: blue}
スタイルシートを別のファイルとして保存しておき、リンク元のファイルのヘッダセクションからそれをLINK要素を使って参照します。
書式
<link rel="stylesheet" type="text/css" href="mystyle.css">
ここではスタイルシート･ファイルにmystyle.cssというファイル名を付けています。
CSSファイルの内容は、selector{property:value;property:value;････}という形式のスタイルシートの宣言文を列記したものです。エディターで作成し、拡張子を[.css]にして名前を付けて保存します。
注) W3CのHTML4.0仕様書ではLINK要素にTITLE属性を加えて複数のスタイルシートから好みのスタイルを選択できる仕様になっていますが、今のところ(ＩＥ4.0では)サポートされていないようです。
サーバーがMIMEタイプ(text/css)をサポートしているかも確認してください。
外部のスタイルシートをSTYLE要素の@import属性を使い、ドキュメントに取り込みます。@importは必ずスタイルブロックの先頭に記述します。
例 ヘッダセクションに記述
<style type="text/css">
<!--
@import:url(mystyle.css);
h1{color:green}
-->
</style>
ある特定の要素の属性値が複数宣言されている場合、どちらの宣言が優先されるかを決めるのがカスケーディングです。
１．ローカルなスタイルシートが優先される
リンク要素によって参照されるスタイルシートよりリンク元のスタイルシートが優先される。またインポートされたスタイルシートよりインポートする側のものが優先される。
2．インラインスタイルは埋め込みスタイルより優先される。埋め込みスタイルの中では具体性の大きいセレクタが優先される。
まとめると優先順位の高い順に以下のようになります。
インラインスタイル＞ＩＤ＞クラス＞HTML要素
例
h6{color:black;font-style:italic;}
.clsgreen{color:green;}
#hd1{color:blue;}
<h6 class="clsgreen" id="hd1" style="color:red">Sample</h6>
<h6 class="clsgreen" id="hd1">Sample</h6>
<h6 class="clsgreen">Sample</h6>
<h6>Sample</h6>
結果
Sample
Sample
Sample
Sample
３．衝突していないテキストやフォント関連の属性のほとんどはそのまま引き継がれる。背景やブロックレベル、配置関連の属性のほとんど引き継がれない。
background(背景)は継承されない属性ですが実際には引き継がれているように見えます。これは要素のデフォルトの背景色が透過色であるため、要素の背景色を特に指定しない場合、要素の下にある背景が透けて見えるためです。
注）BODY要素の宣言でbackground-color を設定せずにbackground-imageに透過イメージを設定すると、ＩＥ4.0では背景は白く見えます(透過色の表示が白)が、ネットスケープ･ナビゲーター４．０では黒く(透過色の表示が黒)なってしまいます。忘れずに背景色の設定をしましょう。
スタイルシートをサポートしていないブラウザで見た場合でも、構造的な記述がなされていれば、理解するのに何の不都合もない文書になっていると思います。
それでも、CSS非対応ブラウザでもっと見やすくするために、要素にいままでの方法でalign属性やfontタグ等をを追加します。
notes CLASSとIDの違いについて
CLASSという概念を考えてみましょう。CLASSというのは一つの性質で分類されたものです。例えば人間の場合色々な分け方がありますね。ちょっとやってみましょう。
このようにある一つのものはいくつもの側面、言い換えればいくつものクラスを持っているということです。また、貧乏人がぼくだけではないように、一つのクラスには複数のものが属して構わないということです。
これに対して、ＩＤというのはその人の名前になります。ですからＩＤは、ある特定のものに一対一で結びつけられる性質ものです。