 CSSの指定方法
まず、下記の記述方法が一番簡単なスタイルシート（以下CSS）の書き方です。SPAN（インライン要素）やDIV（ブロック要素）、PやH1などなど、ほとんどのタグでCSSを指定できるみたいです。あまり詳しくは知らないので、CSSの仕様についての詳細は、とほほのWWW入門とかで各自調べて下さい。
<span style="color:orange">
コレだけ見ると、タグとやってる事に変わりはない。 </span>
<div style="color:orange"> font color="〜"がstyle="〜"に変わっただけ。
</div>
CSS指定の簡略方法
その1 セレクタ
同一ページ内に何度も同じCSSを指定する場合、その都度、style="なんとか〜"っていちいち記述するのは面倒なので、それらをまとめて記述する事が可能です。下記の場合だと、全てのDIV、SPANタグ（要素）に
font-size:12px; （属性）を指定した事になります。スタイルシートに対応していないブラウザの為に（あるのか？）、念のため<!--
〜 -->でコメントアウトしておくといいです。
<html><head><title>Cascade
Stylesheet</title>
<style type="text/css">
<!--
div { font-size: 12px; }
span { font-size: 12px; }
-->
</style>
</head>
<body>
<div> 上で定義されたDIV、SPAN要素全てに</div>
<span> 属性が適用されます。</span>
</body></html>
複数のタグ要素に同じ属性を指定する場合、カンマ（,）で区切ることでまとめて指定することが可能です。以下の記述で先程と同じようにDIV、SPAN要素にフォントサイズ12px固定という属性値が指定されます。
div , span { font-size: 12px; }
また、要素に対して属性値を複数指定したい場合、セミコロン（;）で区切ってまとめて指定する事ができます。以下の記述でDIV、SPAN要素にフォントサイズ12px固定と黒色という複数の属性値が指定されます。最後のセミコロン（;）は省略することも可能です。
div , span { font-size: 12px; color: #000000; }
CSS指定の簡略方法
その2 クラス
各タグ要素をクラス分けして、それぞれに複数の属性を定義することができます。
例えば、「このDIV要素にはcolor:redを指定して、あっちのDIV要素にはcolor:blueを指定したいんだ！」という場合に有効です。定義方法は、タグ要素 ピリオド（.） 適当な名前を記述します。先頭に数字を持ってくるのは控えた方がいいみたいです。呼び出す際はさきほど定義したタグ要素内に「class="クラス名"」と記述します（以下クラス）。
<html><head><title>Cascade
Stylesheet</title>
<style type="text/css">
<!--
div.red {color:red;}
div.blue {color:blue;}
-->
</style>
</head>
<body>
<div class="red"> このDIV要素は、redクラスです。</div>
<div class="blue"> このDIV要素は、blueクラスです。</div>
</body></html>
また、タグ要素に依存せずにクラスだけを定義することもできます。タグ要素を消して、ピリオド（.） 適当な名前だけを記述します。こちらはタグ要素に依存しないので、すべてのタグでクラスを指定できます。タグ要素に依存させるかさせないかは、パッと見て分かりやすいかどうかの違いだけだと思うのですが…どうなんだろう。
.red {color:red;}
---
<span class="red"> このタグ要素は、redクラスです。</span>
<p class="red"> このタグ要素は、redクラスです。</p>
あとからスタイルを変更したり、他の製作者が編集する事を考えて、分かりやすい名前をつけるのが望ましいです。つーか多少長くなってもいいからつけろ。CSSを効率よく指定する為には、製作者がレギュレーションをしっかりと決めたうえで、レイアウトやデザインを構築する必要があります。
外部CSSファイルの定義
複数のhtmlに同じCSSを適用したい場合、CSS部分だけを記述した外部ファイルにして、それを適宜呼び出す方法もあります。<head>内を簡略し各htmlのファイルサイズを小さくしたり、スタイルを一括して変更できるメリットがあります。外部CSSは、メモ帳等のテキストエディターで記述し、保存時に拡張子「.css」で保存します。その際は、CSSの部分のみを記述すればいいので、<style><!--
〜 --></style>は必要ありません。
こんな感じで書くといいかも( ﾟдﾟ)ノ⌒◇
外部CSSを呼び出す際は、HEADタグ内に<link rel="stylesheet" type="text/css"
href="ファイル名.css">と記述します。 ブラウザによって、相対パスの解釈の仕方※1が違うみたいです。
※ブラウザによる相対パスの解釈の違い
正確にはNN 4.xではhtmlのあるフォルダを起点とし、それ以外のブラウザでは外部CSSのあるフォルダを起点とします。
<html>
<head>
<title>Cascade Stylesheet</title>
<link rel="stylesheet" type="text/css" href="ファイル名.css">
</head>
知っておくといいかも
「/* 〜 */」で囲まれた部分はコメント扱いとなり、無視されるので、これ活用して他の制作者の為に分かり易く記述しませう。
font.red { color: red; } /* ←キャプション */
font.blue { color: blue; } /* ←補足文 */
属性値が重複した場合の優先順位をつける事ができます。
font.red { color: red; ! important }
|
