実際のソース

WEB戦略

ガラケーサイト

2011.11.23

実際のソース

<?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="text/html; 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="-1"/>
<meta name="Keywords" content="花火大会,花火大会">
<meta name="Description" content="花火大会 公式サイト">
<meta name="robots" content="index,follow"/>
<title>花火大会 公式サイト</title>
<style type="text/css">
<![CDATA[
a:link{color:#0162c5}
a:focus{color:#F2F2F2}
a:visited{color:#0122c5}
]]>
</style>
</head>

<body>

<h2>テクニック</h2>


<div>
テクニック1**********<br />
ラインの上下にマージンをつくる
</div>

<div align="center">
<img src="./img/spacer.gif" width="100%" height="20px" />

<div style="background-color:#0066ff;">
<img src="./img/spacer.gif" width="1" height="1" />
</div>
</div>
<img src="./img/spacer.gif" width="100%" height="20px" />
</div>


<div>
テクニック2**********<br />
重ねたラインや背景の作り方
</div>
<div style="background-color:#0066ff;">
<img src="./img/spacer.gif" width="1" height="1" />
</div>

<div style="background-color:#FF0000;">
<img src="./img/spacer.gif" width="3" height="3" />
</div>

<div style="background-color:#00FF00;">
<img src="./img/spacer.gif" width="5" height="5" />
</div>


<div>
テクニック2-2**********<br />
点線を画像で作る
</div>

<div>
<img src="./img/dotsep.gif" width="100%" height="1" /><br />
</div>



<div>
テクニック3***********<br />
空のアスキーコードを用意することで画像を番号したデザイン性の優れたサイトができる
</div>

<img src="img/01.gif" alt="accesskeyの応用" />はじめに<br>
(※ケータイの番号を押せば下に用意したアスキーコードで目的のページにジャンプするトリック)
<a href="http://www.XXX.com/01.html" accesskey="1"></a>
<a href="http://www.XXX.com/02.html" accesskey="2"></a>
<a href="http://www.XXX.com/03.html" accesskey="3"></a>
<a href="http://www.XXX.com/04.html" accesskey="4"></a>
<a href="http://www.XXX.com/05.html" accesskey="5"></a>
<a href="http://www.XXX.com/06.html" accesskey="6"></a>
<a href="http://www.XXX.com/07.html" accesskey="7"></a>
<a href="http://www.XXX.com/08.html" accesskey="8"></a>
<a href="http://www.XXX.com/09.html" accesskey="9"></a>
<a href="http://www.XXX.com/10.html" accesskey="10"></a>


<div>
テクニック4***********<br />
文字に背景がついた反転文字
</div>

<div style="text-align:center; background-color:#a7eefd; color:#225882;" align="center">
今週のオススメ
</div>


<div>
テクニック5**********<br />
画像の回り込みのサンプルソース
</div>

<img src="./img/vol01.jpg" width="75" height="90" align="left" style="vertical-align:middle;float:left;margin:5px;border:1px solid #fff;">
<br />
<a href="test.html">ゲームで遊ぼ!</a><br />
あの人気ゲームが無料・<br clear="all"/>
<div style="clear:both;">かならずdivでclearする</div>

<div>
テクニック6**********<br />
ページのトップへ戻る
</div>

<div>
・ターゲット<br />
<a name="top" id="top">・・・</a><br />
<br />
・リンク元<br />
<a href="#top">↑ページトップ</a><br />
</div>








<h2>携帯サイト制作の基本</h2>


<div>
<br />
・画像の幅を調整する<br />
img.phpのプログラムを使用する場合はwidthを480ピクセルで制作する<br />
(引数で呼ぶ部分の画像のみ)<br />
これでソフトバンクでも縮小されずに携帯の幅ぴったりに表示される<br />
<br />
・ul liタグは使用しない<br />
<br />
・ソースが見えづらくてもインデントは使わない<br />
<br />
・トップページは3キャリア共通で作りたいので絵文字は使わず画像をアイコンとする<br />
 (テクニック3を使えば出来る)<br />
<br />
 以下理由からtableタグはつかわないようにする
 ・tableタグは比較的新しいキャリアにしか使えない<br />
 ・tableの入れ子デザインは携帯では表示できない<br />
<br />
・待ち受けを作る基本<br />
 基本的に3キャリア対応のサイトを作る場合は、画像の種類をJPEG、ファイルサイズを100KB以内で制作します。<br />
 (共通で読み込めるのがJPEG形式なので)<br />
 【待ち受けサイズ】<br />
  QVGAの画面サイズは、縦320×横240ドット。<br />
  (VGAは、縦640×横480ドット。 )
<br />


<h2>docomoでの注意事項</h2>
・docomoはxmlを自動で呼んでくれないのでssiとmetaの記述を追加する必要がある<br />
(花火大会で対応した)<br />
※この際auとソフトバンクはxmlに自動で対応しているので問題ない<br />
※PCで見るとブラウザによってはダウンロードとか表示されない場合があるがIEであれば直接アドレスを打って確認できるし<br />
携帯(3キャリア)では問題なく表示されているので大丈夫<br />
<br />
・基本pタグは使用しない<br />
・spanタグは<span style="font-size:xx-small;color:#ff0000;">文字のサイズや色</span>を変更できる<br />
 spanでも厳密には○の方が効く(ソースを見る)<br />
 ○<span style="font-size:x-small;">←部分的にかけられるので強力
 ×<div style="font-size:x-small;">←div全体になるので機種によってはダメな場合がある
・divタグ
  divは唯一背景色を指定できるのでテクニック1・2の透過GIFと組み合わせて使う<br />
<br />
・文字の長さを揃えるデザインレイアウトの基本は半角を使用するようにする<br />
<br />
・docomoの絵文字は176種類+拡張絵文字が別途用意されているがemoji.phpでは絵文字176+拡張絵文字=で表示できる<br />
<br />
・docomoとauは絵文字を自動で合わせてくれるので良いがソフトバンクは別途ページを作成する必要がある<br />
 (ラピスさんや花火大会ではTOPページ以外をこの方法で作っている)<br />
 (花火大会では絵文字プログラムを使ったので問題ない)
<br />




</div>



<h2>携帯サイトでphpを使用する場合</h2>

以下は直接ソースで確認<br />
↓<br />
<br />
<?xml version="1.0" encoding="Shift_JIS"?>
記述していると思われます。<br />
この場合、先頭の"<?"が、PHP表記の"<?php"と判別されてしまうために、上記エラーとなると思われる。<br />
<br />
なので、 <br />
<?php
echo '<?xml version="1.0" encoding="Shift_JIS"?>';
?>
<br />

<h2>絵文字変換プログラム</h2>
花火大会では以下を使った<br />
<a href="http://www.dspt.net/tools/emoji/">http://www.dspt.net/tools/emoji/</a>
<br />
※phpのデータには使えないので注意<br>
 (phpの場合は画像を使って対応する)
</body>
</html>

このエントリーをはてなブックマークに追加

Page_Up