手っ取り早く携帯サイトを作成する時のhtmlテンプレート
![](http://img.f.hatena.ne.jp/images/fotolife/m/moba13/20100916/20100916200825.jpg)
最近phpをいじるがてら、ひさびさに携帯サイトに触れているためメモメモ。
携帯サイトで装飾を入れるとなるとi-cssが云々って話があったりしますが、正直テストサイトでそんな面倒なことをしていられないので、だいたい以下のようなhtmlで作成しています。
とりあえず携帯サイト作りたい時テンプレート
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <meta name="description" content="ディスクリブション文章" /> <meta name="keywords" content="メタキーワード" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>サイトタイトル</title> </head> <body bgcolor="#FFFFFF" vlink="" link="" alink="" text=""> <font size="-2"> <marquee bgcolor="#666666"> <font size="-2" color="#FFFFFF">マーキー文章</font> </marquee> <div align="center"> <img src="./img/logo.gif" /><!-- ロゴ画像 --> </div> <table width="100%"> <tr> <td bgcolor="#666666" align="center"><font color="#ffffff" size="-2">インフォメーション</font></td> </tr> </table> サイトの概要文章<br /> サイトの概要文章<br /> サイトの概要文章 <table width="100%"> <tr> <td bgcolor="#666666" align="center"><font color="#ffffff" size="-2">メイン</font></td> </tr> </table> サイトのメイン文章<br /> サイトのメイン文章<br /> サイトのメイン文章 <hr /> <table width="100%"> <tr> <td bgcolor="#CCCCCC" align="center"><a href="http://" accesskey="0"><!-- トップページURL --> <font size="-2">(c)2010 - サイトタイトル</font></a> </td> </tr> </table> </font> </body> </html>
文字コードについて
DOCTYPEについて
キャッシュを消す
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" />細かい話はこの記事等を参考にすると良いと思います。 http://blog.tofu-kun.org/071207110211.php
フォントサイズについて
実際はいろいろ面倒な話があるようですが、font size="-2"でだいたいカバーできるので、とりあえずの時はこれで良いんじゃないでしょうか。
フォントサイズ-2にする理由については、昔いろいろとこの記事に書きました。
http://d.hatena.ne.jp/moba13/20090421/1240319098
一部背景色を変えたい時。
<table width="100%"> <tbody><tr> <td width="80"> <img alt="" src="" height="60" width="80"> </td> <td> <font size="-2"> <a href="">---</a> </font> </td> </tr></tbody> </table>
絵文字について
「oshima」というソフトでドコモ絵文字のものを利用しています。
http://www.vector.co.jp/soft/winnt/net/se240690.html
ドコモ・au間は、絵文字の相互変換がそこそこちゃんとされますが、ソフトバンクでは絶望的に違う絵文字に変換されることがあります。ただ、シェアが低いSBガラケーは華麗にスルーしておkであれば、このソフトで対応してしまいます。
最後に
最近残念なことは、はてな界の神ガラケーサイト運営者maikatanがガラケーサイトに関する記事を書いてくれないことです。この記事とかよかったですよね。 ■携帯サイトのアクセスアップ、リリース1週間で1日2万PVにする方法 http://d.hatena.ne.jp/taan/20100408/p1
その他携帯コーディングについて、読むとお得な記事
■永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)
http://design.kayac.com/topics/2010/09/mobile-template.php
■一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第一弾)
http://d.hatena.ne.jp/mobile_design/20100215/p1
(2010/09/21追記)携帯でのtableタグについて
よろしければ
twitterもやっています。よろしければフォローしてください。
http://twitter.com/ry_tan