携帯サイト（ケータイサイト）の作り方

2008/07/05 2014/11/10

1年以上前の記事です。内容が古い可能性があります。

以前、携帯サイト（i-modeサイト）でCSSを使う方法を説明しましたが、
加えてサイト内のデザイン方法もメモしておくことにしました。
前回の記事が一部必要の無いところまで解説してしまっているので、そちらの指摘も兼ねています。
それは「XML宣言」です。
記述がXHTMLになっていれば（もっと言うと拡張子がxhtmlになっていれば）「XML宣言」なくとも問題ありませんでした。
せっかくなのでトラックバックを送りつつそのままにしておこうと思っています。

なお、今回はDreamWeaverを使って作る方法となっています。
が、他のソフトでも基本変わりないです。

1. まずは新規ドキュメント（「ファイル」→「新規」）を「HTML」の「XHTML Mobile（モバイル）1.0」で作成する。
2. 次に「修正」→「ページプロパティ」で「タイトル/エンコーディング」を確認。
エンコーディングが「日本語（シフト JIS）」になっていればOK。
※ユニコード（UTF-8）でもi-modeでは問題ないがAUで文字化けがありました。
3. 基本的に全ての行を<DIV>タグで囲みstyle属性でスタイルを指定していく。
利用価値の高い使えるstyleに関しては後半で解説します。
4. 画像は横幅最大240px。回り込みを設定するときは80px程度が最適。
5. リンク色（ロールオーバー時の文字色等）に関してだけは<HEAD>内に<STYLE>タグで指定する。
　a:link {color: #666666} 　a:visited {color: #666666} 　a:hover {color: #FF3333} 　a:active {color: #FF3333}
こんな感じ。
6. マーキー（文字が画面を横切る）やブリンク（点滅文字）の指定もタグではなくスタイルシートで。
7. 画像はあまり使わない（使っても3点が限度）。テーブル等も使わない。<div>と<img>、<hr>だけで十分です。
8. 出来上がったら保存。デフォルトでは拡張子がhtm（またはhtml）になってしまうので保存時にxhtmlに直す（これが一番重要!!）

利用価値の高い使えるstyle一覧
○文字の大きさを変える
　font-size:small
携帯サイトでは文字サイズは3段階までのようです。
smallで一段階小さくするかlargeで一段階大きくするかになります。
○文字に色をつける
　color:#FFFFFF
僕は背景に色を敷いて文字を白抜きにするときに良く使ってます。
もちろんどんな色でも設定できますのでそのあたりはご自由に。
○文字の背景に色を敷く
　background-color:#000000
タイトルやキャッチコピーに使うといいと思います。
○文字を中ぞろえ（センターぞろえ）にする
　text-align:center
バックグラウンドに色を入れて白抜き、センターぞろえで見出しの出来上がり。
もちろん右揃え等もできます。
○マーキー（文字が画面を横切る加工）
　display:-wap-marquee
携帯サイトでは良く見かけますね
○ブリンク（文字が点滅する加工）
　text-decoration:blink
いまや携帯サイトでもあまり見なくなりました。
以上は<div>タグ（一部は<span>タグにも）に使用するstyle要素です。
他にも<img>タグにfloat:leftを使ったり、<hr>タグにborder-color:#FF0000を使ったりという技もありますが、それに関してはまた後日。