しらぎくモバイルシステム VIに於けるｉモード向けXHTMLでの擬似枠線。

しらぎくモバイルシステム VIに於けるｉモード向けXHTMLでの擬似枠線の概要。

この機能は、CSSで枠線を引く事が出来ないｉモード向けXHTML対応端末で、指定されたブロックレヴェル要素について、設定に依り、要素の上下に擬似的に枠線のような横線を引く機能です。

ｉモード向けXHTMLでは、極めて限定された条件でCSSを利用する事が出来、その結果あらゆる要素への背景色の指定など表現力を増す事となりました。

しかし、利用出来る機能は極めて限定されたもので、例えば枠線を自由に引く事は出来ません。

• 実はKDDI/沖縄セルラー用のモバイルブラウザも、インライン要素には枠線は引けないなどの制限がありますが、こちらは実装上の問題で、ｉモード向けXHTMLでのCSSは仕様上の問題となっております。

そうすると、KDDI/沖縄セルラー端末などとの表現の差が出てしまうため、何とかこの差を減らすべく、ｉモード向けXHTML端末に対しては擬似的に枠線のようなものを引く機能を導入したものです。

しらぎくモバイルシステム VIに於けるｉモード向けXHTMLでの擬似枠線の使い方。(平成21年11月12日 更新)

$borderColor{'要素名'}='色コード';
				$borderWidth{'要素名'}='枠の太さ';

しらぎくモバイルシステム VIに於けるｉモード向けXHTMLでの擬似枠線についての注意事項。

枠線は<hr>要素で擬似的に表現されます

このため、携帯端末以外では枠線と要素の間が離れ過ぎるなど、見栄えに問題が生じる事もあります。

枠線は上下のみに引かれ、左右には引かれません

縦方向の線を引く要素がないためです。

• だから擬似的と言う訳ですが。

実際に表示させた例。

モバイル版しらぎくさいと内のうさ耳女子大生の紹介記事を実際に表示させてみると、

• ｉモード向けXHTML対応端末では、見出しの上下に山吹色の擬似枠線が
• WAP 2.0対応端末では、CSSに依るスタイル指定に依り見出しの上下左右に山吹色の枠線が

それぞれ引かれます。

加えて、WAP 2.0 対応端末ではclass属性で特別に指定した要素について、緑色の枠が表示されますが、これもｉモード向けXHTML対応端末では上下に緑色の擬似枠線が引かれる事で実現しているのが分かります。

• 表示例はシミュレーションに依るイメージのため、実機では若干異なる場合があります。

しらぎくモバイルシステム VIに於けるｉモード向けXHTMLでの擬似枠線についての解説。

ｉモード向けXHTML端末で無理矢理枠線のようなものを引かせるには、以下の二つの方法が考えられます。

テーブル(表)を利用する

かつて、CSSが普及するまでPC向けのHTML文書でも行われていた方法ですが、通常、テーブルの枠線は立体的なデザインとなっているため、要素への装飾用には向いていない場合があります。

横罫線で上下だけ表現する

<hr>要素(横罫線)については、こちらも立体的なデザインとなりますが、それをなくすための属性もあり、それを用いる事でテーブルより見た目が良い枠線となります。但し横方向のみですので、左右の枠線を引く事は出来ません。

今回制作者が採った方法は、後者の横罫線を擬似的に用いる方法です。

表を使えば上下左右に枠線が引けますが、枠線のデザインがどうしても違和感を感じるため(色に濃淡が出るなど)、色の濃淡を消せる横罫線を採る事にしたのです。

最後に。

平成21年 5月以降、漸くエヌ・ティ・ティ・ドコモもCSSに対応したｉモードブラウザ 2.0搭載端末をリリースするようになりましたが、今後も当分の間従来のｉモードブラウザ 1.0搭載端末が並行して出されるであろう事と、かつてのように簡単に機種変更がされ難くなりつつある事から、2.0端末への完全な移行はまだまだ先の事と考えられます。

つまり、今後もｉモード向けXHTMLのサポートを続ける必要があると言う事になります。

一方、本来あるべき作法と言える、CSSでのサイトデザインを行おうとすると、ｉモードブラウザ 1.0搭載端末での見栄えがKDDI/沖縄セルラーなどCSS対応端末と較べると見劣りすると言う問題があります。

• このため、今日でも携帯電話向けサイトではCSSを使わないようクライアントから依頼される事もあるそうです。

そうすると、KDDI/沖縄セルラー端末などとの表現の差が出てしまうため、せめて何とかこの差を減らすべく、ｉモード向けXHTML端末に対しては擬似的に枠線のようなものを引く機能を導入したものです。

• 旧世代専用のコンパクトHTMLについては、旧世代機が現行機に切り替わりつつある現状から、無理してサポートする必要はないと考えました。ただでさえパケット料金を考慮する必要がある旧世代機の場合は、装飾のためにパケット代を余計に払わせるのは却って良くないとも思われます。

尚、これと全く同じ考えから、第0.9510版(平成21年11月12日)にはｉモード向けXHTMLでのリスト項目マーカの機能も追加しました。