全キャリアが対応できるマークアップをする
キャリア別にサイトを用意する必要がないことは説明しました。
1.記述言語を決める
全キャリアに対応したページを作成するには、
XHTMLベーシック
で記述するとよいでしょう。
携帯端末ではHTMLを完全にはサポートしていません。例えばスクリプトは対応している端末の方が少ないですし、クリッカブルマップ(画像の特定部分にリンクを設定する機能)もサポートされていません。
どの携帯からでも情報にアクセスできるようにするにはXHTMLベーシックを利用するのが最善です。もちろん機能を把握し、HTMLやXHTMLで記述しても構わないのですが、その場合はきちんとアクセシビリティを確保できているか知る手段がありません。
決められたDTD(文書型)を利用すれば、W3Cのバリデーションサービスなどを利用することが可能になります。バリデーションサービスとは、そのページが文書型に則っているかどうかを診断し、エラーがある場合はその部分を知らせてくれます。またDreamweaverではバリデートする機能がついています。
文書型は、各ページの最初に
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
を記述します。その後にヘッダーがきて、ボディがきます。
上の部分をコピペするとよいでしょう。
XHTMLで注意する点は、タグは必ず小文字でなければならないこと(HTMLではどちらでもOKでした)。終了タグを省いてはならないこと。この2点です。HTMLはあいまいで、終了タグがなくても開始タグだけで表示できたりしました。また改行やイメージなどインライン要素にも終了タグが必要ありませんでした。
XHTMLでは必ず終了タグを用います。また改行やイメージタグは、
<br />,<img />というように、最後に半角スペースとスラッシュを入れることで閉じることができます。ぜひ覚えておきましょう。
2.画像形式を決める
これは各キャリアで対応がまちまちです。今のところ全キャリアが対応しているのはjpgとなっているので、できればjpgを用いるとよいでしょう。
汎用性の高いpngはDocomoがサポートしていません。DocomoではGIFを表示できますが、VodafoneではGIFは表示できなかったりします。
学校としては、対応フォーマットとシェアならば対応フォーマットを取るべきだと私は考えます。対応順はJPG＞PNG＞GIFです。シェアから言えば文字画像などにはDocomoがサポートしているGIFを使いたいところですが、理屈から言えばDocomoのシェアに加担していることになります。
3.絵文字は使わない
説明の必要はありませんね。
4.スクリプトは使わない
最近ではJavaScriptをサポートする端末が出てきました。が、わざわざややこしい動的ページを作る必要は学校にはありません。アクションの面白さなどよりも、確実かつシンプルな情報発信に注力すべきです。
5.Flashも使わない
同じく最近Flashをサポートする端末が出てきましたが、これはFlash Liteという携帯端末用に書き出したものだけですし、アクセシビリティを確保したFlashを作成する技術を無理して学ばなくてよろしいのではないでしょうか。
6.横幅に注意する
テーブルはできるだけ避けましょう。使う場合は横幅は設定しない方がよいでしょう。ブラウザの自動調整に任せたほうがよい結果になることの方が多いです。PCでもそうですが、ホームページは基本的に横スクロールは厳禁です。
最近はVGAサイズの液晶が多く、横幅240ピクセルが多いですが、コンパクトを売りにした携帯をよく売れているようなので、画像なども横幅は160ピクセル程度に抑えておいたほうが吉です。
7.見栄えに目をつぶる
見栄えはCSSで制御します。まちがってもfontタグは使わないこと。また、埋め込みスタイルシートも不可です。読み込みスタイルシートを使います。しかし、むずかしい場合はあきらめましょう。ブラウザは各タグにデフォルトである程度の見栄えをもたせています(例えばh1タグでは大きな太字のフォントになります)のでそれを利用すれば、むしろ分かりやすいページになります。
8.適切にマークアップする
最後に一番重要なことです。これはPCサイトでも実践してもらいたいものですが、HTMLが用意したタグを適切に使うようにしましょう。XHTMLで使えるタグは、
構造モジュール *
となっていますが、
文章にはp
リストにはul、リスト項目にはli
番号リストにはol、リスト項目にはli
定義リストにはdl、定義語にdt、定義説明にdd
連絡先など出どころを示すのにaddress
を使うということを守るだけで99％をカバーできると思います。
文章はBODYタグに直接書いていくのではなく、またFONTタグに記述するのでもなく、<p>〜</p>の中に書くようにします。
リストは単に・などをつけるのではなく、
<ul>
<li>リスト1番目の項目</li>
<li>リスト2番目の項目</li>
</ul>
というように記述します。ulをolにすると番号リストになります。
定義リストというのは、意外と使えるのですが、例えば
<dl>
<dt>名前</dt>
<dd>とも</dd>
<dt>住所</dt>
<dd神奈川県横浜市></dd>
<dl>
などと書くことができます。専門的な用語をdtに記述し、ddで詳しく説明をしてもよいですね。
addressタグはコピーライト部分や文責などに用います。
1.記述言語を決める
全キャリアに対応したページを作成するには、
XHTMLベーシック
で記述するとよいでしょう。
携帯端末ではHTMLを完全にはサポートしていません。例えばスクリプトは対応している端末の方が少ないですし、クリッカブルマップ(画像の特定部分にリンクを設定する機能)もサポートされていません。
どの携帯からでも情報にアクセスできるようにするにはXHTMLベーシックを利用するのが最善です。もちろん機能を把握し、HTMLやXHTMLで記述しても構わないのですが、その場合はきちんとアクセシビリティを確保できているか知る手段がありません。
決められたDTD(文書型)を利用すれば、W3Cのバリデーションサービスなどを利用することが可能になります。バリデーションサービスとは、そのページが文書型に則っているかどうかを診断し、エラーがある場合はその部分を知らせてくれます。またDreamweaverではバリデートする機能がついています。
文書型は、各ページの最初に
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
を記述します。その後にヘッダーがきて、ボディがきます。
上の部分をコピペするとよいでしょう。
XHTMLで注意する点は、タグは必ず小文字でなければならないこと(HTMLではどちらでもOKでした)。終了タグを省いてはならないこと。この2点です。HTMLはあいまいで、終了タグがなくても開始タグだけで表示できたりしました。また改行やイメージなどインライン要素にも終了タグが必要ありませんでした。
XHTMLでは必ず終了タグを用います。また改行やイメージタグは、
<br />,<img />というように、最後に半角スペースとスラッシュを入れることで閉じることができます。ぜひ覚えておきましょう。
2.画像形式を決める
これは各キャリアで対応がまちまちです。今のところ全キャリアが対応しているのはjpgとなっているので、できればjpgを用いるとよいでしょう。
汎用性の高いpngはDocomoがサポートしていません。DocomoではGIFを表示できますが、VodafoneではGIFは表示できなかったりします。
学校としては、対応フォーマットとシェアならば対応フォーマットを取るべきだと私は考えます。対応順はJPG＞PNG＞GIFです。シェアから言えば文字画像などにはDocomoがサポートしているGIFを使いたいところですが、理屈から言えばDocomoのシェアに加担していることになります。
3.絵文字は使わない
説明の必要はありませんね。
4.スクリプトは使わない
最近ではJavaScriptをサポートする端末が出てきました。が、わざわざややこしい動的ページを作る必要は学校にはありません。アクションの面白さなどよりも、確実かつシンプルな情報発信に注力すべきです。
5.Flashも使わない
同じく最近Flashをサポートする端末が出てきましたが、これはFlash Liteという携帯端末用に書き出したものだけですし、アクセシビリティを確保したFlashを作成する技術を無理して学ばなくてよろしいのではないでしょうか。
6.横幅に注意する
テーブルはできるだけ避けましょう。使う場合は横幅は設定しない方がよいでしょう。ブラウザの自動調整に任せたほうがよい結果になることの方が多いです。PCでもそうですが、ホームページは基本的に横スクロールは厳禁です。
最近はVGAサイズの液晶が多く、横幅240ピクセルが多いですが、コンパクトを売りにした携帯をよく売れているようなので、画像なども横幅は160ピクセル程度に抑えておいたほうが吉です。
7.見栄えに目をつぶる
見栄えはCSSで制御します。まちがってもfontタグは使わないこと。また、埋め込みスタイルシートも不可です。読み込みスタイルシートを使います。しかし、むずかしい場合はあきらめましょう。ブラウザは各タグにデフォルトである程度の見栄えをもたせています(例えばh1タグでは大きな太字のフォントになります)のでそれを利用すれば、むしろ分かりやすいページになります。
8.適切にマークアップする
最後に一番重要なことです。これはPCサイトでも実践してもらいたいものですが、HTMLが用意したタグを適切に使うようにしましょう。XHTMLで使えるタグは、
構造モジュール *
body, head, html, titleテキストモジュール *
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, varハイパーテキストモジュール *
aリストモジュール *
dl, dt, dd, ol, ul, li基本フォームモジュール
form, input, label, select, option, textarea基本テーブルモジュール
caption, table, td, th, tr画像モジュール
imgオブジェクトモジュール
object, paramメタ情報モジュール
metaリンクモジュール
linkベースモジュール
base
となっていますが、
文章にはp
リストにはul、リスト項目にはli
番号リストにはol、リスト項目にはli
定義リストにはdl、定義語にdt、定義説明にdd
連絡先など出どころを示すのにaddress
を使うということを守るだけで99％をカバーできると思います。
文章はBODYタグに直接書いていくのではなく、またFONTタグに記述するのでもなく、<p>〜</p>の中に書くようにします。
リストは単に・などをつけるのではなく、
<ul>
<li>リスト1番目の項目</li>
<li>リスト2番目の項目</li>
</ul>
というように記述します。ulをolにすると番号リストになります。
定義リストというのは、意外と使えるのですが、例えば
<dl>
<dt>名前</dt>
<dd>とも</dd>
<dt>住所</dt>
<dd神奈川県横浜市></dd>
<dl>
などと書くことができます。専門的な用語をdtに記述し、ddで詳しく説明をしてもよいですね。
addressタグはコピーライト部分や文責などに用います。
2006年02月05日(日) 18:37:00 Modified by web_encounter