【ホームページ作成】携帯サイトの作り方 第1回 作成方法の基礎

5. 文字色・背景色・文字サイズなどの装飾

ここでは、ボックスに背景色を加えたり、文字に色を付けたり、ボックス内の文字列を右寄せ・センタリングしてみる方法をご紹介いたします。 この辺の記述方法は、PC向けサイトを作る場合とほとんど変わりません。ただし、文字サイズの調整には注意が必要です。

■ボックスに文字色と背景色を指定

div要素で作るボックスに、colorプロパティで文字色を、background-colorプロパティで背景色を指定するだけです。

<div style="background-color:#cc0000; color:white;">
ボックスの中身
</div>

上記ソースでは、ボックスの背景色が濃い赤色（#cc0000）になり、文字色が白色（white）になります。

■一部の文字色だけを指定

ボックス全体ではなく、一部の文字だけに対して色を指定したい場合は、span要素を使って以下のように記述します。

<span style="color:#ff0080;">ここだけ</span>変わります。

上記ソースでは、span要素で囲んだ「ここだけ」の文字だけが赤紫色（#ff0080）で表示されます。

■センタリング・右寄せ

ボックスの中身をセンタリング（中央寄せ）したり右寄せしたりするには、以下のようにtext-alignプロパティを使います。

<div style="text-align:center;">センタリング</div>
<div style="text-align:right;">右寄せ</div>

何も指定しなければ左寄せで表示されますが、値に「left」を指定することで左寄せを明示できます。

■文字サイズ

文字サイズは、font-sizeプロパティを使って指定します。指定する大きさは、「larger」・「smaller」などの相対指定や「x-small」のようなキーワードによる絶対指定などのほか、 「12px」や「18pt」など単位を使った数値で指定する方法があります。 しかし、docomoの端末では数値を使った指定は使えず、「smaller」や「xx-small」のようなキーワードで指定するしかありません。

<div style="font-size:smaller;">
文字を小さめで表示
</div>

キーワードによる絶対指定では、小さい順に以下のような値があります。
xx-small < x-small < small < medium < large < x-large < xx-large

■見出し

見出しを表す要素は、<h1>～<h6>まで使えます。標準の文字サイズは携帯端末によって異なります。 auとSoftbankは、font-sizeプロパティを使うことで文字サイズの変更が可能ですが、docomoでは変更できませんので注意して下さい。

■区切り線（水平線）

区切り線は、hr要素を使います。hr要素は空要素（内容のない要素）なので、XHTMLで記述する際にはタグの終わりに「/」を加えて、以下のように記述しなければならないので注意して下さい。

<hr />

改行を作る br要素も同様に <br /> と記述します。

次に、マーキー（流れる文字）を作ってみましょう。

【携帯サイトの作り方 第1回 目次】

1. はじめに・サンプル
2. XHTMLでベースを作る
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法
5. 文字色・背景色・文字サイズなどの装飾基本 (このページ)
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する
8. リンク・ページ内リンクを作る
9. ソースのまとめ