モバイル版オペラのCSS。
- この記事は情報として旧くなり過ぎて価値を喪失したものと判断されるため、保存扱い(obsolete)となっております。
モバイル端末でのオペラ。
携帯電話向けのCSSの携帯電話向けのCSSはWAP 2.0準拠のCSSを解説しました。
一方、携帯端末にはもう一つのブラウザとしてオペラがあります。
PC向けブラウザとして有名なオペラですが、携帯端末への進出にも力を入れており、現行のヴァージョン７以降は、携帯端末での表示機能であるスモールスクリーンモードが搭載されました。
オペラのアプローチは、携帯電話向けに小さくした規格ではなく、PC向けの規格を出来る限り適用しようと言うものです。
その発想は、明らかにWAPやｉモードとは異なるものです。
もちろん、携帯電話向けのコンテンツの表示も可能です。
制作者はPC向けのコンテンツは携帯端末で見るには多くの場合いささか長大すぎるのではと思っております。
ですから、携帯電話向けコンテンツでもオペラ搭載端末をサポートするのは、決して無駄なことではないと思います。
また、携帯端末での対処の仕方を調べ、それをPC向けコンテンツに応用すれば、オペラ搭載携帯端末で見てもらった場合により快適に見てもらえるようになる筈です。
スモールスクリーンモードでは、どのメディアが適用されるのか？
携帯端末向けのオペラと言っても、実際にはPC版との相違点は殆ど無いようです。
- 見づらかったら、ボタン一つでPC向けの表示とスモールスクリーンモードを切替えられるようです。
そこで、PC向けのオペラで試してみましょう。
- この記事を書いている時点ではまだ、オペラ搭載の携帯端末が市販されていませんので…。
まず、以下のようなHTML文書を用意します。
<?xml version="1.0" encoding="shift_jis"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="content-type" content="text/html;charset=shift_jis" /><title>テスト。</title><meta http-equiv="content-style-type" content="text/css" /><link rel="stylesheet" type="text/css" media="screen, projection" href="1.css" /><link rel="stylesheet" type="text/css" media="handheld" href="1M.css" /><link rel="stylesheet" type="text/css" media="tty" href="1T.css" /></head><body><h1>テスト。</h1><ul><li>PC向けのCSSなら黒文字で、</li><li>handheld向けのCSSなら赤文字で、</li><li>tty向けのCSSなら青文字で、</li></ul><p>見出しが表示される筈だけど、どうかな？</p></body></html>
続いて、PC向け(<link>要素でmedia="screen, projection"属性が当てられている)のスタイルシート「1.css」は、以下のようになっております。
* {background: #fff;color: #000;}
すなわち、全ての要素を黒文字で表示させます。
* {background: #fff;color: #f00;}
つまり、赤文字で表示させている訳です。
更に<link>要素でmedia="tty"属性が当てられている、CSSスタイル定義ファイル「1T.css」では、こうなっております。
* {background: #fff;color: #00f;}
つまり、青文字で表示させるものとします。
- 仕様に依れば、携帯端末は
media="tty"(等幅文字のみの端末)とも解釈できるため、これも試してみました。
実際に、オペラ 7.23を起動して、当該リソースを開いて見ます。
PC向けブラウザでの閲覧ですので、当然PC向けのCSSである「1.css」のみがリンクされた訳です。
続いて、シフトキーを押しながらF11キーを押して、スモールスクリーンモードに切り替えてみましょう。
どうやら携帯電話向けに開発されたとされるスモールスクリーンモードは、media="handheld"属性が当てられた「1M.css」のみがリンクされたようです。
つまり、オペラのスモールスクリーンモード(すなわち、恐らく携帯端末で搭載されているであろうオペラ)では、CSSのメディアを「handheld」とすることでリンクできるようです。
すなわち、オープンウェーブ社と全く同じ方法でスタイル定義ファイルをリンクできると言えそうです。
- ところで、スモールスクリーンモードに切替えたにも拘らず、画面の幅が狭くならなかったのは、このHTML文書が表組みを一切用いておらず、狭い幅の画面でも問題無く折返し表示が可能だからでしょうか。言換えれば、オペラは表組みを用いている場合に限って最適化の処理を行っているようなのです。
- 後で気付きましたが、スモールスクリーンで折返し表示が無理な場合は表組みが無くても最適化するようです。逆に最適化しなくても表示に問題が無いと判断される場合は例え表組みを用いていてもそのまま表示させるようです。
さらにプロパティの扱いについても調べてみましたが、通常モードでの挙動とほぼ同じでした。
つまり、オープンウェーブ社製品のCSS実装で省略されているプロパティなどが利用できるだけでなく、オープンウェーブ社製品より遙かに正確なレンダリングが期待できます。
- 但し、em単位やex単位など、文字の大きさを基準とした単位では、元の文字の大きさがスモールスクリーンモードではかなり小さな文字サイズに固定されているようで、(普段の文字の大きさの設定にも依るでしょうが)通常のモードより小さな値となるようです。
PC向けウェブにモバイルオペラ専用スタイル定義ファイルをリンクする場合の注意事項。
@import規則は使わない。
これは以下の二つが理由です。
- モバイルオペラでは@import規則が満足に機能しない
-
- オペラのヴァージョンに依ってはこの問題は改善されていると思われます。この記述は、オペラ 7.23でのものです。
フルスクリーンモードから切替えると機能するようですが、まさかそんな事を閲覧者に要求するのは無理でしょう。
- @import規則を含んだモバイル用スタイル定義ファイルをリンクするとオペラ 6.xでインポートしているスタイル定義ファイルが生きてしまう
- これはモバイルオペラの問題ではないのですが、PC向けのオペラ 6.xでは<link>要素のmedia属性で弾いている筈のスタイル定義ファイルを読込んでいるようなのです。
実際には記述を無効にしているようなので実害は無いのですが、@import規則で新たなスタイル定義ファイルを読込む際にmedia属性でのメディア制限を忘れてしまう、つまりそこでの記述が生きてしまうようなのです。
- この対策としては@import規則にもメディアタイプを指定すれば回避できます。
style属性でのスタイル指定は無効です。
- オペラのヴァージョンに依っては、style属性が有効の端末もあり得ます。この記述は、オペラ 7.23のものです。
style属性そのものも、本来は好ましいものではありませんが…。
オペラ 8での新機能。
オペラ 7.54では、handheldメディアのCSSをリンクしていない場合は、プレーンな表示になってしまいますが、オペラ 8.01ではscreenメディアのCSSをリンクしている場合は当該スタイル定義ファイルの表示色で表示するようになりました。
- 但し、有効なのは表示色関連(前景色と背景色)だけで、その他のプロパティは全て無視するようです。要するに、スモールスクリーンの機能を発動するものの、screenメディアのスタイル定義ファイルがある場合はそれで彩色すると言う訳です。
これにより、オペラ 8.x以降ではPC向けのスタイル定義ファイルだけでもそれなりにデザインされるようになったと言えますが、実際のところオペラ 8.xベースを搭載した携帯端末は現時点ではまだ市販されていないようですし、またオペラ 7.xベースの端末も急には減らないでしょうから、やはりモバイル専用のスタイル定義ファイルを用意する事をお奨めします。