携帯サイト(ケータイサイト)の作り方
2014/11/10
1年以上前の記事です。内容が古い可能性があります。
以前、携帯サイト(i-modeサイト)でCSSを使う方法を説明しましたが、
加えてサイト内のデザイン方法もメモしておくことにしました。
前回の記事が一部必要の無いところまで解説してしまっているので、そちらの指摘も兼ねています。
それは「XML宣言」です。
記述がXHTMLになっていれば(もっと言うと拡張子がxhtmlになっていれば)「XML宣言」なくとも問題ありませんでした。
せっかくなのでトラックバックを送りつつそのままにしておこうと思っています。
なお、今回はDreamWeaverを使って作る方法となっています。
が、他のソフトでも基本変わりないです。
1. まずは新規ドキュメント(「ファイル」→「新規」)を「HTML」の「XHTML Mobile(モバイル)1.0」で作成する。
2. 次に「修正」→「ページプロパティ」で「タイトル/エンコーディング」を確認。
エンコーディングが「日本語(シフト JIS)」になっていればOK。
※ユニコード(UTF-8)でもi-modeでは問題ないがAUで文字化けがありました。
3. 基本的に全ての行を<DIV>タグで囲みstyle属性でスタイルを指定していく。
利用価値の高い使えるstyleに関しては後半で解説します。
4. 画像は横幅最大240px。回り込みを設定するときは80px程度が最適。
5. リンク色(ロールオーバー時の文字色等)に関してだけは<HEAD>内に<STYLE>タグで指定する。
a:link {color: #666666}
a:visited {color: #666666}
a:hover {color: #FF3333}
a:active {color: #FF3333}
こんな感じ。
6. マーキー(文字が画面を横切る)やブリンク(点滅文字)の指定もタグではなくスタイルシートで。
7. 画像はあまり使わない(使っても3点が限度)。テーブル等も使わない。<div>と<img>、<hr>だけで十分です。
8. 出来上がったら保存。デフォルトでは拡張子がhtm(またはhtml)になってしまうので保存時にxhtmlに直す(これが一番重要!!)
利用価値の高い使えるstyle一覧
○文字の大きさを変える
font-size:small
携帯サイトでは文字サイズは3段階までのようです。
smallで一段階小さくするかlargeで一段階大きくするかになります。
○文字に色をつける
color:#FFFFFF
僕は背景に色を敷いて文字を白抜きにするときに良く使ってます。
もちろんどんな色でも設定できますのでそのあたりはご自由に。
○文字の背景に色を敷く
background-color:#000000
タイトルやキャッチコピーに使うといいと思います。
○文字を中ぞろえ(センターぞろえ)にする
text-align:center
バックグラウンドに色を入れて白抜き、センターぞろえで見出しの出来上がり。
もちろん右揃え等もできます。
○マーキー(文字が画面を横切る加工)
display:-wap-marquee
携帯サイトでは良く見かけますね
○ブリンク(文字が点滅する加工)
text-decoration:blink
いまや携帯サイトでもあまり見なくなりました。
以上は<div>タグ(一部は<span>タグにも)に使用するstyle要素です。
他にも<img>タグにfloat:leftを使ったり、<hr>タグにborder-color:#FF0000を使ったりという技もありますが、それに関してはまた後日。
□仕様と実装が違う!ケータイのマーキー記述方法(XHTML+CSS) | 株式会社シンメトリック公式ブログ – 携帯開発から生まれる技術情報
アドセンス広告メイン
関連記事
-
-
Flickr(フリッカー)リニューアル後、set画面からスライドショーの埋め込みソースが取得できなくなった
1年以上前の記事です。内容が古い可能性があります。Flickr(フリッカー)リニ …
-
-
AndroidでもFlash終了。HTML5を勉強しましょう
1年以上前の記事です。内容が古い可能性があります。Android系スマートフォン …
-
-
iPhoneはiPodとしても使えるんだった
1年以上前の記事です。内容が古い可能性があります。知ってはいながらも今の機能で満 …
-
-
画像の下にどうしても隙間が残る場合は
タグにvertical-align:bottomが正解【Webデザイン・CSS】
1年以上前の記事です。内容が古い可能性があります。これは知らなかった。。というか …
-
-
合コンで使えるiPhoneアプリランキング
1年以上前の記事です。内容が古い可能性があります。既婚者だって合コンしたい。なん …
-
-
モリサワ主催AdobeCS3セミナーに参加
1年以上前の記事です。内容が古い可能性があります。モリサワ主催の「Adobe C …
-
-
iPhoneの連絡先を「iCloud」と「Outlook Express」同時に同期させる方法
1年以上前の記事です。内容が古い可能性があります。iPhoneのOS(iOS)を …
-
-
「AMANA(アマナ)」のプロが撮影した写真素材約48万点が使い放題。ただし「NAVERまとめ」に限る
1年以上前の記事です。内容が古い可能性があります。これはすごいサービスを「NAV …
-
-
スマホアプリでHIV(AIDS(エイズ))の検査。心当たりのある方、カミングアウトせずに済みます
1年以上前の記事です。内容が古い可能性があります。以前、血液一滴3分でガンが診断 …
-
-
CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。今まではIE6の存在等もあって …
- PREV
- 「ドコモ(docomo)」このタイミングで907iシリーズを発表
- NEXT
- ソースは毎日新聞です