サイト表紙
しらぎくのウェブサイト作成入門
コラム集
モバイル向けフルブラウザ対策

モバイル向けフルブラウザ対策(旧称・モバイルオペラ対策)。

平成16年 4月28日公開
平成17年 9月 3日更新

モバイル向けフルブラウザ対策(旧称・モバイルオペラ対策)・目次。

▲記事先頭
▽次項目

更新経歴
モバイル向けフルブラウザ対策の必要性
- モバイル向けフルブラウザ対策のもう一つの側面
おことわり
1. テーブルレイアウトはやめましょう
- 携帯端末ではテーブルは使えない？
- どうしてもテーブルレイアウトをしたいのなら…
  - テーブルのタグが無くても正しく読める順序に並べましょう
  - 色はスタイルシートで決めましょう
2. フレームもやめましょう (平成16年 8月 6日)
- 小さな画面でのフレームは拷問
3. 段組カラムには適切なナヴィゲーションを付けましょう (平成17年 9月 2日更新)
- 具体例 (平成17年 9月 2日修正)
4. ページ内外のナヴィゲーションを充実させましょう
5. 専用のCSSを用意しましょう
6. ダイナミックHTMLは無効にしておきましょう (平成17年 9月 3日更新)
- 方法 1. 携帯端末ではスクリプトでダイナミックHTMLを抑制する
- 方法 2. 携帯端末ではレイヤを表示させないようなスタイルを当てる
7. テストの方法
- 6.1. 実際に適切なスタイルで表示されるか？
  - 最適化されずに表示された場合
  - 最適化されて表示された場合
- 6.2. 楽に操作出来るか？

平成17年 4月14日: モバイルオペラに続いて、ノキア社製ボーダフォン端末で動くフルブラウザがリリースされたため、『モバイルオペラ対策』から改題し、それに対応したコンテンツとしました。

モバイル向けフルブラウザ対策の必要性。

▲記事先頭
△前項目
▽次項目

携帯端末(PHS)にオペラが搭載された機種が発売されて以来、幾つかのフルブラウザが携帯端末に実装されたり、配布されるようにもなりました。

これまでの携帯端末は専用のウェブしか閲覧出来なかったため、PCサイトの運営者は無視してもそれ程問題は無かったでしょう。

しかし、フルブラウザが携帯端末に搭載出来たとしたら、話は別です。

オペラやネットフロントなど、モバイル端末に搭載されるフルブラウザはPC向けのコンテンツを携帯端末でも閲覧すると言う全く別の発想でブラウザを供給しております。

事実、オペラが携帯端末での閲覧のために開発したと思われるスモールスクリーンモードは、殆どのコンテンツを取敢えず表示させる事が出来ます。

しかし、そのために様々な最適化の手法が導入されております。

携帯端末で閲覧した場合、制作する側が想定していないような見え方となる可能性があるのです。

そもそも、ウェブの見映えを完全に制作者側が掌握する事は不可能なのです。今までは殆どの環境が制作者側が想定した見映えを再現出来るように出来ていたので、ウェブデザイナたちはデザインを掌握が出来ると勘違いしていただけなのです。

その結果、何とか読める程度だったり、意味が掴めなかったりする可能性があります。

ここでは、モバイルでのフルブラウザ利用が珍しくなくなっている現状から、制作者たちが取敢えずやるべき対策を考えて見たいと思います。

モバイル向けフルブラウザ対策のもう一つの側面。

▲記事先頭
△前項目
▽次項目

モバイル向けフルブラウザ対策は、オペラなど特定の環境に合せると言うだけではありません。

モバイル向けフルブラウザ対策を適切に施したPC向けウェブは、特定のブラウザ(恐らくはインターネットエクスプローラ)しか想定していないウェブよりも遙かに多くの環境で適切に閲覧出来るものとなります。

それは、モバイル向けフルブラウザ対策は、使いやすいウェブ作りの一般論に基づいているからです。

つまり、モバイル向けフルブラウザを意識するものの、実際には無数の環境に対応出来るような対策を施す事になるのです。

WAP 2.0でも、メモリの容量が増えれば、PC専用ウェブの閲覧も問題が無くなる可能性があります。モバイル向けフルブラウザ対策は、WAP 2.0対策にもなり得るという事です。

おことわり。

▲記事先頭
△前項目
▽次項目

制作者がオペラ 7のスモールスクリーンモードでネットサーフィンをやっていて気付いた事に対する対策案を書いております(加えて、制作者自身への戒めとして…)。
この為、ここに書いてある事を実行するだけではモバイルオペラで便利にならないかも知れません。実際にオペラ 7のスモールスクリーンモードで閲覧してみて、不便さを感じなくなるような措置を執る事が一番なのです。
この記事は、一般のウェブ制作者の方にも是非ご覧頂きたいと思い、敢えて排除勧告が出ている要素や属性を例に用いている箇所がございます。

1. テーブルレイアウトはやめましょう。

携帯端末ではテーブルは使えない？

▲記事先頭
△前項目
▽次項目

例えば、オペラのスモールスクリーンモードでは、横幅を取るようなテーブルレイアウトなどは解除して表示させようとします。

テーブルを用いたら必ず解かれてしまうと言う訳ではないのですが、レイアウト用のテーブルは殆どの場合無効にされてしまいます。
テーブルに限らず、CSSによるフローティングやポジショニングも幅の狭い画面での表示に堪えられないと判断されると解消される事があります。

また、テーブルを解除するという事は、テーブルに設定された背景色が消されてしまう事を意味します。

その結果、ブラウザの設定によっては前景色と背景色が近くなって読めなくなってしまう事があるのです。

この事から、今までやってきた枠線をつけるためだけ、或いは背景色を変えるためだけにテーブルを使うと言うやり方は通用しない事が分かります。

オペラ以外のモバイル向けフルブラウザも、当然ながらレイアウト目的と判断されたテーブルに対しては、何らかの措置を施す事が予想されます。

もはや、テーブルレイアウトは、閲覧者にとっても制作者にとってもやってはいけないものになりつつあるのです。

どうしてもテーブルレイアウトをしたいのなら…。

▲記事先頭
△前項目
▽次項目

テーブルを使ったレイアウトは否定出来ないと言う意見もあります。

実際、テーブルレイアウトをする場合でも、適切な対処をする事で問題が解消されるようになります。

テーブルのタグが無くても正しく読める順序に並べましょう。

▲記事先頭
△前項目
▽次項目

テーブルを解除すると言う事は、テーブルによる順序の制御が出来ない事を意味します。

つまり、テーブル関連のタグが無くても問題無く読めるような順序で文書を書かなければなりません。

テーブルタグを取り除いても問題無く読めるテーブルを線型化されたテーブルと言います。

色はスタイルシートで決めましょう。

▲記事先頭
△前項目
▽次項目

テーブルレイアウトを行う場合でもテーブルのセルの内容にはしっかりスタイルを当てておく必要があります。

テーブルのセルは、見出しセルが<th>要素、その他のセルが<td>要素となりますが、その内容にしっかりスタイルを当てるようにしましょう。

例えば、以下のような場合は問題がおきるかも知れません。

… <td bgcolor="#ccffff">
    <font color="#007700">テーブルのセル</font>
    </td> …

この場合、セルの背景が水色、文字は深緑と言う組合せですが、テーブルのセルの開始タグが無効になってしまう可能性があり、その場合背景色が何色になるのか予想出来ません。

一番いいのは要素やbgcolor属性を排除する事です。

例えば、以下のような専用のスタイル定義ファイルを用意します。

ここで、クラス名は記述内容に相応しいクラス名とします。

.クラス名 {
    background: #cff;
    color: #070;
    }

一方、HTML文書側は以下のようにします。

… <td>
    <span class="クラス名">テーブルのセル</span>
    </td> …

これだけで、携帯端末でも問題無く表示可能となるでしょう。

実際には要素を要素に単純に置換えるべきではありません。例えば強調のつもりなら要素、専門用語なら<dfn>要素、引用元や書名なら<cite>要素、引用フレーズや台詞なら<q>要素などと言った要素が便利に使え、それぞれに適切なスタイルを当てる事が出来ます。要素は該当する要素が無いと判断した場合に最終手段的に利用すべきものです。
本来は<td>要素に直接スタイルを当てても問題は無いのですが、モバイルオペラでは<td>要素に当てた属性は開始・終了タグごと切捨てられてしまう可能性が高く、そうなってしまうと効果が出なくなります。他のモバイル向けブラウザでもテーブル解除機能を持つものは、同様の問題が生じるでしょう。

一覧の先頭へ

2. フレームもやめましょう。(平成16年 8月 6日)

小さな画面でのフレームは拷問。

▲記事先頭
△前項目
▽次項目

一方フレームですが、携帯端末の小さな画面ではフレームによって更に小さく切り刻まれてしまうと、とても見るに堪えられないサイトになってしまいます。

このため、モバイルオペラにはフレームを切替える機能があります。

しかしながら、実際にこの機能を使ってフレーム式のサイトをご覧になればお分かり頂けると思いますが、とにかく操作が面倒なのです。

また、オペラ以外でも携帯端末向けブラウザでは、フレームについて何らかの措置を執る事が予想されます。

更に言うなら、携帯端末以外でも、視覚障碍者にはフレームの構造を見渡す事は困難です。

そう言った点でも、フレームは問題が多過ぎます。

現行のモバイルオペラでは、各フレームの内容を順番に表示するようになっております。しかしながら、やはりフレーム間の移動には長いスクロールが伴い、不便である事には変わりはありません。また、モバイルオペラ以外のフルブラウザではどのようにしてフレーム機能を実現するかは想像出来ません。

対策としては、フレームを使わずに、コンテンツとナヴィゲーションを一つのページに収める事です。

実はHTMLにはフレームが使えない環境で適切に利用出来るようにするための要素も用意されております。しかしながら、これらの要素を活用してフレーム式のサイトを作るくらいなら、素直にフレーム無しでサイトを作った方が遙かに執るべき手続きが少なくなります。
尚、当サイトではフレームについては解説を忌避させていただきました。その理由はフレームについてで解説しましたので、ご一読下さい。

一覧の先頭へ

3. 段組カラムには適切なナヴィゲーションを付けましょう。(平成17年 9月 2日更新)

▲記事先頭
△前項目
▽次項目

フレーム以外にも、画面を二、三段のカラムに分割してメインのコンテンツの左右にサブのコンテンツやナヴィゲーションを組込んだ構成のサイトは結構多いようです。

これがテーブルによるものか、CSSによるものかは問わず、携帯端末では全てのカラムを一度に見渡す事は不可能です。

この為、HTML文書で言えば前の方に置かれたカラムから順番に表示していく事になります。

全てのカラムが一度で見渡せれば、目を追うだけで済む事なのですが、そうは行かないとなると、カラムからカラムへの移動を容易にするナヴィゲーションが求められます。

具体的には、カラムの始めには他のカラムへ移動出来るアンカーを降ろし、末尾にはカラムの先頭へのアンカーを降ろしておきます。

勿論、これらのアンカーはPC環境では不要でしょうから、PC向けのCSSスタイル定義ファイルでは画面から隠し、モバイル専用のCSSでは表示されるような専用のクラスを当てて置けばよいでしょう。

現在の音声ブラウザとして代表的な『ホームページリーダ』でアクセスすると、「display: none;」プロパティを当てている要素が読上げられないと言う問題があります。

このため、グラフィカルなブラウザでは非表示にするのではなく画面から隠してしまうと言うテクニックを使うと良いでしょう。

詳しくは、ホームページリーダ対策で解説しました。
更に、これらのアンカーには数字によるアクセスキーも付け加えると良いでしょう。携帯電話に限らず、数字ボタンはあらゆる端末が備えていると考えられるからです。

尚、携帯端末には通常通りの表示で良いでしょう。

また、各カラムの冒頭には、他のカラムへのアンカーの前に何のカラムかを見出しとして書いておくと更に便利になります。

もちろん、この見出しもPCでは恐らく不要でしょうから、CSSでPCでは非表示となるようにすれば良いでしょう。

この手続きは、レイアウトを適切に処理出来ないブラウザや、視覚障碍者などが音声や点字でアクセスする際にも大きな助けとなります。

具体例。(平成17年 9月 2日修正)

▲記事先頭
△前項目
▽次項目

今、一番上にサイトの題名が見出しとなっていて、その下に左にメニュー、右にメインコンテンツと言う二段カラムを表組みで実現しているとします(一部排除勧告が出ている属性あり)。

<h1>(サイト名)</h1>
<table width="100%">
    <tr>
        <td width="30%">
            (メニュー本体)
            </td>
        <td width="70%">
            (メインコンテンツ本体)
            </td>
        </tr>
    </table>

この様な場合、以下のようにすれば問題も少なくなるでしょう。

ここでは、更にテーブルレイアウトを解消して、スタイルによるレイアウトを実現するものとします。
更に、HTML文書の冒頭にアクセスキーの説明を入れておきました(蛇足と思う方もいるかも知れませんが)。

HTML文書ソース

<dl class="forNonPC">
    <dt>ページ内操作方法(アクセスキー対応ブラウザのみ)。</dt>
    <dd>
        <dl>
            <dt><a accesskey="0" href="#C-MAIN">本文への移動</a></dt>
            <dd>0ボタンを押下</dd>
            <dt><a accesskey="9" href="#C-SUB">メニューへの移動</a></dt>
            <dd>9ボタンを押下</dd>
            </dl>
        </dd>
    </dl>
<hr class="forNonPC" />

<h1>(サイト名)</h1>
<div id="C-SUB">
    <h2 class="forNonPC">メニュー</h2>
    <ul class="forNonPC">
        <li><a href="#C-MAIN">本文へ</a></li>
        </ul>
            (メニュー本体)
    <ul class="forNonPC">
        <li><a href="#C-SUB">メニューの先頭へ</a></li>
        </ul>
    </div>
<div id="C-MAIN">
    <h2 class="forNonPC">本文</h2>
    <ul class="forNonPC">
        <li><a href="#C-SUB">メニューへ</a></li>
        </ul>
            (メインコンテンツ本体)
    <ul class="forNonPC">
        <li><a href="#C-MAIN">本文の先頭へ</a></li>
        <li><a href="#C-SUB">メニューへ</a></li>
        </ul>
    </div>

PC専用CSSスタイル定義ファイル(一部) (平成17年 9月 2日修正)

#C-SUB {
    width: 30%;
    margin: 0;
    border: 0;
    padding: 0;
    float left;
    …
    }

#C-MAIN {
    width: 70%;
    margin: 0;
    border: 0;
    padding: 0;
    float right;
    …
    }

.forNonPC {
    position: absolute;
    top: 0em;
    left: -1000em;
    width: 900em;
    }

一覧の先頭へ

4. ページ内外のナヴィゲーションを充実させましょう。

▲記事先頭
△前項目
▽次項目

他ページへのナヴィゲーションも操作しやすい位置に記述し、ページが長過ぎるようなら適宜他の箇所へのアンカーを降ろしておきます(これは前項とも重なりますね)。

これらのアンカーがPC向けでは不要であるなら、専用のスタイルを当ててPCでは非表示にすればよいのです。

一覧の先頭へ

5. 専用のCSSを用意しましょう。

▲記事先頭
△前項目
▽次項目

ウェブデザインにおいて一番好ましい方法は、物理要素(要素など)でのマークアップは行わず、出来るだけCSSによるデザインを行うようにする事です。

PCでは不要でも、携帯端末などにはあると便利なアンカーや案内表示もあります。

そう言ったものは、PC向けCSS(media="screen, projection ")では非表示にして、モバイル向けCSS(media="handheld, tty ")では表示させるなどと言うように、メディア別にスタイル定義ファイルを用意するだけで表示を切替えられます。

このように、CSSを上手に活用すれば、HTMLを殆ど変える事無く適切な表示や案内が出来、非常に便利なウェブとなるのです。

詳しくは当コンテンツの携帯電話向けコンテンツ内のモバイル版オペラのCSSをご覧ください。

モバイル向けのスタイル定義ファイルを作成するに当たって、注意すべき事を挙げておきます。

フローティングやポジショニングなど、二次元的なレイアウトは殆ど使えないと思ってください。一応モバイルオペラのCSSはPCでのCSSに準じますが、画面に入り切らないと判断されると最適化処理で削除されてしまいます。なるべく、上から下へ直線的に配置するようにして下さい。
モバイル用のスタイル定義ファイルで「@import規則」を用いる場合は、必ずメディアタイプも指定しておいてください。そうしないと、オペラ 6ではインポートしたスタイル定義ファイルが有効になってしまうと言う不具合が起こります。この事についてもモバイル版オペラのCSSで解説しました。

スタイル定義ファイルは、以下のように<link>要素でリンクする事が出来ます。

以下はXHTMLの場合です。HTMLの場合はタグの一番後ろの「 /」を取り払ってください。

<link rel="stylesheet" type="text/css" media="screen,projection" href="PC専用のスタイル定義ファイルへのURI" />
<link rel="stylesheet" type="text/css" media="handheld ,tty" href="モバイル専用のスタイル定義ファイルへのURI" />

尚、物理要素で実現出来ないものだけスタイルシートでデザインをするというやり方では、モバイルオペラなどの携帯端末環境で問題を起こす事があります。

モバイルオペラはモバイルでの閲覧の妨げとなるタグを尽く除去します。その結果物理要素の効果が無くなってしまい、スタイルに問題が生ずる事になります。他のブラウザでも同様の措置が執られる可能性があります。

必ず、全てのスタイルをCSSで当てるようにしてください。

一覧の先頭へ

6. ダイナミックHTMLは無効にしておきましょう。(平成17年 9月 3日更新)

▲記事先頭
△前項目
▽次項目

レイヤを用いたダイナミックHTMLは、小さな携帯端末では却って使いにくくなる原因にもなります。

つまり、携帯端末ではレイヤが邪魔になる事があります。

全てのダイナミックHTMLが邪魔になるとは思えませんが、多くは問題を来たす事となるでしょう。

方法 1. 携帯端末ではスクリプトでダイナミックHTMLを抑制する。

▲記事先頭
△前項目
▽次項目

そこで、狭い画面には不適当だと判断したら、そのような機能を実現するスクリプトには、携帯端末を排除する処理を付け加えましょう。

但し、あくまでもダイナミックHTMLなどの問題ある処理を抑制するのが目的であり、決して閲覧を排除するのが目的ではありません。技術的には特定の環境を門前払いする事は可能ですがそのような失礼な真似は絶対にしないでください。

安直なやり方ですが、現状ではユーザエージェント文字列を利用して弾くしか無いようです。

具体的には、ユーザエージェント文字列に「Win」「Mac」などのデスクトップ用OSを表す文字列が含まれていない場合に弾けばよいでしょう。

詳しくは当コンテンツのJAVAスクリプトの使い方内の携帯電話向けブラウザの判別をご覧ください。

例えば、HTML文書に以下のようなテキストを埋込むJAVAスクリプトがあり、それが携帯端末では邪魔になるとします。

…
    document.write('<p>スクリプトが出力したものです。</p>');
    …

この場合、以下のようにスクリプトの冒頭で携帯端末を弾くという対策が執れます。(平成17年 9月 3日修正)

…
    // 携帯端末を排除する。
    if ((navigator.userAgent.indexOf('Mozilla/')>-1 || navigator.userAgent.indexOf('Opera/')>-1) &&
        navigator.userAgent.indexOf('Win')<0 &&
        navigator.userAgent.indexOf('Mac')<0 &&
        navigator.userAgent.indexOf('X11')<0 &&
        navigator.userAgent.indexOf('Linux')<0 &&
        navigator.userAgent.indexOf('B-right/V')<0 ||
        navigator.userAgent.indexOf('UP.Browser')>-1 ||
        navigator.userAgent.indexOf('Nokia/')>-1 ||
        navigator.userAgent.indexOf('SIE-')==0 ||
        navigator.userAgent.indexOf('MOT-')==0) {
        return(0);
        }
…
    document.write('<p>スクリプトが出力したものです。</p>');
    …

但し、この方法は実は完璧なものではありません。

この判定をすり抜けてしまうモバイルフルブラウザもあり得るからです。

逆にPCブラウザの中にも、この判定で弾かれてしまうものがあるかも知れません。

このため、万が一そう言う環境があったとしても問題が起こり難くなるようなスクリプトが書けるのなら、そのようにすべきと言えます。

後述の方法を併用するのも有用でしょう。

方法 2. 携帯端末ではレイヤを表示させないようなスタイルを当てる。

▲記事先頭
△前項目
▽次項目

もう一つの方法は、スクリプトがHTML文書に埋込むテキストに対して、特別なクラスを与えておき、HTML文書のヘッダ部にはそのクラスに対して携帯端末では表示させないようなスタイルを出力すると言うやり方があります。

例えば、HTML文書に以下のようなテキストを埋込むJAVAスクリプトがあり、それが携帯端末では邪魔になるとします。

…
    document.write('<p>スクリプトが出力したものです。</p>');
    …

この場合、以下のようにJAVAスクリプトが出力するHTML要素に特別なクラスを当てて出力するようにします。

…
    document.write('<p class="forPCOnly">スクリプトが出力したものです。</p>');
    …

更に、HTML文書のヘッダ部に、以下のようなスタイル定義を出力するスクリプトを埋込みます。

<style type="text/css">
.forPCOnly {
    display: none;
    }
    </style>

<style type="text/css" media="screen, projection, tv">
.forPCOnly {
    display: block;
    }
    </style>