携帯サイト(ケータイサイト)の作り方Part2
2014/11/10
1年以上前の記事です。内容が古い可能性があります。
携帯サイト作成に関するすばらしい記事を見つけました。
□モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-
Tips 1. XHTMLで作成する。
Tips 2. キャリアごとの仕様の差は外部CSSで。
Tips 3. 文字サイズを小さくするには
Tips 4. ロゴ画像のサイズは横240ピクセル
Tips 5. 流れる文字はDIVタグで
Tips 6. 反転文字
Tips 7. 色つき水平線
Tips 8. 右寄せ
Tips 9. 画像の回り込み
Tips 10. 携帯サイトは文字でデザインする!
Tips 11. フッターは最後に。そして質素に。
Tips 12. 絵文字のちょっとしたテクニック
Tips 1. XHTMLで作成する。
に関しては僕も過去に記事にしています。
□携帯サイト(モバイルサイト)でCSS
ドコモでCSSを使うためにはXHTML(拡張子xhtml)にしてタグ内でCSSを書くという内容です。
これは、docomoが外部CSSに対応していないからです。
で、それを利用したのが
Tips 2. キャリアごとの仕様の差は外部CSSで。
です。
外部CSSを読めるブラウザ(au・ソフトバンク)と読めないブラウザ(ドコモ)
の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述する
といった内容になっています。
Tips 3~Tips 5に関しても僕の過去の記事に同じような内容が書かれています。
□携帯サイト(ケータイサイト)の作り方
Tips 3. 文字サイズを小さくするには
○文字の大きさを変える
font-size:small
携帯サイトでは文字サイズは3段階までのようです。
smallで一段階小さくするかlargeで一段階大きくするかになります。
Tips 4. ロゴ画像のサイズは横240ピクセル
画像は横幅最大240px。回り込みを設定するときは80px程度が最適。
Tips 5. 流れる文字はDIVタグで
○マーキー(文字が画面を横切る加工)
display:-wap-marquee
と言った具合。
Tips 6. 反転文字
も
○文字に色をつける
color:#FFFFFF
僕は背景に色を敷いて文字を白抜きにするときに良く使ってます。
もちろんどんな色でも設定できますのでそのあたりはご自由に。
○文字の背景に色を敷く
background-color:#000000
タイトルやキャッチコピーに使うといいと思います。
こちらの組み合わせで作れるし、前の記事で
<div style=”background-color:#000;color:#fff;font-size:xx-small”>こんにちは</div>
といった例も上げています。
Tips 7. 色つき水平線
も同様に前の記事で
たとえば罫線はこんな感じで。
<hr style=”border-style:solid;border-color:#FFA900;height:0″ />
と、書いています。
うーむ。偶然って怖い。
続けましょう。
Tips 8. 右寄せ
に関しては
○文字を中ぞろえ(センターぞろえ)にする
text-align:center
バックグラウンドに色を入れて白抜き、センターぞろえで見出しの出来上がり。
もちろん右揃え等もできます。
これの応用ですね。
Tips 9. 画像の回り込み
も
<img>タグにfloat:leftを使ったり
と、ちょこっと触れてます。
ただ、ここでは
通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。
といった情報が加えられています。
やっぱり偶然
それが証拠にTips 10~Tips 12には僕も参考になる記事が書かれています。
Tips 10. 携帯サイトは文字でデザインする!
つまりは半角やスペースをうまく使ってデザインしようと言うこと。
文字だけのメールマガジンなんかでもやっている手法ですね
Tips 11. フッターは最後に。そして質素に。
携帯サイトなんでフッタは最低限にしようということ。
個人的にはマルシーとそこにリンクを入れるだけでいいと思います。
Tips 12. 絵文字のちょっとしたテクニック
AUの絵文字は画像扱いなので文字を小さくする方法では小さくならないとのこと。
これを回避するためには、あえてドコモの絵文字を記述し、auのサーバー側で絵文字をau向けに自動変換させる
と良いとのことです。
これに対応した携帯絵文字変換スクリプトの改良版ってのがあるそうなのでそちらへのリンクもはっておきます。
□携帯絵文字変換スクリプト 3キャリア対応版 – HTMLタグボード
以上、12の携帯サイト作成に関するTipsの紹介記事でした。
最後にひとつだけどうしても気になることがありまして。。
僕が記事を書いたのが7月5日で、あちらの記事が7月7日なんですよねぇ。
これも偶然なのだろうか。ううむ。。
アドセンス広告メイン
関連記事
-
-
ドコモメール始まった!Gmailが調子悪いので期待
1年以上前の記事です。内容が古い可能性があります。このところ、Gmailの調子が …
-
-
ケータイに掛かってきた電話をiPhoneに転送するようにした
1年以上前の記事です。内容が古い可能性があります。iPhoneを買ってこのかた、 …
-
-
価格1,000万円以上のティファニー携帯
1年以上前の記事です。内容が古い可能性があります。ドコモ(docomo)のプラダ …
-
-
リニューアル後のFlickr(フリッカー)でsetのスライドショーを埋め込む方法【その1】
1年以上前の記事です。内容が古い可能性があります。リニューアル後のFlickr( …
-
-
GPSを切ったスマホでも位置情報はほぼ確定できる(Xperia AXの場合)
1年以上前の記事です。内容が古い可能性があります。最近のスマートフォンでは当たり …
-
-
AA(アスキーアート)がいっぱい!「Tagged AA」他
1年以上前の記事です。内容が古い可能性があります。AA(アスキーアート)ってご存 …
-
-
「iOS 8」をインストールするのはどこまで?「iPhone 4S」だと微妙
1年以上前の記事です。内容が古い可能性があります。iPhoneに最新OS、「iO …
-
-
行きつけのGEORGIA(ジョージア)自動販売機に近づくと永作博美さんや新井恵理那さんがメッセージ♡【スマホで販促02】
1年以上前の記事です。内容が古い可能性があります。スマホを使ったおもしろブランデ …
-
-
「LINE電話」がAndroidで始まった!さっそくやってみた!
1年以上前の記事です。内容が古い可能性があります。LINE電話がAndroid限 …
-
-
え?docomo(ドコモ)が「iPhone 5」発売?予約はお早めに!
1年以上前の記事です。内容が古い可能性があります。ついにdocomo(ドコモ)が …
- PREV
- 円が高いときにアドセンスが日本円で振り込まれた
- NEXT
- 値切りの功罪(大阪府が借金だらけの理由)