|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL3. スタイル設定の書式 その1★外部ファイルを作成する
前章でスタイルシートを使うと、これまでより遥かに詳細な設定が可能であるとお話しました。それは逆に言えば、スタイルシートを動作させるには、まずその詳細設定から始めなくてはならないということでもあります。 スタイルシートの設定には、 ⅰ）外部ファイルを用意して必要なページに読み込む ⅱ）<head></head>内に書き込んでそのページだけに適用する ⅲ）<body></body>内に書き込んで、その部分だけに適用する 以上3通りの方法があるわけですが、HTMLを軽量化し、サイト全体の管理を一括化するというスタイルシートの大きなメリットを生かすためには、ⅰ）の方法が最良だと思われます。そこでまず、外部ファイルを使ってスタイルシートを設定するところから始めましょう。ⅱ）、ⅲ）は、その応用に過ぎませんので、外部ファイルを書けるようになれば特に難しいことはありません。
１．「セレクタ」と「プロパティ+値」 「CSSはページの見栄え（デザイン）を指定するために使う」という説明をよく見るのですが、それでは「見栄え（デザイン）」とはどういうことでしょうか。Webページにおいて視覚性を構成する要素は、「レイアウト（段組み）」と「細部デザイン」に大別できます。つまり、CSSはこの二つについて設定するのだということを最初に理解しておいて下さい。 さて、HTMLの軽量化のお話をした時に、以下のような外部ファイルを例として示しました。
上の例ではレイアウトは関係ありませんでしたので、特に「細部デザイン」が設定されています。背景色、テキスト色などはHTML上ではこれまで<body>タグ内に書かれていましたから、CSS上でも body に対する指定として書き込まれています。更にここでは、HTMLでは設定できなかったマージン（余白）についても指定されているのにお気づき頂けるでしょうか。他にも<h1><p>というHTML上のタグ（要素名）に対して、詳細設定されています（タグと要素名については、初級編1 Column2参照のこと）。 CSSでは「何についての設定か」を示す部分、つまりこの例では body、h1、p のことを「セレクタ」と呼びます。また、HTMLでは<body>タグ内に書かれていたリンクカラーは、CSSでは「擬似クラス」と呼ばれて独立していますので、この書き方になります。(擬似クラスについては、こちらを参照して下さい。)また、それぞれの詳細は { } 内に書き込まれているわけですが、ここは「プロパティ」 : 「値」に別れており、「プロパティ」はマージン、背景色、テキスト色などの「設定項目」を示す部分、「値」はその詳細指定と理解すると良いでしょう。
一見すると何やら難しそうに見えますが、分解すると単純なもので、基本的には以下のように公式化できます。 セレクタ { プロパティ: 値; }
注意しなければならないのは、スペースや : ; の扱いで、これを書式として統一しておかないと動作しなくなったり、後々管理が大変になったりしますので、この例ではセレクタの後、{ の後、、プロパティ: の後、値; の後に半角スペースを入れる形で統一してあります。プロパティが複数に及ぶ時は、; で区切って半角スペースを入れ、横に連ねて書くことも出来ますが、プロパティごとに改行する方が見やすいスクリプトになると思います。 また、それぞれの値の後に入る ; は一番最後のプロパティに対する値の後には入れなくても動作しますが、 編集していると往々にしてプロパティを追加するような場合も出て来ますので、そのたびに最後の項目に ; を追加するのも面倒ですし、初めから入れるように習慣づけておくと付け忘れ防止にもなって良いでしょう。 なお、複数の要素に同じ設定をしたい場合は、要素を並べてセレクタとすることもできます。 ex.) h1,h2,p { プロパティ: 値; } 以上が外部ファイルの基本的な形式ですが、セレクタには更に「idセレクタ」と「クラスセレクタ」と呼ばれるものがあります。それについては次章で解説してゆきましょう。
初級篇2.VOL2.スタイルシートのさまざまなメリット・その3 <<
|
2006.12.9.+ 12.13.
