HTML文書の「見た目」を操作する方法。これを使えば、コンテンツ内のひとつ ひとつの要素についていちいち「見た目」を設定しなくても、すべて一括して 「見た目」を設定することができる。HTML4.0標準以降では、HTMLのタグやそ の属性として、色やレイアウトを指定せずに、CSSを使う事が推奨されている。
CSSの使い方には次の3つがある。
属性: 値
である。これを、HTMLタグのstyle属性として与える。具体的に H3(見出し3)の文字の色を緑にするならば、
<h3 style="color:green"> 緑色の見出し </h3>
属性1: 値1; 属性2: 値2のように、; (セミコロン)で区切る。見出し3の色をオレンジに、かつセンタリ ングするには、
<h3 style="color:orange; text-align:center"> オレンジで真ん中 </h3>
タグに囲まれていない特定の場所にCSSによる書式を設定するには、spanタ グが使われる。
文章の途中でも<span style="color:#33ff66;background-color:#ccffff">色 を変えたい部分</span>はあるのだ。
文章の途中でも色 を変えたい部分はあるのだ。
div タグは複数のタグを含む(含まなくてもよい)特定の領域全体をまとめ るのに使用する。下記の例では、h3 タグと ulタグを含んだ領域全体に、イン ラインスタイルを適用している。
<div style="text-align:center; background-color:#ccffff"> <h3>見出し3</h3> <ul> <li>箇条書 <li>まんなかですね </ul> </div>の、ブラウザでの表示は、
このような局所的なスタイルの使いかた(インラインスタイル)では、CSS の利点はほとんど発揮されない。そして、この使いかたは従来のHTMLのタグを 使った方法と、コーディングする手間にほとんど変わりはない。
<center> <h3><font color="orange">HTMLタグを使っても同じ</font></h3> </center>
ここで、あるHTML文書全体の見出しの色やレイアウトを統一させることを考え る。HTMLタグやインラインスタイルによって、これを実現するには、いちいち 見出しが出現するたびにいろいろ書き加えなければならない。
ヘッダ部にスタイルを定義すると、そのHTML文書すべての特定のタグの見 ためを変更することができる。これには、styleタグを使用 する。これをドキュメントレベルのスタイルシートと呼ぶ。 h3タグの、色を赤、位置は右よせ、字体はイタリックとす るには、
<head>
<style type="text/css">
H3{color:red; text-align:right; font-style:italic}
</style>
</head>
とする。
ドキュメントレベルのスタイルシートの書式は、
セレクタ{スタイルを列記}
となる。セレクタには、HTMLのタグ名を使う事ができる。HTMLのソースを 見やすくするには、適当な場所で空白を入れ改行して、
<head>
<style type="text/css">
H3{
color: red;
text-align: right;
font-style: italic;
}
</style>
</head>
のように書くのが、望ましい。
さらに、h3だけでなく、h2やh1にも同様のレイアウト を当てはめたい場合は、
<style type="text/css">
H1,H2,H3{
color: red;
text-align: right;
font-style: italic;
}
</style>
という書き方もできる。
上記の例では、スタイルを設定した見出しは、全て同じ書式が適用される。 しかし、同じレベルの見出しでも、場所によって書式を変えたい場合がある。 このような時は、スタイルクラスを作成して、それをタグのスタイル属性とし て指定してやる方法がある。このクラスは、様々なタグに対して、利用できる。 スタイルクラス設定の際のセレクタは、.クラス名(自由に設定) となる。
red, center, orangecenterという3つのスタイルクラスを指定
<style type="text/css">
.red {
color: red;
background-color: #ccffff;
}
.center {
text-align: center
}
.orangecenter {
text-align: center;
color: orange;
background-color:#ccffff
}
</style>
HTML文書の中では、次のように使用する。
<h3 class=center>センタリングした見出し</h3>
<h3 class=red>赤い字の見出し</h3>
<p class=red>クラスにredを指定すると、この段落だけ、赤い字になっちゃいます。</p>
クラスにredを指定すると、この段落だけ、赤い字になっちゃいます。
このように、スタイルクラスをヘッダ部にて設定することにより、いろい ろなタグごとに同じ書式を設定することができる。また、１つのスタイルクラ スには複数の属性を同時に設定することができるので、HTMLタグによってレイ アウトやフォントなどを同時に設定する際に必要な複数のタグは不要である点 もスマートと言える。
<h3 class=orangecenter>HTMLタグより断然シンプル!!</h3>
さらに、span タグや div タグを用いて、文書中の特定の部分や、特定の領域 だけに、クラスを適用することもできる。
文章の途中でも<span class=red>色 を変えたい部分</span>はあるのだ。
文章の途中でも色 を変えたい部分はあるのだ。
先程のインラインスタイルによって、見た目を制 御するよりも、ずっとスマートだということが分かるであろう。
さらに、ひとつのHTML文書だけでなく、複数のHTML文書群に対して、同じレイ アウトを適用したいとしよう。ドキュメントレベルのスタイルシートでは、全 てのHTML文書のヘッダ部に同じスタイルをいちいち書き加えなければならない。
スタイル部分のみを別ファイル(スタイルシートファイル)に記述して、そ れをHTML文書から読み込む設定を行えば、全てのHTML文書から共通のスタイル ファイルを読み込むことによって、全てのHTML文書の見ためを揃えることがで きる。
h2{
font-size:18px;
background-color:#eeffee;
}
h3{
font-size: 16px;
background-color: #eeeeff;
text-indent: 1em;
margin: 5px;
}
A:hover {
text-decoration: underline;
color:green;
}
|
スタイルシートファイルを読みこむHTMLファイルのヘッダ部
<link rel=stylesheet type="text/css" href="sample.css">
IE と NN はそのバージョン4以降で、CSSに対応した。しかし、NN のバージョ ン4.7系では、HTML4.0のCSSに完全に対応しているとは言えない。よって、見 え方に違いがでることがある。
CSSを使ってフォントサイズを指定する時には、絶対指定は避け、相対指定と するべきである。前者は、IEのメニュー 「表示 →文字サイズ」によってサイ ズを変更できないが、後者は可能である。 小さいサイズの字を大きく見たいユーザや、大きい字を小さい字 で見たいユーザのために、相対指定を使用すべきであろう。
18ポイント絶対指定の文字 は、IEの メニュー 「表示 →文字サイズ」によってサイズ変更できないが、 標準サイズの1.5倍指定の文字 とい う指定をすれば、サイズ変更できる。
<span style="font-size:18pt"> < 18ポイント絶対指定の文字> IEのメニュー 「表示 →文字サイズ」によって変更できないが、 <span style="font-size:1.5em">標準サイズの1.5倍指定の文字</span> とい う指定をすれば、大きさも変更できる。