4. 使える装飾方法と使えない装飾方法
XHTMLを使ってページを記述すれば、スタイルシートで装飾を記述することができます。 スタイルシートは、基本的にはPC用サイトを作る場合と同じように記述できますが、携帯サイトを作る上では「使えない装飾」・「使えない記述方法」があります。
装飾の記述は「style属性」を使う方法のみ
3大キャリア共通のページを作る場合は、スタイルシートは必ず「style属性」を使ってHTMLタグ内に直接記述します。例えば、以下のようにです。
<div style="color: #cc0000; font-size: smaller;"> ボックスの中身 </div>
style属性を使うのは望ましくない記述方法ではありますが、docomoの端末ではこの方法で記述されたスタイルしか読まれない(※)ので、こうするしかありません。
※docomoの端末は、2009年5月に発売された機種で初めて、上記以外の（もっと望ましい）記述方法でも読めるようになりました。 しかし、現状ではまだ上記の方法で書かれたスタイルしか読めない端末が大半ですので、もうしばらくは上記の方法に限定して記述する必要があるでしょう。
本来は他の書き方もあるものの……
スタイルシートを記述する方法としては、少なくとも文法上は以下の3方法があります。
- 独立した別ファイルに記述し、link要素で読み込む
例： <link rel="stylesheet" type="text/css" href="sample.css"> - style要素（<style>～</style>）に記述する
例： <style type="text/css"> div { color: red; } </style> - style属性を使って、HTMLタグ内に記述する
例： <div style="color: #ff8080;"> ～ </div>
最も望ましい記述方法は、「1」の独立した別ファイルに記述する方法です。 複数のページで共通したスタイルを使いたい場合は、この方法しかありません。
「3」の方法は、HTMLタグ内に直接装飾を記述する方法であり、最も使わない方がよい記述です。特に「XHTML Basic」では文法上、使えない仕様になっています。
※「XHTML Mobile Profile 1.0」であれば使用可能です。
auやSoftbankの端末では、上記の「1」～「3」のどの方法でも使用可能です。 しかし、（最新機種を除く）docomoの端末では、上記の「3」の方法しか使えません。 従って、単一ページで3大キャリアすべてに対応できるよう記述するには、「3」のように『HTMLタグ内に直接style属性を使って装飾を加える』方法を使うしかありません。 2009年5月発売モデルでは「1」の方法も使えるようになったので、今後は改善されていくでしょう。しかし、新機種の普及には時間がかかります。 まだしばらくは「3」の方法で作っておきましょう。
※これが、「XHTML Basic」ではなく「XHTML Mobile Profile 1.0」を採用した理由です。
リンクの装飾だけはstyle要素を使用可
なお、例外として「リンクの装飾」を作る場合だけは、docomoの端末でも「2」の方法が使えます。例えば以下のように記述できます。
<style type="text/css">
a:link { color: #0000ff }
a:visited { color: #800080; }
a:hover { color: #ff8000; }
</style>
この記述だけは、docomoの端末でも解釈されます。 （ここにリンクの装飾以外の装飾を記述しても、docomoの端末では無効です。ただし、auやSoftbankの端末では有効です。）
使えない装飾
基本的にはスタイルシートを使って自由に装飾できますが、記述しても無視されるスタイルがたくさんあります。
■どこでも無視される例：
例えば、font-weightプロパティやfont-styleプロパティを用いても、たいてい太字や斜体にはなりません。 em要素やstrong要素を用いた場合も同様です。
※特にdocomoでは、そもそもstrong要素をサポートしていないため、strong要素に対してスタイルを指定しても無視されます。 （auやSoftbankでは、strong要素だけでは装飾は変化しないものの、strong要素に対してスタイルシートで色を加えれば、色を変化させることはできます。）
■一部で無視される例：
「余白」・「幅」・「高さ」・「文字サイズ」などに関しては、『「ある特定の要素には有効」だが、「別のある特定の要素には無効」』といったように、 HTML要素によって適用可能なプロパティに差があります。
※例えばdocomoでは、div要素に対してはfont-sizeプロパティで文字サイズの調整が可能ですが、「見出し」を表現する h1～h6 要素ではfont-sizeプロパティは無視されます。
基本的な記述方法はPC向けサイトを作成する場合と一緒ですが、使える装飾内容には制限がありますので注意して下さい。 装飾はあくまでも「オマケ」程度と考え、ある装飾が実現されなかったとしても特に問題が発生しないようなデザインに止めておくのが現実的です。
それでは、ここからは具体的な装飾の記述方法をご紹介いたします。
【携帯サイトの作り方 第1回 目次】
1. はじめに・サンプル
2. XHTMLでベースを作る
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法 (このページ)
5. 文字色・背景色・文字サイズなどの装飾基本
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する
8. リンク・ページ内リンクを作る
9. ソースのまとめ
