携帯サイト作成にあたっての、基本的な知識について教えて下さい。
---------------------------------
○作成内容は、
・地域情報のポータルサイト
・画像(写真と作った画像)と場所を紹介する文章のみで、FlashやCGIや動画などは使いません。
です。
・3キャリア対応
○借りる予定のレンタルサーバー
FC2web
○HTML知識
PCサイトを作る知識はあります。タグも大体わかります。
---------------------------------
携帯サイト作成について色々ググって調べたのですが、イマイチ感覚が掴めません。
まずは無料のレンタルサーバーで試しに作ってみようと思い、FC2webを使うことにしてみました。
FC2webには、「無料携帯サイト作成サービス」がありますが、これだとPCサイトをタグ入力で作るような作り方は出来ないような気がします(ページ内部にCSSを直接入力するような使い方が出来ない?!)。
Q&Aを読むと、“自由に作りたいならFC2ホームページを使え”とあります。
そこで質問です(順序がバラバラで申し訳ないですヾ(_ _*))
(1)携帯サイトを作るのに、PC用サイトのページで作る場合、横(表示されるページ幅)のサイズの設定はいくつにしたら良いのか。
(2)FC2ホームページを利用した場合、3キャリアに問題なく対応できるかどうかの確認は出来ないと思うので、3キャリア対応を確認できる無料ソフトがあれば教えて下さい。
(3)携帯サイトの「記述に使う言語」を色々調べてみましたが、htmlとxhtml、どちらを使うのが妥当なのでしょうか。
こちらの説明「http://allabout.co.jp/gm/gc/23999/2/」を見ると、
“「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できます。 また、検索エンジンからも「携帯サイト」であると認識されます。”
と書いてありますが、ここに書いてある通りに作れば、3キャリア対応が作りやすいのでしょうか。
(4)使えるタグは勉強中なのですが、外部CSSは使いませんが、「表」を入力するようなタグは使えますか?
とりあえず、今思いつくのはこれだけですが、他に参考になりそうなサイトもあれば教えて頂けると嬉しいです。
宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
3キャリアを一つのhtmlでやるのはかなりハードですね・・・
携帯の場合対応させたい機種が重要になってくるので、その補足はあった方がいいんじゃないでしょうか。
(1)スクロールバー分を引いて220pxもしくは画面の幅の240pxあたりが最低ラインじゃないでしょうか
(2)ソフトはありますが再現性がいまいちなので実機で確認された方がいいです。
iモードHTMLシミュレータIIはそこそこ再現性が高かったような気がします。
(3)docomoのことを考えてtransitional 1.0かmobile profile 1.0がいいんじゃないでしょうか。
(4)使えます。
以下3キャリアの見た目統一の方法です。どうしてもデザインが調整できない時は見てみてください。
情報がちょっと古い可能性があるので参考程度に・・・
・画像のフォーマットは基本はjpegです。次点でgif。
・divとspanとimg以外あまり信用できないです。pとか使うと余白が消せないことが多いです。
・背景やフォントカラーを指定したい時はdivまたはspanに指定する。
・文章間の改行はdivを使って行うと隙間ができにくいです。
<div>一段目</div>
<div>二段目</div>
・画像間の改行はbrを使うと隙間ができにくいです。
<img src="a.jpg" alt="" /><br />
<img src="a.jpg" alt="" />
・文字と画像間の改行は匿名ブロック要素を利用すると隙間ができにくいです。
<div>テキスト</div>
<img src="image.gif" alt="" />
・余白をシビアに調整したい時は1×1pxの画像にheightを指定して調整するといいと思います。
<img src="spacer.jpg" alt="" height="20" />
この回答への補足
すみません、お礼の補足です。
幅480pxで作ったらレイアウトが崩れるかどうか、と質問させて頂いたのは、
たまに見るサイトで幅240pxで全体的に作られたであろうサイトを手持ちのSOFTBANK携帯で見ると、両側に余白が出来、肝心のサイト全体が小さく表示されてしまって、サイトが見にくいからです。
参考になるかわかりませんが、
GREEのアプリで「おみせやさん」というのがあり、そこがそういう作り方になっています。
SOFTBANKの携帯で見ると、真ん中に細~く表示され、文字もとても小さくなるので、一々ブラウザ設定で文字を拡大しなくてはいけません;
なるべくなら、見る側のそういう作業の煩わしさを無くしたいのですが、、、
3キャリアの事を同時に考えようとすると、確かに頭がこんがらがってきます(-。-;)
手持ちの携帯がSOFTBANK3G(912SH)なのと、周りにauが多いのと、ドコモを使ったことが無いので、ドコモ対応で調べると、制限がキツそうで、どこまで対応のサイトを作ったら良いのか迷っていました。
-------------------------------------------
“画面の幅の240px”とありますが、これも何処かで調べて疑問だったのですが、これはどの携帯でも一緒ですか?解像度の問題なんでしょうか。。
手持ちのSOFTBANK携帯で画像を見る時、隙間無くめ一杯で表示すると縦800ピクセル横480ピクセルで表示出来ます。
画像の場合は、サイズが違っても縮小拡大で表示されるように出来るみたいですが、文章などのレイアウトも幅480ピクセルで作るとドコモでは崩れてしまいますか?
-------------------------------------------
デザイン調整、とても参考になります!
色々な携帯サイトを見て調べてて疑問に思ってた事でした^^
とても詳しくありがとうございました。
あと、上記の疑問、お手数ですがわかる範囲で教えて頂けると嬉しいです。
宜しくお願いいたします。
No.3
- 回答日時:
携帯スペックのデータベースです。
http://blog.ville.jp/2008/06/04/99
iモードブラウザ1.0の情報が多いので参考になるのではないでしょうか
>肝心のサイト全体が小さく表示されてしまって、サイトが見にくいからです。
サイトの幅が240pxで固定されている場合、少なからずwidthに対応しているブラウザだと同じような挙動になるのではないでしょうか。
逆に480pxで作った場合は普通に解釈すれば240pxの画面で横スクロールが発生する可能性があります。
質問者さんのソフトバンクの挙動を聞いた感じ、少なくともサイト全体への幅指定は1つのhtmlでは難しいのではないかと思います。
本来なら対応機種を絞るのが一番ですが、そうしたくないのであれば最大幅と最小幅を決定して可変のデザインにするのがいいのではないでしょうか。
極力最小幅で画像を作り、サイト全体へのwidthは指定しない方法です。
文章は普通にマークアップすれば自動的に折り返すので問題ないと思います。
画像はdivの中に内包しdivに背景色を付けるなどすれば、見かけ上画像を拡大することなく画面いっぱいに伸ばすことができます。
<div style="background:#ffffff;"><img src="header.jpg" alt="サイト名" /></div>
画面いっぱいに画像を伸ばしたいところだけは苦肉の策として最大幅で作った画像を縮小させて表示させるという方法があります。(あまりオススメはしません)
<img src="header.jpg" alt="サイト名" width="100%" />
携帯サイトは文字数がかなりシビアにデザインに絡んでくるため、そのあたりとの調整も必要だとは思いますが・・・
ありがとうございます。
昨日、お礼を書いた後、i-mode HTML Simulator IIを使って色々サイトを見てみて、手持ちのSOFTBANK携帯と比較してみて、表示の違う部分をだいぶ理解できてきました。
サイト全体はwidth100%か指定しないかに設定し、画像や本文を240pxに収めているサイトが殆どでした。確かに、画像を480pxにした場合、横スクロールが出るのはイタダケナイですよね;
携帯スペックのデータベースを見ると、ドコモ携帯にもブラウザ幅が480pxのものが2009年以降、一部の携帯で出てきてはいますが、まだまだ少ないようですし。
というか、よく考えたら、画像を多用するので、3G対応に対応機種を絞らないといけないかもしれない(笑)今更ですが。。
ドコモ携帯って2004年以降~の機種は全部「FOMA」なのかな?それなら、あまり気にせず作れそうですね。
今回頂いた情報でかなり勉強になりました。
頑張って作ってみます。ありがとうございました。
No.1
- 回答日時:
3キャリア対応したければ、iモード用に作ればOKです。
iモード用に作れば、残りの2キャリアでも表示できます。
HTML使うかXHTML使うかは好みですが、HTMLの方が簡単でしょう。
その変わり凝ったページは作れませんけど。
[参考]作ろうiモード:iモードブラウザ | サービス・機能 | NTTドコモ
http://www.nttdocomo.co.jp/service/imode/make/co …
とりあえず、iモードブラウザ1.0用のHTML辺りで作ることから始めましょう。
ドコモの参考サイトありがとうございます。
使ってる携帯がSOFTBANKなのと、ドコモ携帯を使ったことがないので困っていました。
2009年5月以降の機種だとSOFTBANKの3Gに近い性能なのでしょうか。
しかし、それ以前の機種を使ってる人がまだまだ多いのですよね。
iモードブラウザ1.0用のHTML、勉強してみますね。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- インターネット広告・アフィリエイト アフェリエイトサイト 作成について 5 2022/05/13 21:31
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- PHP $_SESSIONに渡した後はそのまま使っても問題ありませんか? 3 2022/11/08 22:17
- インターネットビジネス 個人事業用のwebサイトを作るためのおすすめの本を教えて下さい。 4 2022/06/30 17:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
particles.jsの背景の上にテキ...
-
CSSでテキストのリストの・...
-
【至急お助け!】チェックボッ...
-
CSSのリスト 背景画像が表示さ...
-
IEで<div>の下の<img>がずれる
-
ホームページ背景の、透過率設...
-
インラインフレームでの背景画...
-
HTML・CSSコーディングが上手く...
-
ページごとに背景画像を変更し...
-
文字列の下に点線を出す
-
テーブルセルの背景画像のサイ...
-
背景画像をくりかえさないhtml
-
テキストの横にアイコンを並べたい
-
テキストのフェードインの方法
-
CSSで背景画像の比率保持、拡大...
-
見出しの複数行の対応について
-
ホームページの背景画像を画面...
-
CSSでの動画のマスク処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報