ホーム > ＨＰ作成支援 > モバイル対応ホームページを作ろう!! > Step 3

モバイル対応ホームページを作ろう!!

Step 3 基本的なタグを覚えよう

　Step 3 からはついにホームページを構成するプログラムについて覚えていきます。ホームページは一般にHTMLと呼ばれる言語で構成されています。しかし、モバイル対応ホームページではちょっと違っていて、Compact HTML、MML、HDML、XHTML Basicの４種類の言語が使われています。

モバイル「キャリア×言語」対応表
キャリア CHTML MML HDML XHTML
DoCoMo mova ◎ × × ○
FOMA ◎ × × △
SoftBank □ ◎ × □
EzWeb (au) ○ × □ ◎
EMOBILE ◎ × × ◎
WILLCOM ◎ × × ○

◎…完全に対応している
×…完全に対応していない
□…サーバーで自動変換されることで表示できる
△…一部の機種で対応している
○…表示がおかしくなることがあるが、だいたい表示できる

キャリア 使用できる言語
DoCoMo mova CHTMLが望ましい。XHTMLは一部で表示が崩れる。
FOMA CHTMLとXHTMLの両方に対応。ごく一部の機種はXHTMLに未対応。
SoftBank 対応言語はMML。ゲートウェイサーバでHTMLをMMLに自動変換。CHTMLでほぼ問題ない。
EzWeb (au) XHTMLが望ましい。CHTMLは一部で表示が崩れる。
EMOBILE CHTMLでもXHTMLでも表示可能だが、公式サイトではXHTMLが推奨されている。
WILLCOM CHTMLが望ましい。XHTMLは一部で表示が崩れる。

　以上のことから、すべてのキャリアに完全に対応している言語はないことになります。つまり、すべてのキャリアから利用可能なホームページを作ろうと思うとき、3種類の言語でそれぞれのキャリア用に別ページを作らないといけないことになります。

　はっきり言って、これは非常に大変な作業となります。まず、すべての言語を勉強しないといけませんし、１ページ作るために、3倍の苦労が必要となると、面倒くさくなって絶対に長続きしません。

　そこで、ゲートウェイサーバでの自動変換も含めるとすべてのキャリアで表示可能なCHTMLでホームページを作っていくこととします。


【CHTML (Compact HyperText Markup Language) とは】

　Compact HyperText Markup Language を強引に日本語訳すると「簡潔な、超文章をマーク付けする言語」という感じになります。これでは訳が分からないと思うのですが、実態はホームページを作成する上で使用される言語の一種で、HTMLを携帯情報端末からでも利用しやすいように定義し直したものです。

　HTMLは必ず<>（パーレーン）で囲まれた形で使用され、すべて半角英数文字で記述します。例えば、改行したいときには、<br>と記述します。この<br>は「改行しろ」という命令文になるので…

これはサンプルです。<br>どうなりますか？

と記述した場合、HTMLに対応したブラウザから見ると、

これはサンプルです。
どうなりますか？

と表示されることになります。このようなさまざまなルールも持った命令文をまとめてHTMLと呼びます。また、これら<>で囲まれた命令文は一般に「タグ」と呼ばれているので、以下、タグで説明していきます。

　タグは、基本的に始まりを示すタグと終わりを示すタグと二つをペアで使用します。例えば文字のセンタリングは、<center>で始め、</center>で閉じるという形で使用します。centerに限らず、終わりを示すタグは必ず</*****>という形になります。

<center>タイトル</center>
これはサンプルです。<br>どうなりますか？

と記述した場合、HTMLに対応したブラウザから見ると、

タイトル
これはサンプルです。
どうなりますか？

と表示されます。

　種類は少ないですが、中には単独で使用するものもあります。線をひく<hr>や改行の<br>などです。

<center>タイトル</center>
<hr>
これはサンプルです。<br>どうなりますか？

と記述した場合、HTMLに対応したブラウザから見ると、

タイトル
これはサンプルです。
どうなりますか？

と表示されます。

　タグには色やサイズを指定したりする属性を付加することができます。例えば、文字の色を変えたい場合には<font color="Red">赤色だよ</font>というように記述しますが、これは<font>タグにcolorという属性名、Redという属性値を指定していることになります。


【基本的なタグを覚えよう】

　タグがどんなものはだいたい分かってもらえたと思うので、実際にタグを覚えていく段階に入りましょう。絶対に覚えなくてはいけないタグというのは、実は数えるほどしかありません。特にモバイル対応ホームページでは使えるタグが限られているので、簡単に覚えられるでしょう。

HTML文書であることを定義する

　インターネット上にはいろいろな種類のファイルが存在しています。そこで、「これはHTMLで書かれている文章なんだよ」という宣言をする必要が出てきます。

<html>
<head>
<title>タイトル</title>
</head>
<body>
.
.
.
</body>
</html>

<html>と</html>は、HTMLファイルであることを宣言するためのもので、文章の先頭と末尾に記入します。

<head>と</head>の間には、ページのタイトルや作成に関する情報などを記述します。ここに記述した内容はブラウザには表示されません。

<title>タイトル</title>で、そのページのタイトルを設定できます（ブックマークした場合などに有効）。

<body>と</body>で囲まれた部分がブラウザに表示されます。また、<body>には背景色や文字色などを指定する属性を付加することができます。

まとめ

　必ず覚えなくてはいけないタグは以上の4つです。この4つさえ覚えていれば、あとは<body>と</body>の間に文章を書き込むだけでページを作成することができます。どう？簡単でしょう？　あとの細かいタグは追々でも覚えていけば良いので、さっそく実際のページ作りに入りましょう！



Presented by
- Tor World -