■ スタイルシート応用

スタイルシートを利用する様々な方法を解説します。これまでの解説の中で、いろいろとスタイルシートを取り上げてきましたが、ここでは、状況に応じ実戦的なスタイルシートの利用法を解説します。なお、スタイルシートの基本的な解説は、基礎講座の カスケーディング・スタイルシートをご覧ください。

■ クラス属性と id属性

スタイルシートのセレクタで記述する方法として、２つの属性があります。

クラス属性と id属性の相違

属性	記述の内容	CSSの記述
クラス	「要素名」＋「ピリオド」＋「クラス名」	p.test { color: #f00 }
id	「要素名」＋「シャープ記号」＋「id名」	p#test { color: #f00 }

■ クラス属性

クラス属性とは、使用するセレクタの 「分類名」 として区別され、同一の HTML内で何度も使用可能です。なお、厳密には分類名は大文字と小文字が区別されますので、扱いに注意してください。

HTMLでこのスタイルシートの読み込みは、以下のように記述します。

<p class="test">

■ id属性

id属性は、セレクタに対して固有の 「識別子」 として区別され、同一の HTML内では１回しか利用できません。ここで付ける識別子は大文字と小文字を厳格に区別しますので、扱いに注意してください。

HTMLでこのスタイルシートの読み込みは、以下のように記述します。

<p id="test">

■ クラス属性の応用

通常のセレクタにおけるクラス属性では、

「要素名」＋「ピリオド」＋「クラス名」例：p.test { color: #f00 }  と記述します。また、次のようなクラス属性には要素名のいらない記述があります。

「ピリオド」＋「クラス名」例： .test { color: #f00 }

様々な要素に適用できる汎用性のあるクラス属性のスタイルシートを設定できます。

■ セレクタの組み合わせ

スタイルシートのセレクタ（選択部）の組み合わせによって、状況に合わせたスタイルシートが可能です。要素の相関関係や前後関係によって組み合わせます。ただし、MSIEでは対応していない組み合わせもあります。

■ 要素の相関関係によるスタイルシート

要素と要素の位置関係によるスタイルシートの記述方式を解説します。

p em { color: #090 }

要素と要素の間に半角スペースを記述します。これは、p要素内にある em要素に対してのみスタイルを適応させています。そのため、他の同じ要素には反映されません。要素の相関関係でスタイルを設定する方法です。当サイトのトップページでも採用しています。

<p>この講座は<em>初心者</em>だけのためではありません。</p>
<div>是非、<em>中級者</em>にも読んでいただきたいものです。</div>

このサンプルの結果は以下のとおりです。

(注：p要素のみにスタイルが適用されます。div要素には適用されません。)

この講座は初心者だけのためではありません。

是非、中級者にも読んでいただきたいものです。

■ 要素の相関関係によるスタイルシート その２

要素と要素の間 +（プラス記号）を用いて設定します。以下はそのサンプルです。

h2 + em { color: #f00 }

これは、h2要素の直後に配置される em要素のみに適用する前後関係の設定です。つまり、h2要素素後の最初に来る em要素のみに適用され、２番目以降の em要素には適用されません。要素の前後関係でスタイルを設定する方法です。

(なお、MSIEではこの機能には対応していません。Netscapeは 6.0より対応)

■ 要素の相関関係によるスタイルシート その３

ある要素内に配置される直接の子要素に対してスタイルシートを適用させます。以下はそのサンプルです。

div > em { color: #009 }

親要素と直接の子要素を > で区切ります。これは div要素内の直接の子要素である em要素にのみスタイルが適用します。他のブロックレベル要素内での em要素には適用されません。要素の相関関係でスタイルを設定する方法です。

(なお、MSIEではこの機能には対応していません。Netscapeは 6.0より対応）

■ 複数の要素を一括してスタイルシートを適用させる

まったく同じスタイルならば、個別に設定せず、まとめて設定したほうが効率が良くなります。一括設定の方法は２通りあります。

 *    { color: #000 }
p, h1 { color: #00f }

前者は、すべての要素をまとめてスタイルシートを適用させます。現実的ではありませんが、このような方法もあることを覚えてください。

後者の場合、p要素と h1要素の２つが同時にスタイルを適用します。複数の要素に同じ設定をする場合に、カンマで区切って設定します。

このように要素の前後関係でスタイルの適用が異なって表示されます。スタイルシートを上手に応用して使うと、状況に応じたデザインが可能になります。

■ 外部スタイルシートの利用

既に、XHTMLではスタイルシートを外部に置くことが決められています。ヘッダに記述する場合、コメントタグを用いますが、ブラウザによってはスタイルシートの設定ではなく、コメントとされて表示される危険があるためです。

外部にスタイルシートを置くのは、それほど難しいものではありません。当サイトでもサンプルを除くほとんどが外部のディレクトリに、CSSファイルを置いて HTMLに読み込ませています。

■ 外部スタイルシートの利点

スタイルシートを外部から読み込ませることによる利点が幾つか挙げられます。

1. スタイルシート、HTMLのメンテナンスが容易
2. サイト全体の表示に統一性がもてる
3. 複数のスタイルシートを読み込ませることが可能

こうした利点について、その詳細を解説します。

(1) スタイルシート、HTMLのメンテナンスが容易

数ページにわたって１つのスタイルシートが利用できるために、１度ブラウザ側でキャッシュされたスタイルシートを再読み込みの必要なく適用できる利点があります。さらに、文字の大きさや文字色、背景や余白の設定も１つのスタイルシート文書だけを変更すれば、すべてのページで即座に反映されメンテナンス製が非常に高い利点もあります。

同時に、HTML文もすっきりして見やすくなり、更新作業時の効率が上がります。

(2) サイト全体の表示に統一性がもてる

「クール」なサイトとは、ページ全体のデザインに統一性があります。訪問者に安心感を与え、リソースを無駄にさせることもありません。ページごとにデザインを設計することは作業性が悪いばかりか、テーマがボケてしまう危険もあります。サイト全体の「アイデンティティ」を主張するためにも１つのスタイルシートを作りこむことをお奨めします。

(3) 複数のスタイルシートを読み込ませることが可能

ページごとに違う要素が登場し、そのためのスタイル付けが必要な場合には、メインのスタイルシートには手をつけず、サブのスタイルシートを作って個々の HTMLに読み込ませる方法があります。

外部に置くスタイルシートは複数読み込みが可能なために、こうした手法を用いることができ、他のページに影響を与えずにすみます。

以下は、外部に置くスタイルシートを HTMLドキュメントに読み込ませるための構文です。基本的に文書のヘッダ部で記述します。

<link rel="stylesheet" href="/css/mainsheet.css" type="text/css">
<link rel="stylesheet" href="/css/subsheet.css" type="text/css">

初版公開日 2002年10月3日   最新更新日 2004年3月14日

Copyright(C) 2002〜2004 banban@scollabo.com