携帯電話サイト作成について質問です。


現在携帯電話から入力できるメールフォームを作成しているのですが、
サイトの構成がうまく出来ず悪戦苦闘しています。

携帯電話を作成する上(特にフォームをHTMLに入れる際等)での注意点などを教えてください。

サイトは以下になります。

http://oskuni7.sakura.ne.jp/mobaoku/mailform.php

PCのブラウザ上から見ると何の問題もないのですが携帯電話から見るとテーブルが折り返し
表示されたり、タイトルの列が縦長に表示されたり等バランスが非常に悪い状態で表示されてしまいます。


最近ダウンロードしたのですがこのひとが作成したサイトはうまく携帯電話で表示されています。

http://oskuni7.sakura.ne.jp/mailform102/mailform.php

私が考えた所ではCSSをうまく使っているか・いないかの違いではないかと思っているのですが
携帯電話のサイトでメールフォーム等を作成する際に気をつけるポイント、注意点等ありましたら教えてください。
よろしくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/09/19 14:15:25
  • 終了:2008/09/26 14:20:02

ベストアンサー

id:exflower No.1

noname回答回数74ベストアンサー獲得回数92008/09/19 16:37:10

ポイント23pt

とりあえず、こういった場合はTABLEタグは使わない方が良いです。

INPUTタグに押されて、ラベルを入れてるTDの横幅が狭くなっています。そのため縦一列になっているんだと思います。

そもそも、携帯で表示できる横幅はかなり狭いので、ラベルとINPUTタグを同行に置くのは無理があります。

TABLE等は使用せず、シンプルに

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

としていったほうが良いかと思います。


あと、余計なお世話かも知れませんが、ソースに無駄がありすぎると思います。

PHPの方でどう吐き出しているのかわかりませんが、

余計な改行・タブ・タグ等はできるだけ排除したほうが良いかと。

その方が読み込みも早くなるし、不具合が起きる可能性も減ります。


あ、あと、携帯サイトについて質問する場合、

対象キャリアやどこら辺の端末までサポートするのかも書いておいた方が答えやすいです。

DoCoMoの900シリーズも対象とするなら、TABLEタグは無視されますのでご注意ください。


http://q.hatena.ne.jp/

id:aiomock

ご回答ありがとうございます。試してみます。

2008/09/19 16:42:08

その他の回答(3件)

id:exflower No.1

noname回答回数74ベストアンサー獲得回数92008/09/19 16:37:10ここでベストアンサー

ポイント23pt

とりあえず、こういった場合はTABLEタグは使わない方が良いです。

INPUTタグに押されて、ラベルを入れてるTDの横幅が狭くなっています。そのため縦一列になっているんだと思います。

そもそも、携帯で表示できる横幅はかなり狭いので、ラベルとINPUTタグを同行に置くのは無理があります。

TABLE等は使用せず、シンプルに

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

ラベル<br>INPUT<br>

としていったほうが良いかと思います。


あと、余計なお世話かも知れませんが、ソースに無駄がありすぎると思います。

PHPの方でどう吐き出しているのかわかりませんが、

余計な改行・タブ・タグ等はできるだけ排除したほうが良いかと。

その方が読み込みも早くなるし、不具合が起きる可能性も減ります。


あ、あと、携帯サイトについて質問する場合、

対象キャリアやどこら辺の端末までサポートするのかも書いておいた方が答えやすいです。

DoCoMoの900シリーズも対象とするなら、TABLEタグは無視されますのでご注意ください。


http://q.hatena.ne.jp/

id:aiomock

ご回答ありがとうございます。試してみます。

2008/09/19 16:42:08
id:tysmk No.2

tysmk回答回数5ベストアンサー獲得回数02008/09/19 16:42:37

ポイント23pt

CSSはドコモ機では反映されないので振り分けもしくは使わないなど対処が必要です。

テーブルタグを使うこともあまりオススメしません。(フォームで使う必要はないと思います)

古いドコモ機(無視しても問題ない数かも知れませんが)では反映されません。

コツとしては

 空白・半角空白をうまくつかうこと

 説明は簡素に

 注目してほしい文字は色指定する

テーブルは使わなくても綺麗になります。

下みたいな感じでいかがでしょうか?

<form action="">

■お名前(必須)

<input type="text" name="name">

■件名 (必須)

<input type="text" name="subject">

■本文 (必須)

<textarea name="body"></textarea>

#.<input type="submit" value="送信" accesskey="#">

</form>

私としては下のメールフォームも携帯で見るには不便だと思います。

http://q.hatena.ne.jp/

urlはダミーです

id:aiomock

ご回答ありがとうございます。とても参考になります。

2008/09/19 17:16:01
id:ke0712 No.3

ke0712回答回数2ベストアンサー獲得回数02008/09/19 16:44:13

ポイント22pt

私が構築した際に感じた注意点を書きます。

まずテーブルですが、携帯電話の小さい画面では縦2列は厳しいと思います。

特にほとんどの携帯が縦スクロールしようなので、あまり意味が無いと思います。

私がテーブルを使ってデザインするなら下記ですね。

---------------

| 商品タイトル |

---------------

| (入力欄) |

---------------

| もばおくID |

---------------

| (入力欄) |

---------------

各機種によって同じソースでも表示が変わってくるので(例えばFONTの大きさ)、あまり手の込んだデザインにせずに、シンプルなデザインが良いと思います。

↓あとCSSに対応している携帯もあるようですが全てではないようです。

http://dspt.blog59.fc2.com/

id:aiomock

ご回答ありがとうございます。とても参考になります。

2008/09/19 17:16:03
id:yumisaiki No.4

yumisaiki回答回数70ベストアンサー獲得回数32008/09/19 23:39:45

ポイント22pt

CSSはドコモ機では反映されないのではなく、ドコモは拡張子がxhtml になってないと細かい色指定ができないようです。

http://yumisaiki.blogspot.com/search/label/%E6%90%BA%E5%B8%AF%E3...

が私の携帯サイトについての研究のブログです。

たいしたことないけど参考までに。

id:aiomock

ありがとうございます。参考にさせていただきます。

2008/09/20 16:57:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません