space
テクニック:スタイルシート
 
space
■目次
■スタイルシートとは?

スタイルシートとは,Webページを視覚的にデザインするための,新しい技術です。「HTMLは本来文書の意味だけを定義するべきで,文書の見栄えは定義するべきではない。見栄えはHTMLではなく,スタイルシートで記述しよう」というのが開発の理由です。

現在,実用化されつつあるスタイルシートの規格は,「CSS1」(Cascading Style Sheets level1)と呼ばれているものです。CSS1によれば,フォントの種類や形状,サイズ,マージン設定,インデント,バックグランドカラー,バックグランドイメージなど,広範囲にわたるコントロールが可能になっています。

■スタイルシートにできること

スタイルシートによって,以下の,Webページのスタイルに関する設定ができます。

・文字を意図したとおりのフォントで表示する
・段落にインデントをつける
・文字に色をつける
・Webページ上のイメージの場所を自由に設定する
・文字間隔を自由に調節する
・行間隔を設定する

■スタイルシートの基礎

基本となるスタイルシートは タグ名{プロバティ:値} と記述します。{プロパティ:値}部分が,いわゆるスタイルの宣言といわれるものです。ここで宣言されたスタイルが左側のタグに反映されます。
「プロパティ」にはスタイルとして定義したいものを,「値」には定義したスタイルをどう表示するかを記述します。つまり,「何を」:「どうする」という記述になるわけです。
また,スタイルはいくつも宣言することができ,その場合,複数の宣言を「;」で区切って記述します。
タグ名{プロバティ:値;プロパティ:値}

<HTML>
<HEAD>
<TYTLE>SAMPLE</TYTLE>
<STYLE TYPE="text/css">
<!--
H1{color:blue}
P{font-size:12pt;font-weight:bold}

BODY{background-image: url(bg02.gif)} -->
</STYLE>
</HEAD>
<BODY>
<H1>スタイルシートを使う</H1>
<P>スタイルシートとは,Webページを視覚的にデザインするための,<br>
新しい技術です。
</P>sample
</BODY>
</HTML>

スタイルシートに対応していないブラウザのために<!-- 〜 -->でコメントアウトしておきましょう。JavaScriptとは異なり,--> の前に // を記述してはなりません。

上記の
H1{color:blue}
P{font-size:12pt;font-weight:bold}
BODY {background-image: url(bg02.gif)}

部分をテキストエディタなどでスタイルシートとして保存します。何でも好きな名前がつけられますが,拡張子は必ず"CSS"にしなければなりません。たとえば"style1.css"などのように。

■作ったスタイルをホームページで使えるようにする                

スタイルを適用したいHTML文書を作成し,HEAD要素の中でスタイルシートを参照します。
LINK要素でスタイルシートを参照,LINK要素の属性relの値を"stylesheet"と設定します。
次にコンテントタイプをtype属性によって設定します。これは参照する情報の種類を表します。CSSのスタイルシートを参照する場合は,"text/css"と設定します。
最後に,適用したいスタイルシートの場所をhref属性によって設定します。スタイルシートの場所は,URLという書き方の規定に沿って表します。スタイルシートが同じ階層にあれば,単にhref="style1.css"と設定すればOKです。

  <HTML>
  <HEAD>
  <TITLE>SAMPLE</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>sample
  <BODY>
  <H1>Style Sheet Sample</H1>
  </BODY><P>これはスタイルシートのサンプルです。</P> </HTML>
■クラス名でスタイル対象を設定する

HTML文書のタグにclass属性を設定しておけば,このclass属性の値を対象にスタイルを設定することができます。
スタイルシートでは,セレクタの部分に要素名に続けて,ビリオド"."とそれに続く任意の名前を書きます。これをクラス名といいます。要素名を書かずに,ピリオド"."とそれに続くクラス名で指定することもできます。この場合,指定されたclass属性値を持つすべての要素に対してスタイルが適用されます。

・HTML文書   <要素名 class="aaa">
・スタイルシート 要素名.aaa{プロパティ:プロパティ値} または .aaa{プロパティ:プロパティ値}

    <HTML>
    <HEAD>
    <TITLE>スタイルシート</TITLE>
    <STYLE TYPE="text/css">
BODY{background-image:url(bg02.gif)} H2.red{color:red;text-align:left} H2.blue{color:blue;font-style:italic;text-align:left} p.honbun{font-size:14pt;text-align:left} p.omake{font-style:italic;text-align:left} </STYLE> </HEAD> <BODY> <H2 CLASS="red">スタイルシート</H2> <H2 CLASS="blue">スタイルシート</H2>sample <P CLASS="honbun">スタイルシート</P> <P CLASS="omake">スタイルシート</P></BODY></HTML>
■スタイルシートの注意点                                

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

未対応のブラウザもある。
NN3.0 や,その他多くのブラウザはまだスタイルシートをサポートしていません。また,いろいろな理由からスタイルシート機能をオフにしている人も居ます。意味だけでなく,見栄えも大切にするページであれば,古いブラウザへの配慮も必要です。

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

ひどい実装のブラウザが多い。
IE4.0やIE5.0で確認しながら,スタイルシートを駆使したページを IE3.0 や NN4.0 で見ると,大半の人が愕然とするでしょう。IE3.0 や NN4.0 にはスタイルシートに関する大量のバグがあるので,ひどい時は文章と文章が重なってしまって,読むことすらできなくなります。

保存すると見栄えが・・・。
ページを自分のハードディスクに保存して,後から見る人も多いと思いますが,スタイルシートの外部ファイルの保存を忘れてしまうと,せっかくの見栄えが台無し(読みづらいページ)になってしまうことがあります。

 

return