現在携帯電話から入力できるメールフォームを作成しているのですが、
サイトの構成がうまく出来ず悪戦苦闘しています。
携帯電話を作成する上（特にフォームをHTMLに入れる際等）での注意点などを教えてください。
サイトは以下になります。
http://oskuni7.sakura.ne.jp/mobaoku/mailform.php
PCのブラウザ上から見ると何の問題もないのですが携帯電話から見るとテーブルが折り返し
表示されたり、タイトルの列が縦長に表示されたり等バランスが非常に悪い状態で表示されてしまいます。
最近ダウンロードしたのですがこのひとが作成したサイトはうまく携帯電話で表示されています。
http://oskuni7.sakura.ne.jp/mailform102/mailform.php
私が考えた所ではCSSをうまく使っているか・いないかの違いではないかと思っているのですが
携帯電話のサイトでメールフォーム等を作成する際に気をつけるポイント、注意点等ありましたら教えてください。
よろしくお願いいたします。
No.1
74
9
23pt
とりあえず、こういった場合はTABLEタグは使わない方が良いです。
INPUTタグに押されて、ラベルを入れてるTDの横幅が狭くなっています。そのため縦一列になっているんだと思います。
そもそも、携帯で表示できる横幅はかなり狭いので、ラベルとINPUTタグを同行に置くのは無理があります。
TABLE等は使用せず、シンプルに
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
としていったほうが良いかと思います。
あと、余計なお世話かも知れませんが、ソースに無駄がありすぎると思います。
PHPの方でどう吐き出しているのかわかりませんが、
余計な改行・タブ・タグ等はできるだけ排除したほうが良いかと。
その方が読み込みも早くなるし、不具合が起きる可能性も減ります。
あ、あと、携帯サイトについて質問する場合、
対象キャリアやどこら辺の端末までサポートするのかも書いておいた方が答えやすいです。
DoCoMoの900シリーズも対象とするなら、TABLEタグは無視されますのでご注意ください。
No.1
749
ここでベストアンサー
23pt
とりあえず、こういった場合はTABLEタグは使わない方が良いです。
INPUTタグに押されて、ラベルを入れてるTDの横幅が狭くなっています。そのため縦一列になっているんだと思います。
そもそも、携帯で表示できる横幅はかなり狭いので、ラベルとINPUTタグを同行に置くのは無理があります。
TABLE等は使用せず、シンプルに
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
ラベル<br>INPUT<br>
としていったほうが良いかと思います。
あと、余計なお世話かも知れませんが、ソースに無駄がありすぎると思います。
PHPの方でどう吐き出しているのかわかりませんが、
余計な改行・タブ・タグ等はできるだけ排除したほうが良いかと。
その方が読み込みも早くなるし、不具合が起きる可能性も減ります。
あ、あと、携帯サイトについて質問する場合、
対象キャリアやどこら辺の端末までサポートするのかも書いておいた方が答えやすいです。
DoCoMoの900シリーズも対象とするなら、TABLEタグは無視されますのでご注意ください。
ご回答ありがとうございます。試してみます。
No.2
50
23pt
CSSはドコモ機では反映されないので振り分けもしくは使わないなど対処が必要です。
テーブルタグを使うこともあまりオススメしません。（フォームで使う必要はないと思います）
古いドコモ機（無視しても問題ない数かも知れませんが）では反映されません。
コツとしては
空白・半角空白をうまくつかうこと
説明は簡素に
注目してほしい文字は色指定する
テーブルは使わなくても綺麗になります。
下みたいな感じでいかがでしょうか？
<form action="">
■お名前(必須)
<input type="text" name="name">
■件名 (必須)
<input type="text" name="subject">
■本文 (必須)
<textarea name="body"></textarea>
#.<input type="submit" value="送信" accesskey="#">
</form>
私としては下のメールフォームも携帯で見るには不便だと思います。
urlはダミーです
ご回答ありがとうございます。とても参考になります。
No.3
20
22pt
私が構築した際に感じた注意点を書きます。
まずテーブルですが、携帯電話の小さい画面では縦２列は厳しいと思います。
特にほとんどの携帯が縦スクロールしようなので、あまり意味が無いと思います。
私がテーブルを使ってデザインするなら下記ですね。
---------------
| 商品タイトル |
---------------
| (入力欄) |
---------------
| もばおくID |
---------------
| (入力欄) |
---------------
各機種によって同じソースでも表示が変わってくるので(例えばFONTの大きさ)、あまり手の込んだデザインにせずに、シンプルなデザインが良いと思います。
↓あとCSSに対応している携帯もあるようですが全てではないようです。
ご回答ありがとうございます。とても参考になります。
No.4
703
22pt
CSSはドコモ機では反映されないのではなく、ドコモは拡張子がxhtml になってないと細かい色指定ができないようです。
http://yumisaiki.blogspot.com/search/label/%E6%90%BA%E5%B8%AF%E3...
が私の携帯サイトについての研究のブログです。
たいしたことないけど参考までに。
ありがとうございます。参考にさせていただきます。
269
267
3
1
ご回答ありがとうございます。試してみます。