|
スタイルシートの利用。
|
Stage2でも頻繁に出て来た「スタイルシート」という単語。
「何じゃそりゃあ」状態だった皆さんすみません。
ここでは、そのスタイルシートについての基本的な説明をします。
すいません字ばっかりです。なるべく短くまとめたんですが。
カスケードスタイルシート・レベル1
カスケードスタイルシート・レベル1（略してCSS1）は、
1996年の年末に、W3Cから発表されました。
HTMLは本来、「段落」「見出し」等のような文書の構造を
決めるものであって、文字の色を指定したりするような
見栄えを直接整える為のものではありません。
だからこれらの要素はもともとはHTMLの標準の
仕様にはなく、IEやNN等といった特定のWebブラウザのみが
対応している独自の要素でした。でもユーザーの
気持ちとしては、HTMLが本来そういう役割を果たす
存在では無かったとしても、標準仕様のHTMLのみを
仕様した簡素なホームページではあんまり味気ないですし、
どんどんこういう要素を使って見栄えを良くする他はありません。
HTML4.0は、この問題を2つの方法で解決しました。
1つはそれらのHTMLの見栄えを良くするタグを取り込んだ事。
2つめはスタイルシートに対応した事。
スタイルシートは、完全にHTMLファイルの「見栄え」を
整える為だけに登場しました。文字の色、背景等といった
本来のHTMLの機能には無い要素を指定します。
HTMLで構造を決め、そしてスタイルシートで見栄えを
整える、これが将来のHTMLファイルの理想です。
HTMLで見栄えを整えるする為の要素は、
見栄えの整えをスタイルシートに移行するまでの
暫定的な処置で、将来破棄される事が予定されています。
しかしやはり、まだ新しいCSSはWebブラウザの対応が弱く、
まだ対応していないブラウザではデフォルトで表示されてしまう、
また動作が不安定になったりしてしまう問題に加え、
記述も複雑で初心者には扱いにくいという事や、
HTMLに加えてスタイルシートも勉強しなければ
ならなくなるという、作り手側の負担になっている事も
また事実です。難しいですねえ。
CSSの利用
とりあえず1番一般的な、HTMLのヘッダ内に
CSSを直接書き込むとい方式を説明します。
ここで登場するのが、STYLEタグです。
<HEAD>
〜〜〜
<STYLE TYPE="text/css">
<!--
要素 { 属性の名前 : 値 ; } /* ここはコメントです */
-->
</STYLE>
</HEAD>
上がSTYLEタグを使用したCSSの利用の
サンプルソースです。この文字色の部分が変更箇所。
スタイルシートの属性は「属性の名前 : 値」という風に
「:」
で区切って記述し、複数の属性を並べて
指定する時には「;」で区切ります。
スタイルシート内にコメントを記述する時には
「/*」と「*/」で囲んだ中に書き入れます。
スタイルシートを記述する時、アルファベットは
大文字でも小文字でも関係なし、
途中にある改行や半角スペースは無視されます。
STYLEタグにTYPE属性は必須なので、CSSを
使う事を示す為に"text/css"と書き入れておきましょう。
また、スタイルシートに対応していないブラウザの為に
STYLEタグ内の全体をHTMLのコメントで囲んでおきます。
もひとつCSSの利用
もうひとつ上のやり方と同じ位一般的なのは、
DIVやSPAN等といったタグにSTYLE属性を与えて、
そのままそのタグが囲んだ範囲だけに
スタイルシートを適用させるやり方です。
<BODY>
〜〜〜
<SPAN STYLE=" 属性の名前 : 値 ; ">
ここの内容にスタイルシートの効果がどどーんと出る！
</SPAN>
</BODY>
簡単に言えばこんな感じです。
当サイトではスタイルシートについてのサポートは
殆ど行っておらず、HTMLを説明する上で
必要になったものをさわりだけ補足する程度に
留めております。ご了承くださいませ。
←BACK
⇔
NEXT→
|
|
|
