CSS を利用した XHTML 文書の整形

はじめに

適切なマークアップを施した XHTML 文書はに視覚効果を施すためには，CSS を利用します．

CSS（Cascading Style Sheets: カスケーティング・スタイルシート）とは，XHTML 文書に視覚効果を与える機能です．

XHTML 文書の中でCSSを直接定義する場合は，CSS をヘッド部分に記述します．

<style type="text/css">
ここに CSS を定義する
</style>

複数の文書で同一の視覚効果を与える場合には，外部 CSS ファイルを作成した方が効率的です．外部 CSS ファイルは，テキストエディタで作成することができます．ファイル名は英数小文字で，拡張子はcss とします（例：sample.css）．

XHTML 文書に外部 CSS ファイルを読み込ませるためには，XHTML 文書のヘッド部分に次のような命令を記述します．

外部 CSS ファイルを使用する場合は，CSS ファイルの１行目に文字コードを指定しておきましょう．

@charset 'Shift_JIS';

CSS の書式

CSS の書式は次のようになります．

要素 { 属性: 値; }

たとえば，em の文字色（属性: color）を #f00（値） と指定したい場合は，次のように命令します．

em { color: #f00; }

１つの要素に対して複数の属性を与えたい場合は，「;」（セミコロン）で区切ります．

要素 { 属性1: 値; 属性2: 値; }

em の文字色を #f00 にし，文字の太さ（属性：font-weight）をボールド体(bold にしたい場合は，次のように指定します．

em {
     color: #f00;
     font-weight: bold;
}

このように見やすいように改行やタブを入れることができます．

親要素の中の特定の子要素に対してスタイルを適用したい場合は，次のような形式になります．

親要素 子要素 { 属性: 値;}

たとえば，p 要素の中の em に対してスタイルを指定したい場合は，次のように指定します．

p em { color: #f00; }

複数の要素に対して同一のスタイルを指定したい場合は次のように指定します．

要素1, 要素2 { 属性: 値; }

すべての要素に対して同一のスタイルを指定したい場合は，「*」（アスタリスク）を使用します．

* { 属性: 値; }

クラス

ある要素の特定部分にスタイルを指定する場合は，クラスを使用します．

要素.クラス名 { 属性: 値; }

たとえば，著者名に強調を指定する場合は，次のように指定します．

XHTML 文書では，次のようにクラスを指定します．

次のように，１つの要素に対して複数のクラスを指定することができます．たとえば，em タグに，author と novel の２つのクラスを適用させるには次のように，指定します．

複数の要素に対して同一のクラス名を用いている場合，要素を省略すると，クラスで指定されている複数の要素に対してスタイルを指定することができます．

クラスの名前の付け方について

適切なマークアップという観点からクラスの名前についていくつか注意点をあげます．次の例をみてください．

<div class="paragraph">これは段落です</div>
<p>これは<span class="emphasize">強調</span>です．</p>

この例は少し大げさかもしれませんが，これに近いものはいくつかみたことがあります．上の例では，p，em そのものを指しています．しかし，ブラウザは，段落であるとか強調であることを判断することはできません．それゆえ，適切なマークアップを施しているわけではありません．しかしながら，Anothor HTML-Lint のような文法チェックを行っても，文法上の誤りではないので見過ごしてしまいがちです．

次の例も適切なマークアップという観点から，注意したいクラス名の付け方です．

<em class="itaric">イタリック</em>
<em class="red">赤色</em>

この例はよく見かけますし，文法チェックにかけても指摘されません．しかし，文章中でイタリック体やボールド体といった文字の装飾が行われるには何らかの理由があるはずです．たとえば，引用文献はイタリック体で表しますという決まり事にしたがって，装飾しているはずです．よって，クラス名は装飾を表す名前ではなく，マークアップを施す意味を表す名前をつけるべきでしょう．

<em class="book">XHTML とは何か</em>
<em class="modification">訂正</em>

ID

ページ内の唯一の場所を指し示すものが ID です．

<h2 id="section2">第 2 節 温室ガスと地球温暖化</h2>

ID にスタイルを指定する場合には，次のように CSS を定義します．

要素#ID名 { 属性: 値; }

長さの単位

長さの単位には，文字サイズに応じて長さが変わる相対単位と，文字サイズに依存しない絶対単位があります．

様々なブラウザや環境のことを考えると，長さの指定は原則的に相対単位で指定することが望ましいです．

色

色は，カラーコードで指定します．色は，「RGB」で特徴づけることができます．カラーコードは，#rrggbb で指定します．それぞれの値は，0,1,...,9,a,b,...,f を使って表現します．全部で16文字ありますので，表現できる色数は，16⁶ = 16,777,216 色になります．

しかし，様々なブラウザや環境を想定すると，共通に使うことができる色は限られます．そのような色を web セーフカラーといいます．Web セーフカラーは，0,3,6,9,c,f を使って表現し，#003366 のようにrr, gg, bb それぞれに対して １つの値を割り当てます．よって表現できる色数は，6 ³ = 216 色になります．色を web セーフカラーで指定する場合，#rgb のように簡略化する（たとえば，#036 のように）ことが可能です．

出力メディアの指定

PC や 携帯端末などのメディアに応じて，視覚効果を変えた方がよい場合があります．CSS は，@media を用いて，視覚効果を変更することができます．

• screen -- PCディスプレイ表示用
• print -- 印刷用
• handheld -- PDA のような携帯端末
• tty -- 携帯電話のような固定ピッチフォントで表示される端末

たとえば，em において，印刷，ディスプレイ表示ともに文字の太さはボールド体で，文字色をディスプレイ表示のときには #f00，印刷では #000 を指定したい場合は次のように命令します．

em { font-weight: bold; }
@media screen { em { color: #f00; } }
@media print { em { color: #000; } }

マージン，パディング

要素の周りの余白部分は，マージン (margin) とパディング (padding) で指定します．マージンとパッディングとの違いを簡単に説明すると，枠線（border）の内側の余白（パディング）か外側の余白（マージン）の違いです．マージンの余白では背景色の指定はできませんが，パディングでの余白では背景色の指定ができます．

マージン (margin)

マージンにおける余白の指定には次の方法があります．

margin: [周囲];
margin: [上下] [左右];
margin: [上] [左右] [下];
margin: [上] [右] [下] [左];
margin-top: [上];
margin-bottom: [下];
margin-left: [左];
margin-right: [右];

たとえば，p の周囲のマージンに 1ex の余白を指定したい場合は，次のように命令します．

p { margin: 1ex; }

パディング (padding)

パディングにおける余白の指定には次の方法があります．

padding: [周囲];
padding: [上下] [左右];
padding: [上] [左右] [下];
padding: [上] [右] [下] [左];
padding-top: [上];
padding-bottom: [下];
padding-left: [左];
paddingright: [右];

フォント

書体の種類 (font-family)

書体の変更は，font-family 属性を使用します．ただし，書体は環境に大きく依存し，書き手の意図しない出力結果になる恐れもあるので，書体の変更には注意が必要です．以下は，環境に依存しにくいフォントです．

• serif -- 明朝体(serif)のようなフォント
• sans-serif -- ゴシック体(sans-serif)のようなフォント
• cursive -- 筆記体(cursive)のようなフォント
• fantasy -- 装飾的(fantasy)なフォント
• monospace -- 等幅(monospace)フォント

"ＭＳ Ｐ明朝"（Ｍ, Ｓ, Ｐ は全角文字，空白は半角空白）や他の書体を指定することもできますが，環境に依存するので複数の書体を与えておくことが望ましいです．複数の書体を与えるには、値を「,」（カンマ）で区切ります．

p { font-family: ＭＳ Ｐ明朝, serif; }

文字の大きさ

文字の大きさは，font-size で指定します．値は，%，pt の他に以下の命令があります．

• medium -- 標準
• large -- medium より大きく
• x-large -- large より大きく
• xx-large -- x-large より大きく
• small -- medium より小さく
• x-small -- small より小さく
• xx-small -- x-small より小さく
• larger -- 相対的に大きく
• smaller -- 相対的に小さく

h1 { font-size: 150%; }

様々な環境のことを考慮して，文字の大きさは相対単位で指定し，かつ，文字を小さくする命令は極力避けるべきです．

文字の傾き (font-style)

文字の傾きは，font-style 属性を使用します．

• normal -- 標準
• italic -- イタリック (italic)
• oblique -- 斜体 (oblique)

日本語のフォントの場合，イタリックと斜体の区別はありません．

文字の太さ (font-weight)

文字の太さ変更するには，font-weight 属性を使用します．

• bold -- 太く
• bolder -- 相対的に太く（太ければさらに太く）
• normal -- 標準
• lighter -- 相対的に細く

テキスト

行間 (line-height)

行間は line-height で調整します．段落の行間を 1.5 行間隔で表示したい場合は，次のように指定します．

p { line-height: 150%; }

テキストの配置

テキストを左揃え，中央揃え，右揃えするには text-align を使用します．

• left--左寄せ
• center--中央揃え
• right--右揃え

h1 { text-align: center; }

なお，この命令は，ボックス内のテキストの配置に関する命令であり，表のなどのボックスそのものの配置を揃えるものではないことに注意してください．

テキストの均等割付

一般に，ブラウザの表示や印刷では，行末は不揃いになります．IE5, IE6 では行を均等に割り付け行末を揃える命令があります．

p {
   text-align: justify;
   text-justify: inter-ideograph; /*和文の場合*/
}

テキストの装飾 (text-decoration)

上線 (overline)，下線 (underline) 打ち消し線 (line-through)は， text-decoration で指定します．

h3 { text-decoration: underline; }

字下げ (text-indent)

テキストのはじめの字下げは，text-indent で指定します．和文の段落の場合は，１文字分字下げを行うので，次のように指定します．

p {text-indent: 1em; }

和文の場合，1em を指定することで全角１文字分の字下げが行われます．

文字色・背景色

文字色

文字色は，color で指定します．文字色を指定する場合は背景色 (background) も同時に指定しなければなりません．

em {
      color: #066;
      background: transparent;
   }

transparent は透明色を表します．

箇条書き

list-style-type は，箇条書きの先頭の番号や記号を任意のものに変更することができます．ul に対しては，次の値から選びます．

• disc -- 黒丸
• square -- 四角
• circle -- 円
• none -- 記号は付けない

ol に対しては，次の値から選びます．

• decimal -- 数字．1, 2, 3, ...
• upper-roman -- 大文字のローマ数字．I, II, III, ...
• lower-roman -- 小文字のローマ数字．i, ii, iii, ...
• upper-alpha -- 大文字のアルファベット．A, B, C, ...
• lower-alpha -- 小文字のアルファベット．a, b, c ...

ul において，list-style-type-image は，箇条書きの先頭に任意の画像を表示することができます．

list-style-image: url('URI');

none を指定すると，画像は表示されません．

背景

背景画像を使用したい場合は，background 属性に url('画像ファイル名') を指定します．その際，画像が表示されない場合に備えて，背景色も指定します．

body {
      color: #000;
      background: url('./w513.gif') #fff;
   }

background 属性では背景画像の並べ方を指定することができます．

• repeat -- 敷き詰める
• repeat-x -- 横の方向だけ敷き詰める
• repeat-y -- 縦の方向だけ敷き詰める
• no-repeat -- 敷き詰める

body {
      color: #000;
      background: url('./w513.gif') #fff repeat;
   }

background 属性では画面のスクロールにあわせて，背景画像もスクロールさせることができます．

• scroll -- 背景画像も一緒にスクロールする
• fixed -- 背景画像は固定させる

body {
      color: #000;
      background: url('./w513.gif') #fff repeat fixed;
   }

background 属性では，任意の位置に背景画像を貼り付けることができます．

background: [横方向] [縦方向]

枠線

枠線を引くためのプロパティには以下のものがあります．

• border -- 四辺を指定
• border-top -- 上辺を指定
• border-left -- 左辺を指定
• border-bottom --下辺を指定
• border-right -- 右辺を指定

値の指定は，次の通りです．

属性: [太さ] [線の形状] [線の色]

太さの値は，通常の長さの指定に加えて，細い(thin)，普通(medium)，太い(thick)があります．線の形状は次の通りです．

たとえば，p の周囲に，太さ thin，実線，#000 の線を引きたい場合は，次のように入力します．

p {border: thin solid #000;}

• © Mamoru IMANISHI All rights reserved.
•