携帯サイト制作のヒント：外部CSSは使えますか？

一般的に、３キャリア向けXHTMLページを作るには外部CSSを使用せずstyle属性を使ったインラインCSSを使用する方法が推奨されています。
これは、auとソフトバンク、iモードブラウザ2.0搭載のドコモは外部CSSに対応するが、現在最も普及するiモードブラウザ1.0のFOMAでは外部CSSに対応せずインラインCSSだけという事情によるものです。

ラウンドアバウトはiモードブラウザ1.0のFOMAでも外部CSSを使った携帯サイトを見せることができます。class属性に名称（セレクタ）を書けば、ラウンドアバウトが外部CSSファイル中の該当するCSSプロパティをインラインCSSに展開するからです。ページの装飾に関する記述をXHTMLのそこかしこに散らばすのでなく外部CSSファイル一箇所に集められることのメリットは大きいです。

ラウンドアバウトの外部CSSの使い方の具体的な解説は、開発ガイド・開発リファレンスにゆずるとして、このエントリでは外部CSSが使えることがどれほど有意義かについて説明します。

●色彩を一括変更

例えばECサイトでセール価格を赤いフォントで表示しているとします。もしこの色を変えてサイズを大きくしようとなった場合、インラインCSSだとセール価格を表示する箇所をサイト中のファイルから探して一箇所ずつ直さないといけません。style="color:red"の属性で検索しても、それがセール価格の赤なのか別の売り切れの赤なのかがすぐに判らないので、細かく見ないといけないのです。

<span style="color:red">ｾｰﾙ価格：2980円</span>
<span style="color:glay">(通常価格：5040円)</span>

<span style="color:red">※売り切れました</span>

外部CSSならあらかじめsalepriceというクラスセレクタを付けておけば、他の警告文と重なる心配もセール価格がどのファイルに登場するかも一切気にする必要がありませんし、CSSファイルの修正だけで対応を終えることができます。商品ページが多ければ多いほど外部CSSによるメンテナンス性は高いはずです。

（XHTML）

<span class="saleprice">ｾｰﾙ価格：2980円</span>
<span class="normalprice">(通常価格：5040円)</span>

<span class="soldout">※売り切れました</span>

（CSS）

.saleprice {
color : red;
}
↓
.saleprice {
color : fuchsia;
font-size : x-large
}

●複雑なコードを外部CSSに集約できる

CSSプロパティがキャリアよって対応しなかったり要素によって効いたり効かなかったりと挙動が異なります。そのためXHTMLのあちこちにインラインCSSを書かなくてはいけない、複数のCSSプロパティを併記しなくてはいけないなどXHTMLの記述が複雑で煩雑なものになりやすいです。例を見てみましょう。

ケース１：同じCSSプロパティを複数個所に書く

（XHTML）

<div style="font-size:x-small">
年齢：<input type="text" name="age" style="font-size:x-small"/><br />
職業：<select name="area" style="font-size:x-small">
<option value="1">会社員</option>
<option value="2">学生</option>
<option value="3">主夫/主婦</option>
<option value="4">ｱﾙﾊﾞｲﾄ/ﾊﾟｰﾄ</option>
</select>
</div>

文字サイズを全体的に小さめになるようdivにインラインCSSを書きましたが、auはプルダウンリストだけフォントサイズが小さくなりません。auでも文字を小さくするためinputやselectにもインラインCSSを追加しました。

これを外部CSS化できると、こうなります。

（XHTML）

<div class="f1">
年齢：<input type="text" name="age" class="f1"/><br />
職業：<select name="area" class="f1">
<option value="1">会社員</option>
<option value="2">学生</option>
<option value="3">主夫/主婦</option>
<option value="4">ｱﾙﾊﾞｲﾄ/ﾊﾟｰﾄ</option>
</select>
</div>

（CSS）
.f1 { font-size:x-small }

属性を書く数は同じですが、あちこちにfont-size:x-smallを書くより簡潔な名前を付けた方がXHTMLソースが見やすくなります。大きさを変える場合もCSSの書き換えで対応できます。

ケース２：複数のCSSプロパティを併記する

（XHTML）

<hr style="width:80%;height:1px;border:1px solid #0000FF;background-color:#0000FF;color:#0000FF;" size="1" />

キャリアごとのhrタグの挙動の違いがあるので、区切り線の装飾を同じような見た目に揃えるにはこのように長い記述をします。区切り線はページの随所に使いたいものでもあり、インラインCSSを使う限りは各所でこのような記述をしないといけません。

外部CSS化すればXHTMLはこれだけスッキリします。

（XHTML）

<hr class="hr" size="1" />

（CSS）
.hr {
width:80%;
/* docomo・SoftBank用 */
height:1px;
border:1px solid #0000FF;
background-color:#0000FF;
/* au用。太さはsize属性で指定 */
color:#0000FF;
}

色々なプロパティを書かなければいけないことに変わりありません。しかしこうした複雑で難しい記述を外部CSSに出して集約させられること複雑で難しいことをコメントで残せれば、他の人が見ても事情がわかりますし、メンテナンス性が大きく向上します。

以上のことからも、携帯サイトで外部CSSが使えることのアドバンテージは、一般的に使われるインラインCSSよりもはるかに大きいことがお分かりいただけると思います。