人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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


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

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

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


●質問者: aiomock
●カテゴリ:コンピュータ インターネット
✍キーワード:CSS HTML pc いるか サイト
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● noname
●23ポイント ベストアンサー

とりあえず、こういった場合は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/

◎質問者からの返答

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


2 ● tysmk
●23ポイント

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はダミーです

◎質問者からの返答

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


3 ● ke0712
●22ポイント

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

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

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

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

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

| 商品タイトル |

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

| (入力欄) |

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

| もばおくID |

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

| (入力欄) |

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

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

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

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

◎質問者からの返答

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


4 ● yumisaiki
●22ポイント

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

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ