これからゆっくり考L +α tag:sakaki0214.com,2008-11-09://1 2011-12-27T13:43:32Z PCサイト・携帯サイトのコーディングに関することをポロポロとアウトプットしていくブログです。 Movable Type Commercial 4.22-ja 携帯（ガラケー）コーディングでインデントはNG tag:sakaki0214.com,2011://1.63 2011-12-27T13:21:01Z 2011-12-27T13:43:32Z PCでもガラケーでもスマホでも、コーディングではインデントを一切使わない派の私で... sakaki0214 PCでもガラケーでもスマホでも、コーディングではインデントを一切使わない派の私ですが、要望があればもちろんします。
（Dreamweaverでぽちっと！）

今回はガラケーコーディングのお仕事で、
「インデントしてください」
というご要望をうけ、なんとなく嫌だけど（嫌な予感がするけど）やってみたら・・・

]]> auで画像の下に隙間ができました。

いや、auはもともと隙間ができるんですが...言葉だと難しいので、画像でさくっと説明。

サンプル画像
こういう見出しがあった場合、

<div style="background:#000000;color:#ffffff;">
<img src="img/line.jpg" alt="" width="100%" style="margin:0 0 3px;" /><br />
見出しです
<img src="img/line.jpg" alt="" width="100%" style="margin:3px 0 0;" /><br />
</div>

こういうソースを書くと3キャリアできちんと再現できるはずなんですが、ソース中にインデント（スペースでもタブでも）があると

サンプル画像
auでこうなる...と。

※CA004で確認

これで、今後ガラケーで「インデントしてください」と言われたときに明確な理由をあげてお断りすることができそうです。

ガラケーでインデントはやめたほうがいいですよ！
インデントしなくても見やすいソースを目指しています。

]]> スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには tag:sakaki0214.com,2011://1.60 2011-06-05T13:37:38Z 2011-12-15T11:04:01Z これを横に回転させて、 画面幅に合わせて拡大したい。 これ、見にくくないのかな... sakaki0214 スマートフォンサンプル画像：縦
これを横に回転させて、

スマートフォンサンプル画像：横
画面幅に合わせて拡大したい。

これ、見にくくないのかな...と個人的には思うんですが、そういう依頼がちらほら来るのでまとめてみました。

]]> サンプルページ

QRコード
http://sakaki0214.com/sample/110605/

通常（横にしても拡大しない）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

iPhone用（横にすると拡大する）

<meta name="viewport" content="width=device-width" />

検証端末：iPhone4、iPhone3G

「iPhone専用サイト」であればこの方法だけで問題ないと思います。

iPhone+Android用（横にすると拡大する）

<meta name="viewport" content="width=device-width" />
<script src="shared/js/jquery-1.3.2.js"></script>
<script>
$(window).bind('resize load', function(){
	$("html").css("zoom" , $(window).width()/320 );
});
</script>

検証端末：docomo GalaxyS
※追記：GALAPAGOS SoftBank 003SH、au IS03でも問題なし

参考サイト：
Androidブラウザでviewportのwidth指定[to-R]

上記エントリーを参考に、JSでviewportのwidthを320にしました。

"meta要素で「content="width"」を指定せず"とあったんですが、以前組んだサイトでそれをとったら横スクロールバーが出たんです。ちなみに、このサンプルページではcontent="width"があっても無くても横スクロールバーはでませんでした。

AndroidだけでなくiPhoneも、ということであればcontent="width"がないとiPhoneの表示に問題（画面の横幅が980pxになる）がでてくるのでcontent="width"は必須です。
なので、content=width"が入っていることが原因でAndroidの表示がおかしくなった場合は...iPhoneとAndroidでソースを分けないと実現不可です。

最後に

一応なんとか1ソースでiPhoneもAndroidも対応できた気がするのですが、ものすごーく不安です。

AndroidのGalaxyS以外の表示が気になるところです。Xperia専用サイトで以前使用したソースなのでたぶんXperiaは大丈夫だと思うのですが...。
Androidはもはやガラパゴスすぎて怖いので、やはりリキッド対応のデザインをしていただき、無理に拡大しないほうがみんな幸せなんじゃないかと思ってます。

]]> [携帯]inputタグの文字色が外側のフォントカラー指定に影響される tag:sakaki0214.com,2010://1.58 2010-11-15T07:29:37Z 2010-11-15T07:37:04Z 携帯サイトで、背景色を濃い色に、文字色を白（もしくは白に近い色）に指定している... sakaki0214 携帯サイトで、背景色を濃い色に、文字色を白（もしくは白に近い色）に指定している箇所に入力フォームを設置する場合、inputタグ（テキストボックスやsubmitボタン）の文字色に注意しましょーというお話です。

]]> サンプルページ

QRコード
QRコード
→サンプルページを見る

<div style="background:#333333;color:#ffffff;">
ﾒｰﾙｱﾄﾞﾚｽ<br />
<input type="text" value="hogehoge@hoge.jp" name="mail" size="27" style="width:95%" /><br />
<input type="submit" value="送信する" /><br />
</div>

各キャリアでの表示

docomo（F-06B）

テキストボックス内の文字色も、submitボタンの文字色も「黒」。
外側のフォントカラー指定に影響されない。

F-06Bキャプチャー

au（W63K）

テキストボックス内の文字色も、submitボタンの文字色も「黒」。
外側のフォントカラー指定に影響されない。

W63Kキャプチャー

softbank（830P）

テキストボックス内の文字色も、submitボタンの文字色も、外側のフォントカラー指定に影響される。

930Pキャプチャー

まとめ

各キャリア1端末ずつしかチェックしていないのであれですが、softbankの一部端末では外側のフォントカラー指定がinputタグに影響してしまい、テキストボックスやsubmitボタンの文字色が黒じゃない色になってしまいます。

なので、フォントカラーを白などの薄い色で指定している場合はフォーカスがあたっていないとテキストボックス内やボタンの文字色がかなり見えにくくなってしまいます。

なので、headタグ内部で、

input {color:#000000;}

という指定を念の為にしておくといいと思います。

]]> [携帯]画像を縦に隙間なく並べる方法 ver02 tag:sakaki0214.com,2010://1.57 2010-09-06T14:22:48Z 2010-09-06T15:24:38Z 前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげてい... sakaki0214 前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげていますが、サンプルを作り直したので書き直してみました。

以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。
3つ並んでいる赤ちゃんの写真のところです。

「画像を縦に隙間なく並べる方法 ver02 」のサンプルデザイン

結論を先に言ってしまうと、3キャリア1ソースで画像を縦に隙間なく表示させることは現状不可能です。
（2010年9月6日現在）
ということで、以下検証結果です。

]]> brで画像を改行 
<div style="text-align:center;">
<img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /><br />
<img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149" /><br />
<img src="img/ph_03.jpg" alt="泣くのも赤ちゃんの大事なお仕事☆" width="208" height="160" /><br />
</div>

サンプルページ

サンプルページ
→サンプルページを見る

表示結果

docomo：隙間なし
au：隙間あり
softbank：隙間なし

tableの各セルに画像を表示

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td><img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /></td></tr>
<tr><td><img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149" /></td></tr>
<tr><td><img src="img/ph_03.jpg" alt="泣くのも赤ちゃんの大事なお仕事☆" width="208" height="160" /></td></tr>
</table>

サンプルページ

サンプルページ
→サンプルページを見る

表示結果

docomo：隙間あり
au：隙間なし
softbank：隙間あり

その他

色々試してはみましたが、table以外の方法でauが画像を隙間なく表示してくれる方法は見つかりませんでした。

色々試した実験ページの残骸

サンプルページ
→ページ03

サンプルページ
→ページ04

サンプルページ
→ページ05

まとめ

キャリア毎にソースがわけられれば特に問題はないんですが、3キャリア3ソースだとどうにもなりません。

デザインがFIXしてしまってもうどうしようもない！
という場合は、1枚画像にするしかないと思います。

]]> ケータイサイト制作前にコーダーが確認しておきたいところ tag:sakaki0214.com,2010://1.56 2010-07-07T03:00:30Z 2010-07-07T03:08:40Z モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきた... sakaki0214 モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。
こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。

個人的に「ここだけは外せない！」という項目は以下の6つ

  • ・xhtml？html？
  • ・文字コードは？
  • ・tableは使ってOK？
  • ・絵文字は？
  • ・カタカナの扱いは？半角？全角？
  • ・VGA対応は？
]]> xhtml？html？

最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。
昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。

文字コードは？

携帯サイトといったらShif-JISですが、プログラムが絡んでくると「UTF-8で作成」ということも過去にありました。
そうするとこちらのauで文字化けしてしまって検証がやりにくくなるので、そのあたりも事前にちゃんと話しておくといいと思います。
（文字化けしても表示のチェックはある程度できるのでなんとかなりますが）

tableは使ってOK？

対応端末に901、701、702あたりが入ってくる場合は確認しておきたいところ。
古い端末なので、「使っちゃってくださいー」という場合もありますし、「絶対NG！」という場合もありました。
tableを使わないと再現できないデザインがあがってくることが多々あるので、最初にこれを確認しておくと非常にスムーズにコーディング作業が進みます。

絵文字は？

3キャリア1ソースの場合、コーディング終了後にプログラマーさんの方で処理をする場合が多いです。その場合、コーダーはどのように処理をしておけばいいかというのを確認しておきます。
私がやってきた案件では、i絵文字（docomoで無料配布されているツール）を使っていれておくというパターンが多かったです。依頼があれば私の方でもphpを埋め込んで3キャリア1ソースでも絵文字対応はできるのですが、大体依頼主様側で処理をしてくれることが多いです。

もしくは、デザインで絵文字っぽく使われているけど「画像をスライスして使ってください！」という場合もあるので、この辺りはきちんと確認。

カタカナの扱いは？半角？全角？

デザインで全部のカタカナが全角であがってくることがあります。
その場合、コーダー側で半角にする必要があるかないか、というのも確認しておきます。
ケータイサイトのデザインに慣れているデザイナーさんの場合は、カタカナの全角、半角を使い分けてくる場合があります（素敵すぎ！）。その場合はそれを忠実に再現します。
がしかし、普段ケータイサイトのデザインをやらない人の場合、原稿が全部全角カタカナだったからという理由だけで全部全角でテキストを流し込んでいることが考えられるため、コーダー側でどう処理をした方がいいのかというのを確認しておきます。

私の場合はコーダー側で半角に変換する、というパターンが多いです。

VGA対応は？

本当はスルーしたいところなんですが、後で問題になってくると非常に面倒なので事前にやはり要確認。
横幅480の端末（主にsoftbankのVGA対応端末）での表示をどうするか、です。

私の場合は、
「480でも崩れずにちゃんと見れるようにコーディングはしますが画像は1/2サイズになっちゃいますけどいいですか？」
と聞いて、OKをもらうことが多いです。
もしくは、依頼主様の方で画像変換のプログラムを組み込む、などなど。
3キャリア1ソースでVGAも完璧に対応というのは正直大変です。
プログラムが絡んでくるのでその辺はコーダー側ではノータッチです。

画像のwidth指定を100%表示にしておくというのも1つの手ではあるかもしれませんが、画像が最高に汚くなるので私はあまりやりたくはないです...。
100%表示にしても汚くならないもの（ライン画像など）は100%にしてますけど。

その他

後は、
「title、keywords、descriptionどうしますか？」とか、
「デザインでページ全体左右に余白空いてますけどこれ再現しますか？」とか、
「デザインをどこまで忠実に再現しますか？透過gifガンガン使う感じで大丈夫ですか？それとも軽さ重視ですか？」などなど、
細かい所まで突っ込んで聞こうと思えば色々でてきますが、沢山聞きすぎると大事なことが漏れる可能性もあるので、そのあたりは要調整、という感じです。]]> 執筆協力をした「ケータイサイト解体新書」が発売されました tag:sakaki0214.com,2010://1.55 2010-07-02T17:39:26Z 2010-07-02T18:01:56Z 別のブログでは既に告知してますが、こちらでも紹介させてください。 執筆協力をしま... sakaki0214 別のブログでは既に告知してますが、こちらでも紹介させてください。

執筆協力をしました本「ケータイサイト解体新書」が6月24日に発売されました。

執筆協力といっても、やっていることはこのブログでやっていることとあまり変わりません。実際に自分がデザイン、コーディングをしたサイトのソースがどかんと載っています。

以下、自分が担当したものをざーっとご紹介。

]]> CHAPTER4 4-01

おなじみの「モバツイ」
（おなじみなのでキャプチャーは割愛）

CHAPTER4 4-02

CHAPTER4 4-02

EC系のサイトデザイン、といっても公開できる実績がないので完全なるダミーサイトを作成。
サイト名を考えたり（オガベジ、はオーガニックベジタブルを略しただけだったり！）、商品なににしよー、値段どうしよー、と、ワイヤーといったものがないので色々大変でした。

CHAPTER4 4-03

CHAPTER4 4-03

コンテンツ配信系のサイト「Music Full」。
こちらも公開できる実績がないのでダミーサイト。
サイト名だけ決めてもらって、あとの諸々はすべて自分。
何が大変だったって、CDのジャケット作成とか、CDのタイトルとか曲名とか考えるのがとにかく大変でした。

CHAPTER4 4-04

CHAPTER4 4-04

ポータル系のサイト「think-L JAPAN」。
こちらもダミーサイトです。上と同じく、内容を考える方が大変だったっていう。

CHAPTER4 4-05

CHAPTER4 4-05

芸能・タレントオフィシャル系のサイトデザインということで、個人的にも親しくさせていただいているヨーヨー世界チャンピオンであるBLACKのオフィシャルサイトを作成しました。
BLACK、ヨーヨー、という2つのキーワードを意識したデザインにしたつもりです。

CHAPTER4 4-07

CHAPTER4 4-07

占い系のサイトデザイン、こちらもダミーサイト。
占い師もダミーでたてたほうがデザイン的にもっとしっくりくるものが作れたと思うのですが、ダミーサイトだとそのあたりが難しく...。

この続きは書籍で！

ソースは書籍にも掲載されていますが、Web上でも確認できるようになっています。もちろん携帯でページ確認もできるようになっています。（URLは書籍をご確認くださいませ）

私が読んでも「へー」と思うものがあったり、色々勉強になる本です。なので、現役でバリバリケータイコーディングやってます！という人も、経験が無い人も、ぜひぜひお手に取ってみてみてください。

ケータイサイト解体新書 デザインパターンから理解する実装テクニック
ケータイサイト解体新書 デザインパターンから理解する実装テクニック
posted with amazlet at 10.07.03
ホシナカズキ
ワークスコーポレーション
売り上げランキング: 5466
Amazon.co.jp で詳細を見る
]]> [携帯]携帯サイトで枠線を表現する方法 tag:sakaki0214.com,2010://1.54 2010-05-28T17:18:29Z 2010-06-07T07:38:53Z 3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすれ... sakaki0214 枠線のサンプル画像

3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか？

ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。

xhtmlの場合、htmlの場合、と両方確認してみました。

]]> サンプルページ（border使用）

QRコード
QRコード
→サンプルページを見る 

<div style="text-align:center;">
<div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</div>

divタグにborderプロパティ使用した場合

docomo：F-01A（iモードブラウザ1.0）

枠線は表示されません。

docomo：F-09A（iモードブラウザ2.0）

問題なく表示されます。

au（W63K）

問題なく表示されます。
がしかし、width効かずに枠が画面いっぱいに広がります。
%指定もpx指定もどちらも効かず。

softbank

問題なく表示されます。

実機での見え方


docomo F-01A（iモードブラウザ 1.0）


docomo F-07B（iモードブラウザ 2.0）


au W63K


softbank 930P（VGA）

結論

3キャリア1ソースの場合、docomoのことを考慮するとborderプロパティを使うのはNG。
ではどうすればよいか。
ここで登場するのがtableタグです。

サンプルページ（table使用）

QRコード
QRコード
→サンプルページを見る

tableタグを使用した場合

<div style="text-align:center;">
<table style="width:80%;margin:0 auto;background:#000000;">
<tr>
<td style="background:#eeeeee;">
<div style="text-align:center;font-size:x-small;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</td>
</tr>
</table>
</div>

tableタグの背景色に指定している色が枠線となります。

こうすると、3キャリア1ソースでも大体の端末で枠線が実現できます。auで、divタグにborderプロパティを使用していたときに発生していたwidthが効かない現象も解消されます。

ただし、docomoの古い端末ではtableタグが無視されるため、対応機種にtable未対応端末が含まれている場合は要検討です。

おまけでhtml版

QRコード
QRコード
→サンプルページを見る

tableタグを利用していますが、問題なく表示されます。

]]> [携帯]submitボタンの大きさ調整 tag:sakaki0214.com,2010://1.53 2010-04-21T03:50:51Z 2010-04-21T03:59:11Z よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタ... sakaki0214 よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタンのサイズ）が変更できるか、の検証です。

今までsubmitボタンの大きさを変更したことが無かったのですが、とあるソースを見ていたら、

<input type="submit" value="ボタン" style="font-size:x-small;" />

という記述をみかけて気になった次第です。

]]> サンプルページ

QRコード
→サンプルページを見る

<input type="submit" value="ボタン" style="font-size:x-small;" />

こんな感じで、inputタグの中でfont-sizeを指定してます。

<div style="font-size:x-small;"><input type="submit" value="ボタン" /></div>

下の方は、inputタグ内で指定するのではなく、その外側のdivでfont-sizeを指定しています。

各キャリア、端末の表示

※端末によって若干挙動が異なる可能性があります。

docomo（iモードブラウザ1.0/2.0）

普通のテキストと同じように制御可能

[小]
xx-small
x-small
small

[中]
medium

[大]
large
x-large
xx-large

au（W63K）

なにも変化なし。制御不可

softbank（930P）

7段階の大きさで制御可能

※外側のdivでは制御不可

結論

私の場合ですが、xhtmlでコーディングをする際、body直下のdivでfont-size:x-small指定をすることが多いです。
でも、それだとsoftbankではそれに連動したボタンサイズにならない、ということのようです。

今までそんな気にはしてこなかったので、たぶんそこまで違和感のあるボタンサイズにはなっていなかったんだとは思いますが、今後注意してみてみたいところです。

]]> [携帯]デザインの時、fontサイズを何pxにしてますか？ tag:sakaki0214.com,2010://1.52 2010-03-26T07:12:36Z 2010-03-26T07:32:10Z 携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフに... sakaki0214 携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフにしてる部分）を何ピクセルにしてますか？
PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。

ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準（中）」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。
※会社の方針や案件によっては違うかもしれないので一概には言えませんが。

デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...？

で、端末側の設定で文字サイズ標準（中）にすると、意外と文字が大きく表示されるんです。

なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見たときにだいぶ違和感を感じてしまう可能性があります。

※前提として、文字サイズはdocomoで大中小の3段階しか大きさの変化をつけられません。大はかなり大きいため、中、小の2段階しか使用ません。
詳しくはこちらのエントリーをどうぞ。
>>[携帯]フォントサイズ（XHTML版）

では、サンプルデザインと実際に組んだページを見比べてみます。

]]> サンプルデザイン

文字サイズが小さめのサンプル

このデザインは12px、10pxの文字サイズを使用しています。
実際にコーディングする際は、12pxをfont-size:medium;、10pxをfont-size:x-small;で作成します。

サンプルページのQRコード
→サンプルページを見る

実機での見え方

docomo iモードブラウザ1.0
docomo F-01A （iモードブラウザ1.0）

docomo iモードブラウザ2.0
docomo F-03B （iモードブラウザ2.0）

au W63K
au W63K

softbank 930P
softbank 930P（VGA表示）

文字サイズの大きさがデザインとだいぶ違うと思います。
画像の右側にテキストが入るデザインになっていますが、実機で見ると画像の右側に文字が収まり切らないので、このデザインを見ただけでは文字が画像の下に回り込んでいいのか、それとも回り込ませたくないのかが分かりません...。
コーダーは空気を読んで組んでしまうか、もしくは一旦確認をするという手間が発生します。

フォントサイズは何pxでデザインすればよいか

私の場合ですが、12pxと14px（もしくは15px）で作っています。
以下のデザインは12pxと14pxで作成しています。
それでもまだ小さいかな...と感じますが、これ以上大きくするとそれもそれでちょっとダサくなってしまうというか、なのでこのぐらいがいいかなーという自己判断。

文字サイズが大きめのサンプル

絶対これじゃないとダメ！っていうわけじゃないんですが、10pxだと小さいなーと昔から思っていたので、何となくまとめてみました。

※Special Thanks @tacamy!]]> [携帯]カラーコードを3桁で指定するとどうなるか tag:sakaki0214.com,2010://1.51 2010-02-22T05:56:54Z 2010-02-22T16:22:35Z 背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書... sakaki0214 背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書くことができます。
では、htmlで3桁のカラーコードを使っちゃうとどういうことになるか、というのをキャリア別にチェックしてみました。

先に結論を言ってしまうと、
「HTMLでカラーコード3桁は使うな」
ということなんですが、実際自分がつい使っちゃったことがあってしばしはまった経験があるので...一応書き残しておこうと思った次第です。

]]> サンプルページ

QRコード
QRコード
→サンプルページを見る

3桁でカラーコードを指定するとどうなるか

bodyタグに背景色をカラーコード3桁で指定

<body bgcolor="#333">

docomo（iモードブラウザ1.0）
[F-09A]背景が真っ黒になります。
[SO903i]背景が真っ白になります。
[D902i]背景が真っ白になります。

docomo（iモードブラウザ2.0）
[F-03B]背景が真っ黒になります。

au（W63K）
指定通りの背景色になります。

softbank（930P）
背景が真っ黒になります。

bodyタグに文字色、リンクカラーをカラーコード3桁で指定

<body bgcolor="#333" text="#666" link="#f00" vlink="#f00">

docomo（iモードブラウザ1.0）
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。

docomo（iモードブラウザ2.0）
[F-03B]文字色、リンク色、共に黒になります。

au（W63K）
指定通りの文字色、リンク色になります。

softbank（930P）
文字色、リンク色、共に黒になります。

fontタグに文字色、リンクカラーをカラーコード3桁で指定（htmlの場合）

<font color="#fff">サンプルテキスト</font><br />
<a href="#"><font color="#f00">サンプルテキスト</font></a>

docomo（iモードブラウザ1.0）
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。

docomo（iモードブラウザ2.0）
[F-03B]文字色、リンク色、共に黒になります。

au（W63K）
指定通りの文字色、リンク色になります。

softbank（930P）
文字色、リンク色、共に黒（背景と同化していて全く見えない）

まとめ

冒頭で結論は既に言っちゃいましたが、
「HTMLでカラーコード3桁は使うな」
です。

カラーコード3桁で指定しても携帯ではうまく効かない、と思い込んでいたのですが、CSSでは問題なく反映されるので使っても問題はないかと思います。

CSSであっても３桁での記述はdocomoのちょっと前の端末でうまく反映されないようです。なので、携帯ではカラーコードを３桁に省略せずに、きちんと６桁での記述がよいと思われます。

]]> [携帯]フォントサイズ（XHTML版） tag:sakaki0214.com,2010://1.50 2010-01-13T19:53:01Z 2010-09-02T06:07:38Z フォントサイズ（HTML版）に引き続き、今回はXHTML版です。 CSSでフォン... sakaki0214 フォントサイズ（HTML版）に引き続き、今回はXHTML版です。

CSSでフォントサイズを指定するので、こんな感じになります。

<span style="font-size:x-small;">文字文字</span>

各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。

サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。

]]> サンプルページ

QRコード
フォントサイズ（XHTML版）のQRコード
→サンプルページを見る

各種フォントサイズと、ついでに太字のサンプルもおいております。
太字の指定方法はbとstrongとfont-weight:bold;です。

各キャリア、端末の表示

docomo

【大】xx-large,x-large
【中】large,medium
【小】small,x-small,xx-small
※全端末共通（iモードブラウザ1.0/2.0や端末間での差異なし）

太字はiモードブラウザ1.0は一切効きません。
2.0だとb、strong、font-weight:bold;全て効きます。 N-02Bで確認していただいたところ、太字が一切効いていないとのご連絡をいただきました。2.0なら絶対太字が効く、というわけではないようです。

au

W63K

【大】xx-large,x-large
【中】large
【中】medium
【小】small,x-small
【極小】xx-small
5段階の大きさで表示されます。

太字は一切効いてません。

A5514SA

【大】xx-large,x-large
【中】large,medium,small
【小】x-small,xx-small
3段階の大きさで表示されます。

端末が今手元にないため、太字が効いているかは不明。

softbank

930P

【大】xx-large
【大】x-large
【中】large
【中】medium
【小】small
【小】x-small
【極小】xx-small
7段階の大きさで表示されます。

太字は一切効いてません。

各キャリアのキャプチャ画像

色々な端末で見るの面倒！という人用。
写真をずらーっと並べてみます。
※各端末の文字サイズの設定は「中」にしています。

docomo


SO903i（iモードブラウザ1.0）


F-01A（iモードブラウザ1.0）


F-01B（iモードブラウザ2.0）

au


W63K


W63K

softbank


930P

まとめ

※以下、3キャリア1ソースの場合を想定して書きます。

「携帯サイト[xhtml]のコーディング前のチェックポイント」のエントリーでも触れてますが、個人的には文字の大きさは2段階までと考えていて、3キャリア大体の端末でちゃんと文字の大きさを大小と表示させるためにはx-smallとmediumが一番無難と思っています。

3段階（大、中、小）にしない理由は、docomoがそもそも3段階でしか表示ができず、「大」は本当に大きくて見栄え的に私はNGだと思うので避けたい、というところです。もちろんそのサイトの性質にもよるので、ターゲットユーザーによって大を使う場合もあるかもしれませんが。

x-smallとmediumを使う理由は、3キャリアほぼほぼ共通して「大」「小」の2段階の大きさに表示できるのがx-smallとmediumだったっていうだけです。auとsoftbankに関しては、端末によって異なってくるのでx-smallとmediumだときちんと文字の大きさが2段階にならない場合もあります。じゃあxx-smallにすればいいかっていうと、softbankで結構文字が小さくなります。

3キャリア1ソースだと、どこに妥協点をもっていくかによって指定方法が変わってきます。
その案件にかかわっている人達とどうするか相談して決めるのがベスト、ですかね。

]]> 携帯サイト[xhtml]のコーディング前のチェックポイント tag:sakaki0214.com,2009://1.49 2009-11-29T18:15:00Z 2009-12-01T13:18:34Z 前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来る... sakaki0214 前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。

コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。

デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。

前置きはこのぐらいにして、早速本題へ。

以下が今回のサンプルデザインです。

初期提出デザイン

「これをxhtml、3キャリ1ソースコーディングしてください」
と言われた場合で考えていきます。

前提条件は、
・3キャリア1ソース
・xhtml
・文字コード：Shift-JIS
・改行コード：CR LF
・QVGA対応（VGA対応は特にしない）

対応端末は、
・docomo 902以降（table未対応機種を除外）
・au WIN端末
・softbank 3G
です。

]]> チェックポイント

パッと見て指摘すべき個所は以下の項目。

デザインのチェックポイント

各チェックポイントの詳細は以下を。

背景画像は1つのみ

htmlの場合は｢背景色を複数つかっていないか」というのがポイントでしたが、xhtmlの場合は背景色はいくつあってもOK（divの背景色としていくつでも指定可）です。

ただ、背景画像に関してはbodyタグにしか指定できません。 詳細は「[携帯]各キャリア別、背景画像の対応状況」のエントリーを。

なので、「背景画像は1ページにつき1種類まで」です。

今回のサンプルデザインの場合、bodyで背景画像を指定しているので、タイトル画像部分に背景画像は使えません。なので、タイトル画像はテキストも含めて1枚画像にします。

違う背景色が連続するところはdivの使い方に注意

auでは要素と要素の間に隙間があきます。 なので、違う背景色を指定しているdivとdivの間に隙間があいてしまうので、bodyに指定している背景画像がその隙間に表示されてしまいます。

分かりやすいところで、「サイト内検索」の部分で説明すると、

<div style="background:#84775d;">サイト内検索</div><br />
<div style="background:#f6f0e3;">フォームのパーツ</div>

とやってしまうと、auで見た時に

auで見た時のサンプル画像

こんな感じで隙間があくのです。

なので、divを入れ子にする必要がでてきます。

<div style="background:#84775d;">サイト内検索<br />
<div style="background:#f6f0e3;">フォームのパーツ</div>
</div>

「サイト内検索」以外にも同様にdivの使い方に注意が必要な個所として、タブとタブのすぐ下のラインとの間、「お知らせ」の各項目の部分はdivの使い方に注意しないとauで隙間があきますので要注意です。

フォント関連

xhtmlの場合はcssでfont-size:**;と指定します。 **へはx-small,mediumといった値を入れます。 font-size:10pxという指定もできますが、携帯端末側での文字サイズ変更が効かなかったり、各キャリアで表示が結構異なってしまうので使わない方がいいです。
※px数が小さいとiモードブラウザ2.0で豆みたいな文字になっちゃいます。

文字の大きさはhtml版と同様「2段階」までがベストだと思います。 docomoの文字の大きさがそもそも3段階までしかない、というのと、一番大きいのは本当に大きいのでちょっと不格好かなーと思い、普段は使いません。（3段階の文字の大きさが使われているデザインが上がってきたときは「2段階で」、とピシッと言ってます。）

au、softbankは3段階以上文字の大きさがありますが、docomoに足並みをそろえて2段階といったところです。

2段階の場合はx-small（もしくはxx-small）とmediumを使っています。

後、やはり太字は使いません。 理由はhtml版と同様、docomo（iモードブラウザ1.0：2008年冬モデル以前）、auで効かないからです。 案件によっては、「効く端末にだけ効けばいいから使ってください！」という場合もあるかもしれないので、そこは要相談ですねー。

リンク色が複数存在する

xhtmlの場合はcssでリンク色の指定が可能となります（bodyでも指定可）。
1ページに設定できるリンクの基本色は1つで、「リンク色をここだけ変更したい」という場合はaタグの内側にspanなどで色の指定をするのですが、docomoやsoftbankでそれをすると、リンクの文字色は変更できてもリンクの下線はそのページに設定した基本のリンク色となります。

リンク部分のサンプル画像

これはベースのリンク色をオレンジにした場合、です。

コーディングする際は、全ページに共通して多く使われているリンク色をベースのリンク色に設定したりしますが、いろんなリンク色がまんべんなく使われているとどれをベースのリンク色にすればいいのか悩みます。

なので、そういった場合はデザイナーさんなりディレクターさんに確認した方がいいです。

後、事前にクライアントさん側にも言っておいた方がよりスムーズに進みます。
いざ出来上がったページを実機で見た時に、「ここ（リンクの下線の色）直してくださいー」っていう指示が来てしまうこともありますので。

※ちょっと面倒なやり方ですが、aタグの内側のspanでの指定とあわせて、cssのclassでもリンク色の指定もしておくと、docomoiモードブラウザ2.0、softbankで下線の色も一緒に変更することが可能です。（つまり、iモードブラウザ1.0のみ下線の色とリンク色が揃えられないっていうことになります）

詳細は「[携帯]xhtmlのリンク指定方法～cssとbodyの違い」でご確認くださいませ。

tableは使ってもいいか

今回はtable未対応端末（docomo901、701以前）が対応端末に含まれていませんが、念の為聞いておくといいと思います。 稀にレギュレーション云々でNGの場合がありますので、念には念を！です。

ページの左右の余白再現、特定の場所を枠線で囲う、といった場合や、テキストボックスとボタンの横並びを再現したい場合は（詳細は「[携帯]入力フォームとボタンを横一列に並べる」を）tableの使用が必須となってきます。

tableを使わないと再現できないぞっていうデザインは結構あがってくるので、最初にtable使用の可否は聞くといいです。

あと、xhtmlで作成した場合でも、tableの中にtableを使うとauの一部端末では内側のtableの中身が一切表示されないので、 枠線の中に（table必須）、検索入力窓とボタンを横並びにして（table必須）、ということはできないので、「サイト内検索」の部分は再現不可能です。

横並びの画像の横幅合計が240だと崩れる可能性アリ

今回のサンプルでいうとページ上部にあるタブの部分が該当するのですが、横並びの画像で横幅240pxぴったりにデザインされていると、240px未満の端末で見た時に、タブが横並びにならずに下に落ちます。

横幅が240pxの携帯でも、スクロールバーの分だけ狭くなって238pxっていう場合もありますし、230pxの端末もまだ世の中に結構あります。なので、より多くの携帯できちんと見れるようにするためには、230pxぐらいにした方がいいかなーと思います。

まとめ

今回は「xhtmlで作成する場合」ということでチェックポイントをあげてみましたが、前回のhtml版のエントリー＋今回のエントリー、両方のチェックポイントを頭に入れてデザインチェックをしてみてください（重複している項目は今回省略しましたので）。

上記チェックポイントを踏まえて、再現可能なデザインに修正し、コーディングしたものが以下のものです。

修正後のサンプルデザイン

サンプルページ
QRコード
→サンプルページを見る

]]> [携帯]各キャリア別、背景画像の対応状況 tag:sakaki0214.com,2009://1.48 2009-11-25T13:26:09Z 2009-11-26T03:04:23Z 3キャリア1ソースで作成するときは、「背景画像は1つまで！」ルールでやっているの... sakaki0214 3キャリア1ソースで作成するときは、「背景画像は1つまで！」ルールでやっているのですが、各キャリアの対応状況ってどんなんだろーと思いちょっと確認してみました。

1キャリアのみ対応の案件もたまにあるので、柔軟に対応できますように。

]]> サンプルページ

QRコード
→サンプルページを見る

結果発表

htmlのサンプルページ

bodyに指定
<body background="bg.gif" ...>

docomo:○
au：○
softbank：○

table/tdに指定
<table background="bg2.gif">
<tr>
<td>サンプルです</td>
</tr>
</table>

<table>
<tr>
<td background="bg2.gif">サンプルです</td>
</tr>
</table>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

xhtmlのサンプルページ

bodyに指定
<body style="background:url(bg.gif) ...>

docomo:○
au：○
softbank：○

table/tdに指定

<table style="background:url(bg2.gif);">
<tr>
<td>サンプルです</td>
</tr>
</table>

<table>
<tr>
<td style="background:url(bg2.gif);">サンプルです</td>
</tr>
</table>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

divに指定
<div style="background:url(bg2.gif)">divに背景指定</div>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

まとめると

docomo（iモードブラウザ1.0）がネック！
これの市場占有率がおちたら3キャリア1ソースでも数種類の背景画像が使えるようになります...ね。

]]> [携帯]xhtmlのリンク指定方法〜cssとbodyの違い tag:sakaki0214.com,2009://1.47 2009-11-20T04:54:17Z 2010-04-07T02:44:06Z 結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です... sakaki0214 結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。

<body link="#5994FF" vlink="#59E2FF">


<style type="text/css">
<![CDATA[
a:link{color:#5994FF;}
a:focus{color:;}
a:visited{color:#59E2FF;}
]]>
</style>

サンプルページ
QRコード
→サンプルページを見る

bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？
って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。

]]> まずは予備知識として

docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモードブラウザ2.0ではhead内もしくは外部ファイルに書いたCSSも効くようになりました。

※「iモードブラウザ1.0」2008年秋冬モデル以前
※「iモードブラウザ2.0」2009年春夏モデル以降

docomoとソフトバンクのリンク色の仕様として、aタグの内側に文字色の指定をしてもリンクの下線の色はbodyないしcssで指定した色が適用されてしまいます。

リンクの文字色と下線の色が異なるのサンプル画像

classを使ってリンク色を指定することによって、この「リンクの下線の色」もリンク色と同一色にすることができます。

iモードブラウザ1.0の為にaタグの内側にspanタグで文字色指定もしておきます。

<style type="text/css">
<![CDATA[
a:link {color:#FF71BA;}
a:focus {}
a:visited {color:#FF71BA;}

a.orange:link {color:#ff6600;}
a.orange:visited {color:#ff6600;}

a.blue:link {color:#3366FF;}
a.blue:visited {color:#3366FF;}
]]>
</style>
・
・
・
<a href="#">リンクサンプルです</a><br />
<a href="#" class="orange"><span style="color:#ff6600;">リンクサンプルです</span></a><br />
<a href="#" class="blue"><span style="color:#3366FF;">リンクサンプルです</span></a><br />

QRコード
→サンプルページを見る

リンクの文字色と下線の色が同一のサンプル画像
iモードブラウザ1.0以外の見え方

こうすることによって、iモードブラウザ1.0以外の端末で見たときに、リンクの文字色と下線が異なるといったことが発生しなくなります。ちょっと面倒ですけど。

iモードブラウザ1.0に関しては...恐らく仕様上変更できないと思います。

]]> [携帯]フォームで使うパーツまとめ tag:sakaki0214.com,2009://1.46 2009-11-18T15:58:00Z 2010-11-15T04:15:20Z 携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるとい... sakaki0214 携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。
そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。

フォームサンプル画面
こんなフォームページがちょちょいのちょいと。

Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ？
ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。

]]> メニュー

さくっとコピペできるように、html用とxhtml用で分けています。

・html用のフォームパーツ
・xhtml用のフォームパーツ

数字とか値は適当に入っているので、コピペしたら直してくださいませ。

html用のフォームパーツ

基本パーツ

formタグ
<form action="#" method="post">

</form>
一行テキスト
<input type="text" value="" size="27">
プルダウン
<select name="hoge">
<option selected> </option>
<option value="hoge1">サンプル</option>
<option value="hoge2">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="hoge1" name="hoge"> hoge<input type="radio" value="hoge2" name="hoge">
チェックボックス
hoge<input type="checkbox" value="hoge1" name="hoge"> hoge<input type="checkbox" value="hoge2" name="hoge">
テキストボックス
<textarea name="hoge" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン">

割とそのまま使えるパーツ

名前
お名前<br>
<input type="text" value="" size="27" name="name">

姓<br>
<input type="text" value="" size="27" name="sei">

名<br>
<input type="text" value="" size="27" name="mei">

姓(カナ)<br>
<input type="text" value="" size="27" name="sei">

名(カナ)<br>
<input type="text" value="" size="27" name="mei">
住所
〒<input type="text" value="" size="4" name="postcode1">-<input type="text" value="" size="6" name="postcode2"><br>
住所<br>
<input type="text" value="" size="27" name="address">

都道府県<br>
<select name="都道府県">
	<option selected> </option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br>
<input type="text" value="" size="5" name="year"> 年 <input type="text" value="" size="3" name="month"> 月 <input type="text" value="" size="3" name="day"> 日

生年月日<br>
<select name="year">
<option selected> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br>
女<input type="radio" value="woman" name="sex"> 男<input type="radio" value="man" name="sex">
同意規約
同意規約<br>
<input type="checkbox" value="yes" name="agreement"> 同意する
ボタン
<input type="submit" value="確認する">

<input type="submit" value="確認画面へ">

<input type="submit" value="送信">

<input type="reset" value="リセットする">

xhtml用のフォームパーツ

基本パーツ

formタグ
<form action="#" method="post">

</form>
一行テキスト
<input type="text" value="" style="width:95%;" size="27" name="hoge" />
プルダウン
<select name="hoge">
<option selected="selected"> </option>
<option value="hoge1">サンプル</option>
<option value="hoge2">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="hoge1" name="hoge" /> hoge<input type="radio" value="hoge2" name="hoge" />
チェックボックス
hoge<input type="checkbox" value="hoge1" name="hoge" /> hoge<input type="checkbox" value="hoge2" name="hoge" />
テキストボックス
<textarea name="hoge" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン" />

割とそのまま使えるパーツ

名前
お名前<br />
<input type="text" value="" style="width:95%;" size="27" name="name" />
姓<br />
<input type="text" value="" style="width:95%;" size="27" name="sei" />
名<br />
<input type="text" value="" style="width:95%;" size="27" name="mei" />
姓(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" name="sei" />
名(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" name="mei" />
住所
〒<input type="text" value="" style="width:40px;" size="4" name="postcode1" />-<input type="text" value="" style="width:60px;" size="6" name="postcode2" /><br />
住所<br>
<input type="text" value="" style="width:95%" size="27" name="address" />

都道府県<br />
<select name="都道府県">
	<option selected="selected"> </option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br />
<input type="text" value="" style="width:60px;" size="5" name="year" /> 年 <input type="text" value="" style="width:40px;" size="3" name="month" /> 月 <input type="text" value="" style="width:40px;" size="3" name="day" /> 日

生年月日<br />
<select name="year">
<option selected="selected"> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br />
女<input type="radio" value="man" name="sex" /> 男<input type="radio" value="woman" name="sex" />
同意規約
同意規約<br />
<input type="checkbox" value="yes" name="agreement" /> 同意する
ボタン
<input type="submit" value="確認する" />

<input type="submit" value="確認画面へ" />

<input type="submit" value="送信" />

<input type="reset" value="リセットする" />

補足

フォームパーツは、携帯で確認する場合は必ず
<form action="" method=""></form>
で囲われていないとdocomoのiモードブラウザ1.0で表示されません。値は空でいいです。

※methodが入っていなくてもフォームパーツは表示されますが、↑のサンプルでは一応いれてます。
※このエントリーは、今後必要に応じてパーツが追加される可能性があります。

]]>