まずページをつくってみよう　その4
テキストにスタイルを付けてみよう

矢野りん／ライター

2006.06.20

　XHTMLの記述をひととおり経験したら、次はページのレイアウトに欠かせないスタイル（CSS）をつくってみよう。詳しいCSSの作り方は他のリファレンスにまかせることにして、ここではCSSをXHTMLに適用させる方法と、ごく基本的なCSS作りの約束事を押さえることにする。

head部分にリンク要素を追加

　ところで前回重要な「アレ」を入れずに終わったが、スタイルの前に「アレ」を入れよう。おわかりかもしれないが、アレとはtitleのこと。文字情報であるtitleはmetaで文字コードを指定してから入れる。ブラウザ最上部に表示されるこの部分はユーザーにとってサイトを検索する際一番重要な手がかりになるので、正しいサイト名や情報を格納した場所などが読んで伝わるような言い回しで文字要素を入れておく。では早速titleの下にCSSを読み込む記述を入れよう【図１】。

【図１】　作例で使用したソースコードの全体。前半と後半のタグ構成に注目

--------------------------------------------------------------

< link href="font.css" type="text/css" rel="stylesheet" media="screen" / >

--------------------------------------------------------------

　独立した外部ファイルとして作ったCSSを参照するのが基本だ。(X)HTMLに直接書き込む方法もあるが、スタイルと情報は切り分けたい。relという属性はリンク相手との関係を示すもので、ここでは「スタイルシートとして読み込む」ことを示している。media属性はスタイルの効力を及ぼすメディアを指定する方法で、現在はモニターなどの画面全般を指定している。印刷向けのスタイルシートを作る時はこの値がprintとなる。link属性は空要素なのでmeta同様、記述の最後にスラッシュを入れる。

CSSのスタイルの基本

　次に簡単なCSSを作成してみよう。CSSの基本的な書き方は以下のとおり。

--------------------------------------------------------------

セレクタ　{プロパティ　: 値 ; }

--------------------------------------------------------------

　「セレクタ」はスタイルを適用する対象のこと。この作例なら本文を意味するタグのbodyや大見出しのh1はセレクタに当たる。このタグを使った箇所のスタイルをプロパティや値で決めていく。セレクタにはタグそのものでなくidをあわせる方法やclassという相手先の振り分け方を使うこともある。

　作例の本文テキストはbodyをセレクタに指定した【図2】。文字色はグレーで文字サイズはブラウザがデフォルトでMの時を表示したサイズより0.85％小さいサイズを使う。Mから0.85縮小とは何かというと、CSSでは頻繁に使う文字サイズ指定方法のemのこと。emは大文字の英字Mのサイズを基準にした考え方である。正確には上下の余白部分の解釈も含まれるのでMそのもののサイズだけが目安になるわけではないが、ターゲットブラウザがMをどう表示するかを最初に確認しておよその見え方が把握できる【図3】。bodyで指定した文字サイズは以降ブラウザのデフォルト値と同等の（親属性）になる。つまり、bodyで文字の縮小を指定したページではh1の文字サイズも0.85縮小したMを基準にサイズが決まってくる。作例ではデフォルトサイズ×0.85×2のサイズが大見出しだ。ピクセルやポイントの絶対的な数値でサイズを指定することもできるが、クライアント（ユーザー側のブラウザ）の環境を1とするemの指定方法が基本だ。

【図２】　作例に使用したスタイルの記述。文字サイズの指定方法が理解のキモだ。フォントは広く普及しているものなら指定しても大丈夫

【図３】　emを理解するため、Mを表示した例。ダークグレーのＭは行間のサイズがどう解釈されているのかを知るため作ったイメージ上のシミュレーション。h1の行間はきっちりM1つぶんの高さになっている。実際は本文ブロックの余白部分に食い込まないので、若干広めに見える。本文ブロックの行間は見かけ上も正確にＭ１つぶんの高さになっている

　最後にCSSのファイルにXHTML側ですでにリンク指定したfont.cssという名前を付けて、XHTMLと同じ場所に保存してみよう。作例とほぼ同じ見栄えになったはずだ。もしスタイルがうまく適用されなかったら、XHTMLがちゃんとUTF-8でエンコードされているかどうか、CSSの記述に誤りはないか（セミコロンとコロンの取り違えはよくあるミス）確認してほしい【図4】。