スタイルシート

スタイルシートとは

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

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

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

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

簡単な例

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

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

以上の三つの方法のうち，お薦めは第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倍）のような相対的な指定も使えます。このようにして拡大（または縮小）したとき、1em に相当する長さも変わります。変えたくない場合は em ではなく rem（raw em の意味）とします。

media

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

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

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

おもなスタイル指定

font-size: 150%
1.5倍の大きさで（一つ上の階層に比べて）
font-size: 16px
従来型のディスプレイで16ピクセルに相当する大きさで（最近のデバイスはピクセル密度が高いものがあり，1pxが実際には2ピクセルや3ピクセルに相当する場合があります。詳しくはdevicePixelRatioをググってください。また，px単位でフォントを指定しても今のブラウザは拡大・縮小が自由にできますので，アクセシビリティ上の問題が生じるわけではありません）
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>

のようにします。

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

たとえば，段落 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のデフォルトのスタイルは ここ にあります。

Last modified: