スタイルシート1 - スタイル設定の方法

HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。

スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。

目次：

取り上げる要素： style

スタイルシート：文書の論理と表現を分離する

本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段として、HTMLの誕生よりも前から広く利用されてきました。多くのワープロソフトでも、スタイルシート機能によって「見出し」「箇条書き」などの表現方法を別途定義し、それを本文に適用することができるようになっています。

文書の“コンテンツと論理構造”と“視覚表現”を分離して定義し、両者を併せて画面などに出力すると効率的な文書作成ができる。この視覚表現定義がスタイルシート

スタイルシートを使って文書のコンテンツや論理構造と表現のルールを分離することで、さまざまなメリットが生まれます。

スタイルシートによる表現は、シンプル、柔軟、強力と三拍子揃った便利な方法。簡単に利用できますから、ぜひ基本をマスターしてあなたのページにも取り入れてください。

カスケーディング・スタイルシート

HTMLでのスタイルシートの実現方法は一つに限定されておらず、自由に選ぶことが可能ですが、一般にブラウザに実装されているのはCSS（Cascading Style Sheet）と呼ばれるものです。これは、複数の場所で設定したスタイルを混合して利用（cascade）できるという特徴を持っています。

例えば段落（要素タイプp）の文字色を赤に設定する場合、CSSによるスタイルの記述はつぎのような形式になります。

（例）p {color: red}

ここで、最初の p をセレクタ（Selector）、続く { } で囲まれた内容を宣言（Declaration）と呼び、宣言の中にはプロパティとその値をコロン（ : ）で区切って記述します。セレクタは、あるスタイルを適用する対象（要素タイプなど）を示すもの、プロパティは定義するスタイルの性質（色、大きさなど）に相当します。

プロパティと値のペアはセミコロン（ ; ）で区切って複数記述することができ、複数行にわたっても構いません。

具体的なプロパティについては次の章で取り上げます。その前に本章では、スタイルを定義するためのいくつかの約束を見ておきます。

スタイルの定義場所

HTMLでのスタイル設定は、大きく分けて3つの方法があります。

外部ファイルによるスタイル設定

もっとも汎用性が高いのは、外部ファイルにスタイルを記述し、それを取り込む方法です。スタイル定義ファイルは、前項で述べた「セレクタ」と「宣言」を必要なだけ列挙したテキストファイルで、CSSの場合は通常「.css」という拡張子をつけて保存します。

スタイルを設定した外部ファイルは、head要素の中のlink 要素をつかって取り込みます。

（例）<link rel="stylesheet" href="default.css" type="text/css" />

ファイル"default.css"にスタイルを定義した場合は、上の例のようにlink要素を記述します（空要素なので、 />で閉じます）。スタイルシートの実現方法はCSSだけに限定されないので、type属性によって利用するタイプを指定できます（HTML4ではこの属性は必須です。HTML5ではtype属性がない場合はCSSとみなされます）。

サイト全体の共通スタイルを定義したスタイルファイルを用意し、全てのHTMLファイルからそのファイルを参照するようにしておけば、サイト全体の表現を簡単に統一できます。さらにスタイル定義ファイルを変更するだけでサイト全ての表現を一度に変更することが可能になり、メンテナンスの効率が飛躍的に向上します。

head要素内のstyle要素で指定

head要素の中に style要素を加えてスタイルを記述すると、そのHTML文書の全体を通して共通のスタイルを設定することができます。複数のスタイルを同時に設定できます。外部ファイルと同様、HTML4ではtype属性が必須です。

（例）

<head>
  <style type="text/css">
    p  {color: red}
    h2 {color: blue; font-size: 120%}
  </style>
  ...

このように記述した場合は、HTML文書内の全ての段落の文字色が赤になり、全てのh2見出しが青で120%の大きさになります。ここで設定したスタイルを変更すると、やはり同じファイル内の全ての該当する“要素”にその変更が反映されます。

〔補足〕

Note: スタイルの説明では、抽象的な単位としての「要素タイプ」と文書中の具体的な“要素”が混乱すると分かりにくい点が多いので、本章では煩わしくない程度に両者を使い分けます。とくに違いをはっきりさせる場合は後者を“”に入れて表現することにします。この区別については「要素と要素タイプ」の説明を参照してください。

〔以上補足〕

（以下の例では、HTML5の方法に則ってtype属性は省略して記述します）

インラインstyle属性

個々の“要素”のタグに style属性としてスタイル情報を埋め込むことで、そのタグ（“要素”）の範囲にスタイルを設定します。スタイルを適用する対象はタグによって明らかなので、style属性ではセレクタを用いず、宣言のみを記述します。

（記述例）<p style="color: red">これは赤い文字の段落。</p>

とすると次のように段落全体の文字色を設定することができます。

（スタイルシートを使わないと区別できない例）これは赤い文字の段落。

インラインstyle属性で設定したスタイルは、その属性を指定している“要素”1カ所のみに対して適用され、同じ「要素タイプ」でも他の場所にある“要素”には反映されません。

クラス、idによる定義の局所化

せっかくスタイルできめ細かな表現ができるなら、たとえば「注釈」など特定の役割を持つ段落には異なるスタイル設定をしたいところです。しかし、style要素や外部ファイルを使う場合、セレクタに p や h1 などの要素タイプ名しか記述できないと、こうした使い分けができずあまり使い勝手が良くありません。そこで、個別の“要素”（タグ）に class属性 を指定し、そのクラスをセレクタとすることで、よりきめ細かなスタイル設定ができるようになっています。また、id属性とスタイルを対応させれば、ドキュメントの中でそのidを持つ“要素”だけに適用されるスタイルを定義できます。

クラスセレクタ

セレクタでクラスによる指定をするためには、「要素タイプ名.クラス名」のように、ピリオドの後ろにクラスの名前を記述します。要素タイプ名を省略して「.クラス名」のようにすると、全ての要素タイプに共通のクラスを設定することができます。

（記述例）

<head>
  <style>
    p.hot  {color: red}
    .cool  {color: blue}
  </style>
...

<p>通常の段落。</p>
<p class="hot">ホットな内容を赤い文字で示す段落。</p>
<p>通常の段落の一部でも<span class="cool">クールな内容は青。</span></p>

という具合です。このようにすると、同じ要素タイプでもクラスのあるなしで表現が変わります。

（スタイルシートを使わないと区別できない表示例）

通常の段落。

ホットな内容を赤い文字で示す段落。

通常の段落の一部でもクールな内容は青。

idセレクタ

idによる指定の考え方は、基本的にはクラスと同じです。指定方法が「要素タイプ名#id」という具合になること、クラスは同じクラスなら複数箇所に適用されるのに対し、idは特定のidを持つ“要素”にだけ適用される点が異なります。

注意：同じidを同一文書の複数カ所に使うことはできません。また、idの値はアルファベットで始めなければなりません（従ってid="1"という書き方は誤り）。また、HTMLでは許されるアンダースコア( _ )、コロン( : )、ピリオド( . )もCSSでは直接は使えないので注意してください。

なおid属性は、このようにスタイル指定のセレクタとして使えるだけでなく、同時にリンク先のフラグメント指定や、JavaScriptなどによる文書中のオブジェクトの指定など、様々な働きをします。

spanとdivによるグループ化

上のクラスセレクタの最後の例には<span class="cool">というタグを用いています。このspan要素やdiv要素は、HTMLで定められている要素タイプではうまく表現できない単位をグループ化して、そこにクラスを設定するときに使うことができます。span要素は段落内部の特定の単語などをグループ化するときに、またdiv要素は複数の段落をまとめるなどブロックレベル要素をグループ化するときに用います。

（記述例）

<div class="cool">
<p>段落その1。段落には直接クラスを設定していません。</p>
<p>段落その2。これもクラスは設定していません。</p>
</div>
<p>段落その3は<span class="cool">部分的に
クラスを設定</span>しています。</p>

div要素とspan要素によるグループ化の使い方を理解しましょう。

（スタイルシートを使わないと区別できない表示例）

段落その1。段落には直接クラスを設定していません。

段落その2。これもクラスは設定していません。

段落その3は部分的に クラスを設定しています。

クラス名の考え方

class属性で設定するクラスにはどんな名前をつければよいのでしょうか。

すぐに思いつくのはclass="red"のように、そのスタイルの持つデザイン上の特徴をクラスの名前にする方法です。しかし、単に「文字を赤くする」ためにクラスを設定するのでは、<font color="red">と指定するのと大差ありません。

おそらく、色を付けるのは何か目的があってのことでしょう。たとえば注意を払ってもらうために文字を赤くするなどです。この場合、大切なのは「注意を払ってもらう」という意味上の目的であって、赤い文字であることは本質ではありません。ここでclass="red"となっていると「やはり黄色のほうが注意を喚起できそうだ」と考えたときに困ってしまいます。

クラスは要素タイプの「サブクラス」を指定する、つまり従来の要素タイプでは表現できない細かなグループを形成するための機能なので、名前も要素タイプの使い方と同様、できるだけその「意味」を示すようにつけるほうがよいのです。注意を払ってほしい場所にはclass="attention"としておけば、色をどれだけ変えようと、クラス名には矛盾が生じません。

クラス指定とHTMLの要素タイプ

こうして考えてみると、実はspan要素タイプでクラス指定するよりも、em要素やstrong要素としてマーク付けする方がふさわしい場合も多いことに気がつくはずです。従来は、イタリックやボールドではなく「赤字」で強調を示したいためにfont等を使うことが多かったはず。これをそのままクラス指定に置き換えるのではなく、注目して欲しい部分ははっきりとem要素で強調し、その色や字体をスタイルシートで設定してみましょう。こうしておけば、スタイルシート非対応ブラウザでも「強調」という意味は失われずに伝わります。あるいは、重要な言葉が初めて出現するところなら、dfn要素を使うのもよいでしょう。

クラス指定は便利なので、気軽につかうことが多くなりますが、本来のHTMLの要素タイプでマークアップできないかどうか一度チェックしてみると、より「ユーザーが使いやすい」HTMLになると思います。

セレクタで使用できる文字

CSSのセレクタ名で使える文字は、HTMLでの名前文字より制約が厳しく、「使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない」とされています。HTMLではコロン( : )、ピリオド( . )も2文字目以降の名前文字として認められているので注意してください。

〔補足〕

CSS 2.0の定義では「アルファベットで始まり、アルファベット、数字、ハイフン（およびUnicodeの一部）のみで構成される、ただし最初の文字には数字/ハイフンは使えない」とされていたため、この仕様に従えば

（正しくないとされていた例） p.test_paragraph {color: red}

と記述したクラスセレクタは誤りということになり、事実いくつかのブラウザではスタイルが反映されませんでした。アンダースコア( _ )が使えないという制約は、CSS2仕様書の正誤表(Errata in REC-CSS2-19980512)およびCSS 2.1で削除されています。

なお、ピリオド( . )などの文字は、「\」でエスケープすればセレクタに用いることができます。

〔以上補足〕

文脈セレクタと一括設定

セレクタのバリエーションとして、ある要素タイプの子要素である場合など特定の文脈の場合にのみ設定するスタイルがあります。また、複数の要素タイプに同じスタイルを一括して設定する方法も用意されています。

文脈セレクタ

ある特定の要素タイプの子要素であるときにだけ適用されるスタイルを設定することができます。このときには、セレクタに親要素タイプ名、子要素タイプ名をスペースで区切って列挙します。たとえば、

（例）li em {color: red}

と設定すると、リストアイテムの中における強調だけが赤い文字で表現されることになります。

一括設定

同じスタイルを複数の要素タイプに設定する場合、セレクタに要素タイプ名をカンマで区切って列挙します。

（例）em, strong {color: red}

とすると、em要素、strong要素の両方が赤い文字で表現されます。この場合、ここで設定したプロパティ以外はデフォルトの設定が引き継がれるので、（emがイタリック、strongが太字というデフォルト設定の場合）emはイタリックの赤字、strongは太字の赤字となります。

カスケーディングと継承

スタイルは複数箇所で設定できます。同じ要素タイプに異なるスタイルが設定された場合は、一定のルールでこれらに優先順位を付けて適用します。この方法をカスケーディングと呼び、CSSの名前のもとにもなっています。また、全ての“要素”にスタイルを設定しなくても良いように、“親要素”のスタイルは“子要素”に継承されるようになっています。

カスケーディングのルール

ブラウザはマークアップに従ってHTMLを個々の“要素”のツリーに分解し、それぞれについて適用すべきスタイルがあるかどうかをチェックしていきます。このとき、スタイルシートで設定されているプロパティは、「誰の設定したスタイルか」「一般的か限定的か」「どの順序で読み込んだか」という条件によって優先順位がつけられ、対応する“要素”に適用されます。

〔補足〕

Note: スタイルは抽象的な単位としての「要素タイプ」に対してではなく、文書ツリーに出現している具体的な“要素”に適用されるという点に注意してください。

〔以上補足〕

誰の設定したスタイルか

CSSでは文書の作者が指定するスタイル以外に「ブラウザの標準スタイル」と「ユーザ定義スタイル」という考え方が加わります。何もスタイルを設定しないときに適用されるスタイルは「ブラウザの標準スタイル」で、たとえば多くのブラウザがstrong要素を太字で表示するといったような表現です。ユーザー定義スタイルは、設定が不可能なブラウザもありますが、例えばInternet Explorerでは「表示→インターネットオプション→ユーザ補助」で開かれる画面で設定可能です。

これらのスタイルの優先順位は、CSS1では「作者スタイル　＞　ユーザスタイル　＞　ブラウザスタイル」となっています。CSS2では、スタイル設定時にプロパティの値に続けて!importantというキーワードを加えることで、この優先順位を逆転できることになっています。

一般的か限定的か

セレクタには要素タイプ名のみを記述するシンプルなものから、クラスによる局所化、IDによる限定、文脈セレクタなどさまざまな種類があり、組合せによってスタイルの適用対象の限定度合いが異なります。ある“要素”のプロパティに対して複数のセレクタが適合する場合、限定度合いの高いスタイルが優先されます。たとえば 

/*スタイル設定例a*/
p      {color: black; font-size: 12pt}
p.note {color: green}
p#n1   {color: red}

という形で段落に異なるスタイルが設定されている場合、<p id="n1" class="note">...という段落においては、限定度合いが高いIDの設定が最優先され、クラス（p.note）、要素タイプ名（p）の設定という優先順でスタイルが適用されます。

〔補足〕＊優先順位の決定方法は、厳密には文脈セレクタなどもあってもう少し複雑ですが、局所的なスタイルが優先されるという原則を理解しておけば十分でしょう。

読み込みの順序

外部スタイルシート、style要素、style属性は混在して用いることができます。これらの中に、ある“要素”のプロパティに対して同じ優先順位を持つスタイルが複数ある場合（たとえばp.noteのcolorプロパティが2カ所で設定されているなど）、ブラウザが後で読み込んだものに高い優先順位が与えられます。

たとえば文書のヘッダが次のようになっているとします。

（例）

<link rel="stylesheet" href="common.css" />
<style>
  p.note {color: maroon}
</style>
<link rel="stylesheet" href="additional.css" />

  • 上記の[例a]のスタイルがファイルcommon.cssで設定されているときには、noteというクラスを持つ段落の“文字色”には、ファイルcommon.cssの定義ではなく、style要素の定義によるmaroonが採用されます。

  • 逆に[例a]のスタイルがファイルadditional.cssにある場合は、あとから読み込まれるこのファイルが優先され、greenが適用されることになります。

  • 段落の“フォントサイズ”については他のところで定義されていないので、どちらのケースでも（つまり読み込みの順序に関わらず）12ptが適用されることになります。

ある段落に直接style属性が設定される場合は、このスタイルはIDセレクタを持つものと同様にみなされます。したがって限定度合いの高さというルールが適用され、一般にはstyle属性は外部ファイルやstyle要素の設定よりも優先されることになります。

＊

こうやって列挙すると複雑なルールという感じですが

  1. 局所的なスタイルが大局的なスタイルに優先する
  2. 同じ優先順位のスタイルが競合したら、あとから読み込んだものを採用する

という基本ルールを押さえておけば大丈夫でしょう。

カスケーディングを利用した一般設定と局所設定

この優先順位の仕組みを利用して、(1)サイト全体の共通スタイル、(2)セクションのスタイル、(3)その文書特有のスタイル、(4)ある場所の特定のスタイルといった形でスタイルを使い分けることができます。(1)(2)を外部スタイルシートで（この順序で）指定し、(3)をstyle要素で、(4)をidセレクタやstyle属性で指定するわけです。

こうすることで、全体の統一性を保ち、確実なメンテナンスを行いながら、セクションや文書ごとに個性的なスタイルを適用することが可能になります。スタイルシートはまずサイト全体に適用する一般的なものを設計し、それから順次セクション、文書と局所的なものを加えていくと効果的に使うことができます。

スタイルの継承

ある“要素”に設定されたスタイルは、その“子要素”にも引き継がれます。そのうえで、子要素の持つ独自のスタイルが追加されます。たとえば、要素タイプpにcolor:blueが設定されており、ある段落（p要素）の子要素としてsup要素がある場合

（例）Y = 2X3 - 5X2 + 12

という具合に、sup要素の部分は「青文字」というプロパティを継承した上で「上付文字」という独自のスタイルを適用します。

なお、背景画像の指定など、あえて継承されないスタイルもありますが、このあたりのルールの説明は省略します。直感に反しないものなので、あまり意識しなくてもうまくいくことがほとんどだと思います。

スタイルのタイプ指定

スタイルシートの実現手段はCSSのみではないため、CSS、link要素による外部スタイルシート、style要素ともに

（例）

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

<style type="text/css">

という具合に属性としてtypeを指定します。

注意が必要なのは、インラインstyle属性によるスタイルの設定の場合です。このときは、style属性の中にさらにtype属性を書き込むわけにはいきませんから、別の場所でスタイルのタイプ（デフォルトスタイル）を指定しなければなりません。HTML 4.0の仕様書では、head内のmeta要素を使って、

（例）<meta http-equiv="Content-Style-Type" content="text/css" />

という指定方法を示しています。サーバーからのHTTPヘッダで指定することもできますが、meta要素がある場合は、その値が優先されます。このデフォルトスタイルの指定がないとstyle属性を使ったスタイル指定は誤りとなりますので、気を付けてくださいね。