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

ショートカットキーの (Z) を押すとここに簡単に戻ることができます.

はじめに

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

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

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

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

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

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

<link rel="stylesheet" type="text/css"  href="CSS ファイル名.css" />

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

@charset 'Shift_JIS';

CSS の書式

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

要素 { 属性: 値; }

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

入力例
em { color: #f00; }

1つの要素に対して複数の属性を与えたい場合は,「;」(セミコロン)で区切ります.

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

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

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

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

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

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

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

入力例
p em { color: #f00; }

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

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

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

* { 属性: 値; }

クラス

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

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

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

入力例
em.author { font-weight: bold; }

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

入力例
<p>「吾輩は猫である」の作者である <em class="author">夏目漱石</em> は...,(略)</p>

次のように,1つの要素に対して複数のクラスを指定することができます.たとえば,em タグに,authornovel の2つのクラスを適用させるには次のように,指定します.

入力例
<p>「吾輩は猫である」の作者である <em class="author novel">夏目漱石</em> は...,(略)</p>

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

入力例
.author { font-weight: bold; }

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

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

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

この例は少し大げさかもしれませんが,これに近いものはいくつかみたことがあります.上の例では,pem そのものを指しています.しかし,ブラウザは,段落であるとか強調であることを判断することはできません.それゆえ,適切なマークアップを施しているわけではありません.しかしながら,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名 { 属性: 値; }

長さの単位

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

相対単位
em1 em は「M」の横の長さ
ex1 ex は「x」の縦の長さ
%画面サイズや,親となる要素に対しての割合
絶対単位
mmミリメートル
cmセンチメートル.1cm = 10mm
inインチ.1in = 2.540cm
pxピクセル.ディスプレイの1個の点,.主に画像サイズの指定で使う.
ptポイント.文字のサイズ.
pcパイカ.1pc = 12pt

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

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

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

出力メディアの指定

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

たとえば,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 属性を使用します.ただし,書体は環境に大きく依存し,書き手の意図しない出力結果になる恐れもあるので,書体の変更には注意が必要です.以下は,環境に依存しにくいフォントです.

"MS P明朝"(M, S, P は全角文字,空白は半角空白)や他の書体を指定することもできますが,環境に依存するので複数の書体を与えておくことが望ましいです.複数の書体を与えるには、値を「,」(カンマ)で区切ります.

入力例
p { font-family: MS P明朝, serif; }

文字の大きさ

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

入力例
h1 { font-size: 150%; }

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

文字の傾き (font-style)

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

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

文字の太さ (font-weight)

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

テキスト

行間 (line-height)

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

入力例
p { line-height: 150%; }

テキストの配置

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

入力例
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 で指定します.和文の段落の場合は,1文字分字下げを行うので,次のように指定します.

入力例
p {text-indent: 1em; }

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

文字色・背景色

文字色

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

入力例
em {
      color: #066;
      background: transparent;
   }

transparent は透明色を表します.

箇条書き

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

ol に対しては,次の値から選びます.

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

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

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

背景

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

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

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

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

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

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

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

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

枠線

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

値の指定は,次の通りです.

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

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

枠線
solid
実線
dotted
点線
dashed
粗い点線
double
二重線
groove
谷線
ridge
山線
inset
内線
outset
外線

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

入力例
p {border: thin solid #000;}