Orientation to CSS

Section 1 : 初めてのスタイルシート

文字をレイアウトして美しいデザインのページを作りたい衝動にかられるけれど，ここは基礎から始めよう。スタイルシートの初歩は，文字の種類や大きさを指定するところから始める。

文字のスタイルをきめるファクタはたくさんあるが，ここでは簡単に以下の３つを指定してみよう。このようなスタイルのファクタを属性といい，属性にはそれぞれ英語の名前が付いている。

フォントサイズ（font-size）
文字の色（color）
フォント名（font-family）

たとえば，見出しに使う <H2> を青い文字にしたい場合は，次のように指定するだけだから簡単だ。

H2 { color: blue; }

これ以外にも，太字やイタリック，アンダーライン，文字の配置，背景や枠などとたくさんあるが，指定のしかたは同じだからそのまま応用できる。属性の後ろをコロン「:」で仕切り設定したい値を書き，全体を中括弧でくくる。この書式は重要。セミコロン「;」で仕切れば複数の属性を一度に指定できる。

対象となる要素 { 属性: 値; 属性: 値; 属性: 値; }

それでは <H1> にフォントとして Arial，サイズは 48 ポイント，色は濃い青を指定してみよう。スタイルシートの書き方は，いつものように「ここからスタイル」～「ここまでスタイル」の形で，タイプとして "text/css" を指定するのはお約束。スタイルシートに対応していないブラウザのために， でコメントアウトすることを忘れないように。

<HTML>
<HEAD>
<TITLE>Section 1</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<H1>Style Sheets</H1>              文章の骨格を記述
</BODY>
</HTML>

このように書いておくだけで，<H1> があるところではすべて大きな字が表示される。<BODY>...</BODY> の中に「文章の骨格」を記述するのだが，レイアウトに関わる記述が無くなるので中身はすっきりする。「見た目」に関係する部分は <STYLE>...</STYLE> の中にまとめて書く。スタイルシートに対応していないブラウザで見た場合でも，本文は正確に表示される。結果は，

こんな感じですな。案外簡単にできるので，サイズや色を変えて試してみよう。なお，詳細については First step CSS の色を変えてみる，文字の大きさを変えてみるや<STYLE>などを参照されたい。

IE3, NN4 上の例はうまく表示されないかもしれない。これは，いずれのブラウザも，font-family の記述がうまく解釈されないことがあるからだ。

解決！センター化学 I ◆ Z 会出版

Next : スタイルの指定(N)
Up : 目次(X)