スタイルシート

スタイルシートとは

Wordでも「Webページとして保存」メニューでHTML形式で保存されますが，これをそのままWebに載せたいと思う人はいません。何が問題なのでしょうか。

Wordで「Webページとして保存」したHTMLファイルをテキストエディタで開いてみると，「ＭＳＰ明朝」とか「ＭＳＰゴシック」とか，フォント名を指定するためのタグがあらゆるところに挿入されていて，それだけでファイルサイズが膨れ上がっています。これをテキストエディタで編集するのはたいへんです。問題はそれだけではなく，「ＭＳＰ明朝」などというフォントが標準でインストールされているのはWindowsだけで，他の環境（MacやLinuxなど）では意図したフォントが選ばれません。

こういった無茶苦茶なことになるのを防ぐため，XHTMLでは，文書そのものには「ここは見出し」「ここは本文（段落）」「ここは引用文」といった論理的な構造だけをマークアップし，「見出しはゴシック体」「本文は明朝体」といった見栄え（視覚表現）に相当することは，スタイルシートで行うべきです。スタイルシートは通常は別ファイルにして，複数の文書ファイルから共通に使います。

スタイルシート用の言語としてはCSS（Cascading Style Sheets）が広く使われています。Cascading（滝のように続く）という意味は，複数のスタイルを順次適用することができるという意味です。同じものに対して複数の定義があれば，後の定義が優先されます。

簡単な例

たとえばこのページのように本文領域にマージン（余白）を5%ほど設定したいとします。そのためのCSSの書き方は margin: 5% です。

これを書くためには三つの方法があります。

その1：<body> を <body style="margin: 5%"> にする

この場合，<head> と </head> の間のどこかに次のように書くのが正しい流儀：
```
<meta http-equiv="Content-Style-Type" content="text/css" />
      
```
その2：<head> と </head> の間のどこかに次のように書く：
```
<style type="text/css">
body {
  margin: 5%;
}
</style>
      
```
その3：別ファイル（たとえば style.css）に次のように書く：
```
body {
  margin: 5%;
}
      
```
この場合，このファイル名を <head> と </head> の間のどこかに次のように書く：
```
<link rel="stylesheet" type="text/css" href="style.css" />
      
```

以上の三つの方法のうち，お薦めは第3の方法です。

第3の方法の場合，CSSファイルにASCII外の文字（日本語の文字など）が含まれている場合は，文字コードを次のようにして指定します。次は本文のマージンを5%に設定し，本文のフォントを「Osaka」または「ＭＳＰゴシック」またはそれ以外のゴシック体で表示させたい場合の設定です。文字コードをUTF-8にしました。

@charset "UTF-8";
body {
  margin: 5%;
  font-family: Osaka, "ＭＳ Ｐゴシック", sans-serif;
}

別の例として，本文の背景が #FFC という色（クリーム色）で，foo.png という画像を敷き詰めたい場合には次のようにします。

body {
  background: url(foo.png) #FFC;
}

本当は，body { 設定1; 設定2; 設定3 } のように，セミコロンは最後の中括弧の前では不要なのですが，設定を追加する場合に忘れやすいので，body { 設定1; 設定2; 設定3; } のように全部に付けるのが一般的です。

また，/* ... */ のような形でコメント（覚え書き）を書き込んでおくことができます。

さらに別の例として，すべての段落（p）の最初の行を全角1文字分ほどインデント（左余白を余分に空けること）してみます。

p {
  text-indent: 1em;
}

長さは px，in，cm，mm，pt，pc，em，ex のどれかで指定します。パソコン画面の場合，通常は px（ピクセル）または em（エム）で指定するのがよいでしょう。em はもともとは一番広い文字 M の幅の意味でしたが，今は文字サイズの公称値（たとえば10ポイントのフォントなら10ポイント）が1emです。日本語なら，全角文字の幅が1emに相当すると考えておけばいいでしょう（保証されていませんが）。

また，200%（標準値の2倍）のような相対的な指定も使えます。

media

CSSを使えば，メディア（媒体，出力装置）ごとに違う表現を指定できます。例えば，

<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

のようにしておけば，common.cssを適用した後で，パソコン用ブラウザならscreen.css，プリンタならprint.css，携帯端末ならhandheld.cssが適用されます。

携帯用フルブラウザはscreenなんでしょうか，handheldなんでしょうか。私の「京ポン」（AH-K3001V）のOperaでは，スモールスクリーンモードならhandheldになるようです。ちなみに，

<link rel="stylesheet" type="text/css" href="" media="handheld" />

と書いておけばフルスクリーンモードでも横幅が画面と一致し，通常は横スクロールバーが出ないという仕様のようです。

古いブラウザへの配慮

非常に古いCSS未対応のブラウザからCSSを隠すために，次のようにHTMLのコメント <-- ... --> を使うことがあります。

<style type="text/css">
<!--
  @import url(style.css);
-->
</style>

さらに，上の例で挙げたように，@import という命令で他のCSSファイルを読み込むことができますが，@import は Netscape 4.x や IE 3.x のような古いブラウザでは使えません。そこで，古いブラウザで誤動作するようなCSSは @import で読み込ませています。

さらに良い方法は，次のように media に古いブラウザが認識しないものを並べることです：

<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />

XHTMLへの対応

ブラウザが本格的にXHTMLの規約に従うようになれば，<style type="text/css"> ... </style> の中に < や & や ]]> や -- があるとうまくいかなくなります。このときは，次のように書く必要があります。

<style type="text/css">
<![CDATA[
  ...
]]>
</style>

ただ，現在のブラウザはまだ上の書き方を理解しませんので，使わないほうがいいでしょう。

おもなスタイル指定

font-size: 150%: 1.5倍の大きさで（一つ上の階層に比べて）
font-size: 16px: 16ピクセルの大きさで（このような指定は避けるべし）
font-style: normal: 標準スタイルで（イタリック体，斜体の指定を外すときに使う）
color: green: 文字色を緑で
background-color: yellow: 背景色を黄で
text-decoration: underline: アンダーラインを引く
text-decoration: line-through: 打ち消し線を引く
text-decoration: none: 文字飾りなしで（アンダーラインなどを外すときに使う）
text-align: left: 左寄せ
text-align: center: 中央揃え
text-align: right: 右寄せ
text-indent: 1em: 全角1文字だけ字下げする
letter-spacing: 1em: 字間を空ける
margin-right: 50px: 右マージンを50ピクセルにする
margin-left: 10%: 左マージンを表示幅の10%にする
clear: left: 左寄せの図をすべて出力してしまう（left 以外に right，both，none が書ける）

部分的にスタイルを適用するには

一時的にスタイルを適用するには

一時的に<span style="color: green">スタイル</span>を適用する

のようにします。また，（いくつかの）段落に適用するには

<div style="color: green">
<p>ここは緑。</p>
<p>ここも緑。</p>
</div>

のようにします。

ただ，このようにXHTML文書にスタイルを混ぜ込むと，せっかく文書構造と視覚表現を分離した意味がなくなってくるので，次のような方法が望ましいでしょう。

たとえば，段落 p は通常は1文字インデント（字下げ）するけれども，例外的な場合にはインデントしたくないとします。このときは，

p { text-indent: 1em }
p.noindent { text-indent: 0em }

のようにしておき，文書中では

<p>ここはインデントする。</p>
<p class="noindent">ここはしない。</p>

のように指定します。この class="noindent" という指定を p 以外にも付けたいなら，

.noindent { text-indent: 0em }

のようにします。

もう一つの方法として，

p#footer { font-size: small }

のようにしておき，文書中では

<p id="footer">ここはフッター</p>

のようにすることもできます。ここで footer という id は一つの文書に1回しか出てきてはいけません。p 以外でも id="footer" を使いたい場合には

#footer { font-size: small }

のようにします。

デフォルトのスタイルシート

HTML 4のデフォルトのスタイルをCSS 2.1で記述したものが Default style sheet for HTML 4 にあります。

ハック

line-height を指定すると Netscape 4.x でフォームの位置がおかしくなります。これを防ぐには /*/*/ ... /* */ で囲んでおけば，その部分が Netscape 4.x から隠蔽されます。

body {
  background: white;
  margin: 5%;
  /*/*/ line-height: 1.5; /* */
}

奥村晴彦

Last modified: 2011-08-02 20:46:32