携帯サイトのマークアップ

kazy (2009年5月24日 14:41) | コメント(0) | トラックバック(0)

モバイルサイトのマークアップについて

HTMLの仕様（3G機種 3キャリア共通）

XHTML Mobile Profileに準ずる
http://openlab.ring.gr.jp/k16/htmlli­nt/tagslist.cgi?HTMLVersion=XHTML-MP

MIMEタイプの設定

ドコモの場合、XHTMLの正しいDOCTYPEとMIMEタイプを設定するだけでは、機種側がXHTMLモードにはならない。
サーバー側で正しいHTTPヘッダーが出力されなければならないため、設定が必要。
方法：下記内容の.htaccessファイルをモバイルのトップディレクトリに置く。

AddType application/xhtml+xml .htm .html

 

文字コード

Shift-JIS

サンプルHTML

 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>タイトル</title>
<style type="text/css">
<![CDATA[
a:link{color:#006699;}
a:focus{color:#0099CC;}
a:visited{color:#6666CC;}
]]>
</style>
</head>
<body style="background-color:#CCCCCC">
<div style="font:xx-small;">
<div style="display:-wap-marquee;background-color:#666666;color:#FFFFFF;">
マーキー
</div>
<div style="text-align:center;" align="center">
<img src="logo.gif" alt="ロゴ" style="margin:7px 0 7px 0;" />
</div>
<hr size="1" color="#666666" style="border-color:#666666;" />
文字<br /><span style="color:#990066;">文字</span><br />
<a href="http://stylement.co.jp">リンク</a><br /><a href="http://kazy.jp/">リンク</a>
<hr size="1" color="#666666" style="border-color:#666666;" />
</div>
</body>
</html>

HTMLタグ

<body>、 <head>、 <html>、 <br>、 <div>、 <p>、 <span>、 <a>、 <form>、 <input>、 <select>、 <option>、 <textarea>、 <img>、 <hr>、 <meta>、 <style>

CSS

  • インライン指定（style属性）のみサポート
  • 内部参照はリンク疑似クラス（a:link, a:visited）と動的疑似クラス（a:focus）のみ
  • 外部参照（外部CSS）には非対応

 

ファイルサイズ

総ファイルサイズ：100KB以内
HTMLのみのファイルサイズ：9KB以内
ただし、容量が大きいと、その分閲覧者にパケット代がかかるため、下記のように工夫し、できるかぎり容量を抑えるのが望ましい。

・改行を減らす
改行を減らすことで、改行コード(\n)分容量が削れる。

・半角カナを使う
4バイトかかる全角カナよりも2バイトで済む半角カナの方が容量が軽く済む

・タグの使用は必要最小限にする
空タグや、重複タグなど
不必要なタグはできるかぎり削る

画像

横幅最大240px
JPEGかGIF

チェック

 

制作過程

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.kazy.jp/mt4/mt-tb.cgi/105

コメントする