広告

CSSの簡単な使い方

ここでは、HTMLとともに使われるスタイルシートであるCSS (Cascading Style Sheets) の使い方について簡単に説明します。

CSSの仕様は Cascading Style Sheets, level 1 (CSS1) を参照しています。現時点(1998年1月)でドラフト段階の CSS2には対応していません。

CSSはHTMLで使われるスタイルシート言語の一つである

HTMLは文書の表示の仕方には基本的に関知し ません。HTMLのタグは文書を構成する要素 (elementの訳。 SGML用語) を明示するためのものであり、ア プリケーションプログラムが文書をどう扱うかを決めるものではあ りません。

HTML文書の見栄えを決める仕組みをスタイルシートと呼びます。 CSSはHTML文書とともに使うスタイルシート言 語の一つです (言語といってもCSSはプログラミング言語ではありま せん)。原理的には、HTMLのスタイルシート言語はCSS以外のものも あり得ますし、また、CSSはHTMLだけのものとは限りません (実際、 XMLにCSSを使おうという動きもあるようです)。 しかし現時点ではHTMLでスタイルシートといえばCSSですし、CSSは HTMLで使われるのが普通です。

CSSの仕組みは簡単です。基本的には、タグによって切り分けら れた文書の各構成要素について、色を赤くするだとか、文字を大き くするだとか、上下に余白をとるだとかといったことを指定してい くだけのものです。

何はともあれ簡単なスタイルシートを書いてみる

スタイルシートは例えば次のような格好をしています。

H1 {
  color: red;
  text-align: center;
}
P {
  text-indent: 2em;
}

実際に効果を試すには、上のスタイルシートを適当なファイル にセーブしてみましょう。ファイル名を例えば style1.css としてHTML文書と同じディレクトリに置 きます。このスタイルシートを使うには、HTML文書のHEAD要素内で LINK要素を使います。次の1行を文書の <HEAD> ... </HEAD> の中に入れます。

<LINK rel="stylesheet" type="text/css" href="style1.css">

[注] LINKのTYPE属性はHTML 4.0で新設されたもの です。

手っ取り早く試してみたい向きは、次の例をファイルにコピー してCSSに対応したブラウザで表示してみてください。(同じディレ クトリに上の style1.css が必要です)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML lang="ja">
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style1.css">
<TITLE>CSSのテスト</TITLE>
</HEAD>
<BODY>
<H1>スタイルシートを使う</H1>
<P>これが最初の段落です。上の見出しは赤い字で表示され、段落の
最初の行は2文字分だけ字下げされているはずです。</P>
</BODY>
</HTML>

CSSに対応したウェブブラウザでこの文書を表示させれば、最上 位の見出し (H1要素) は赤い字で中央そろえにして表示され、段落 (P要素) の最初の行は2文字分だけ字下げされます。簡単ですね。

[注意] Internet Explorer 3.0とNetscape Navigator 4.0はCSS1に部分的 には対応していますが、未実装の部分やバグが多いため、CSSを使 ったページを正しく表示できないかも知れません。

これでもうだいたいの雰囲気は分かったかと思います。上の例のように、CSSで書かれたスタイ ルシートは、

  1. スタイル指定の対象 (H1、P、PRE、EMなど、要素の種類) の、

  2. 設定項目 (色、フォント、文字の割り付け、などなど) が、

  3. どのような値を持つか。

という指定を列挙したものです。CSSの用語では、上の三つは上 から順に「セレクタ (selector)」、「プロパティ (property)」、 「値 (value)」と呼ばれます。

プロパティとその取りうる値はCSSの仕様書にたくさん書かれて いますが、必要なときに仕様書を参照すれば良いのであって、全部 覚えていなければならないということはありません。ここでは実用 的な例題を通して、よく使うプロパティをかいつまんで説明します。

実用的な例題

段落の最初の行を字下げする

日本語の文書では段落の先頭を1文字下げるのが普通です。これを実現す るには、text-indent プロパティを用います。

P { text-indent: 1em; }

このプロパティの値は字下げする長さです。CSSにおける単位 em は文字の高さを表すので、上の指定によって1文字分下げること になります。

長さ の単位には pt (ポイント) や cm (センチメートル) といった ものも使えますが、これらの「絶対的」な指定はなるべく避けた方 が良いでしょう。というのは、印刷する場合ならともかく、画面上 では読み手の環境によって読みやすいサイズが異なるからです。

なお、スタイルの宣言の後に書かれるセミコロン (;) は、単なる区切りなので上の例では必要ありませ ん。書いても別に間違いではないので、常に書いておいても構わな いでしょう。

テキストを{左|中央|右}に寄せる

text-align プロパティを用います。値を {left | center | right} のいずれ かにします。また、justifyに設定すればジャスティフィケーショ ンが指定されたことになります。

H1 { text-align: center; }
H2 { text-align: right; }

行間を空ける

line-height プロパティは行の高さを指定します。

BODY { line-height: 1.5; }
BODY { line-height: 150%; }

この二つの指定はどちらも行の高さをフォントサイズの1.5倍に します。つまり行間は「半角アキ」になります。BODY直下のテキス トに関しては上のどちらで書いても同じ結果になりますが、子要素 への継承の仕方が異なります。

何も単位を付けないときには、子要素への継承はこの係数自体 で行われます。つまり、この例ではフォントサイズが変わってもそ の時々におけるフォントサイズの1.5倍が行の高さになります。一 方、パーセントで指定すると、係数ではなく算出された長さが継承 されます。

普通に考えるとパーセント指定よりも単位なしの指定の方が便 利そうですが、Internet Explorer 3.0には単位なしのline-height をピクセル指定として扱ってしまうというひどいバグがあり、上の 例では行の高さを1.5ピクセルにしてしまうという悲惨な結果にな ります。悪いのはバグ入りブラウザなのですが、実際にそういうも のが使われている現状では、数値指定は避ける方が無難でしょう。 line-heightはパーセントで指定し、フォントサイズが変わる度に 設定し直すことをおすすめします。

フォントの指定

CSS1には「font-何々」という名前のプロパティが5種類ありま すが、これらを一括して指定するのにはfontプロパティ を用います。font プロパティでは line-height も同時に指定でき ます。

P { font: bold oblique large/130% serif; }

上のように書けば、「太字で、斜体で、通常より1段階大きなサ イズで、行の高さは文字の高さの130%で、セリフ付きの書体 (ない しはそれ相当の書体――欧文ならローマン体、和文なら明朝体な ど)」が指定されたことになります。

背景を指定する

要素の背景をbackground プロパティで指定できます。背景には画像を使うこともできますし、 を 指定することもできます。両方指定すると画像が採用され、もし画 像が使えなければ色の指定が使われます。

BODY { background: white url(back.gif); }

色の指定には whitered などの ほか、#FF00FF のような16進数での指定もできます。

背景は別に文書全体にしか設定できないわけではありません。 見出しだろうが段落だろうが何だろうが、個々の要素の背景を自由 に決めることができます。次の例はPRE要素の背景を指定します。

PRE { background: #d0e0f0; }

スタイルシートを文書内に書くこともできる

ここまでは、スタイルシートは文書とは別に用意されているも のとして話を進めてきました。このやり方にはスタイルシートを複 数の文書で共有できるというメリットがあります。

一方で、スタイルシートをHTML文書の中に埋め込むこともでき ます。それにはSTYLE 要素を使います。STYLE要素はHEAD要素内に現れます。例えば 次のようにします。

<STYLE type="text/css">
<!--
H1 { color: red; }
-->
</STYLE>

ここで、STYLE要素の内容をコメントにしてあるのは、 <STYLE> タグを認識しないブラウザがスタイ ルシートを表示してしまうのを防ぐためです。スタイルシートには 影響しません。

また、要素の開始タグの中にスタイル情報を埋め込むこともで きます。このためにはSTYLE 属性を使います。STYLE属性はほとんどの要素に用意されてい ます。文書中のある特定の部分についてだけスタイルを変更したい ときに使えます。例えば、特定の見出しだけを赤くしたいなら、次 のように書きます。

<H2 style="color: red">注意事項</H2>

ただしこの場合、STYLE属性に記述されたスタイル情報がどのス タイルシート言語で書かれているのか (CSSか、あるいはDSSSLなり 何かほかのものか) が分かりません。そこで、文書中で使われるデ フォルトのスタイルシート言語を設定することが求められます。こ のためにはMETA要素が使えます。HEAD要素内に次のように書きます。

<META http-equiv="Content-Style-Type" content="text/css">

これを省略した場合、STYLE属性に書かれたスタイルシートは CSSとみなされることになっています。しかし将来CSS以外のスタイ ルシートを使うときには上のようなMETAでスタイルシート言語を明 示することが必須となります。今のうちから、デフォルトに頼らず にMETAを書くようにしておく方が良いでしょう。

なお、STYLE要素とSTYLE属性はともにHTML 4.0で新設されたも のです。(STYLE要素はHTML 3.2のDTDで一応定義されていましたが、 単に将来のために予約されていただけで、使い方は決められていま せんでした)

さて、これでスタイルシートは三つの方法でHTML文書に適用で きることが分かりました。

これら三つのやり方を併用すると、指定がかち合うことがあり ます。その際どの指定が実際に適用されるかを決める規則はCSSの 仕様書に詳しく書かれていますが、基本原則は直感的で納得できる ものです。すなわち、

この二つを覚えておけばまず間違いないでしょう。例えば、

<STYLE type="text/css">
H1 { color: black; }
</STYLE>
</HEAD>
<BODY>
<H1 style="color: red">Am I red?</H1>

と書かれていれば、"Am I red?" という見出しは赤い字 で表示されます。

いろいろなセレクタ

セレクタは基本的に要素型 (要素の種類) が対応しますが、もう 少し応用的なものもあります。

文脈セレクタ

単なる要素型だけではなく、「H1の中のEM」といった、「文脈」 に応じた指定もできます。例えば次のようなものです。

P { text-indent: 2em; }
LI P { text-indent: 0; }

この例では、LIの中のPに対しては最初の行の字下げを行いません。

クラスセレクタ

HTML 4.0で採用されているCLASS 属性の値をセレクタとして用いることができます。CLASS属性 は要素を分類するのに使われます。例えば、同じPRE要素でも、プ ログラムリストと詩とを区別したいというときに使えます。

<PRE class="program">
main() {
  printf("Hello, world.\n");
}
</PRE>
<PRE class="verse">
  You are my sunshine
  My only sunshine
</PRE>

こうしたときに、「プログラムリストは固定幅のフォントで、 詩はイタリック体で」といった指定をしたくなるでしょう。そこで クラスセレクタが使えます。

PRE.program { font-family: Courier, monospace; }
PRE.verse {
  font-family: Garamond, serif;
  font-style: italic;
}

クラスセレクタはこのように要素型とCLASS属性値とをピリオド でつないで指定します。要素型を省略することもでき、このときは CLASS属性値が同じであればどの要素型にもマッチします。次の例 は、どんな要素であれ、CLASS属性の値が warning であれば文字を赤くします。

<STYLE type="text/css">
.warning { color: red; }
</STYLE>
</HEAD>
<BODY>
<P class="warning">Leave this page soon!

IDセレクタ

HTML 4.0のID 属性の値をセレクタとして用いることができます。ID属性は文 書中を通じて唯一であるように設定しなければなりません。つまり、 同じ属性値を2度指定してはいけないということです。CLASS属性同 様、ほとんどの要素にID属性が用意されています。

IDセレクタはID属性値の前に記号 # をつけて表 現されます。

<STYLE type="text/css">
#p1 { font-size: large; }
</STYLE>
</HEAD><BODY>
<P id="p1">I am large.

上の例のようにすれば、p1 というIDが付けられ た要素が大きな文字になります。

なお、ID属性はスタイルシートで使われるだけでなく、リンク 先としても使われます。上の例に対してなら、

<A href="#p1">Large stuff</A>

というように書けばその段落へのリンクになります。A要素によ るアンカーと同じです。

グループ化

複数のセレクタに対して同じ指定をする場合、まとめて書くこ とができます。

H1, H2, H3 { font-weight: bold; }

こう書けば、H1とH2とH3の三つとも太字になります。

この場合の区切りはカンマです。スペースで区切ると文脈セレ クタになりますので混同しないよう注意してください。

ボックスまわりを理解すればいろいろ遊べる

このページをCSS対応のブラウザで読んでいる方は、各節の見出 しの下に線がついて見えているでしょう。これはCSSの "border" を使って実現しています。CSSでは要素の上下左右に枠線を設定で きるのです。

CSSの表示においては、各要素は「箱」(ボックス) です。この 「箱」の様子をまとめると以下のようになります。

  1. 要素内容 (テキスト等) が中心にある。

  2. その周りに "padding" (詰め物) がある。ここにはその要素 の背景 (background) が見える。

  3. その周りを "border" (枠線) が取り囲んでいる。borderは、 色、太さ、スタイル等を自由に設定できる。

  4. さらにその周囲には "margin" (余白) がある。この部分は 親要素が透けて見える。

このあたりのことを理解すれば、borderやbackgroundを駆使し て遊ぶことができるでしょう。CSS1の仕様書の4章 5.5節 を参照してください。

一つだけ実例を挙げてみましょう。この文書で用いているスタ イルシート (jwebarticle2.css) では、最上位の見出し (H1) の横に赤い四角をつけます。これは次 のようにすれば実現できます。

H1 {           /* 以下で、四つの値の指定は順に上、右、下、左を表す*/
  padding: 0 0 1em 8%;       /* 枠線と文字との間の距離*/
  border-left: 0.6em solid red;  /* 左側の枠線の幅、スタイル、色 */
}           /* ちなみにCSSのコメントはC言語と同じ */

border-styleの初期値はnoneなので普通はこれで左の枠線しか 見えないはずです。しかしひょっとするとユーザのスタイルシート (後述) で変更されているかも知れません (普通はしないでしょう けど)。それが嫌なら、上の指定の中に次の宣言を加えておけば良 いでしょう。

  border-style: none none none solid;
           /* 順に上、右、下、左のborder-style */
           /* noneは非表示、solidは普通の線 */

さて、レイアウトに関して覚えておくと良いことの一つに、 HTMLのBODY要素の子要素には大きく分けてブロック要素行内要素の2種類があるということがあります。前者は、 H1要素やP要素のように、改行して空白をとって表示される要素で す。後者は、EM要素やSTRONG要素のように、改段落をともなわずに 「行の中に」表示される要素です。

なお、CSSではdisplayプロ パティの設定によってH1を行内要素として表示したり、EM要素をブ ロック要素として表示したりもできますが、濫用は慎むべきでしょ う。CSS1の仕様書では、displayプロパティの変更はユーザーエー ジェント (ブラウザ等) が最低限サポートすべき仕様には入ってい ません。displayの変更は無視され得るということです。

スタイルを決めるのは著者だけではない

CSSが想定するモデルでは、ブラウザはデフォルトのスタイルシ ートを持っています。ページの中でスタイルシートが何も指定され ない場合にはデフォルトの指定が使われるわけです (スタイルシー トに対応していないブラウザは、表示スタイルを固定的に持ってい ると考えられます)。

また、ブラウザの使用者は自分用のスタイルシートを持つこと ができます。ブラウザが持つスタイルシートを自分用のスタイルシ ートが上書きするわけです。

つまりCSSのスタイル指定は「ブラウザのデフォルト――ユーザ の自分用――ページ内の指定」の三段構えになっているわけです。 指定がかちあう場合は後から来たものが上書きする格好になります。 (例外もあります。important 指定によってユーザの指定を著者の指定に優先させることができる のです)

ひとつだけ注意を

マイナスのmarginを使って文字を重ねあわせて影つきの文字を 作る、なんてことは絶対にしないでくださいね。スタイルシートに 依存したページを書かないよう心がけてください。せっかくのHTML なんですから。

参考文献

1998年1月9日 初版公開, 1998年1月21日 最終更新
矢野啓介 (yano AT moon DOT email DOT ne DOT jp)