新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

携帯サイト(ケータイサイト)の作り方

      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) | 株式会社シンメトリック公式ブログ – 携帯開発から生まれる技術情報

 - ガラケー, デザイン, 携帯電話・スマホ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

ケータイ各社夏モデルを発表!! 【今週のトピック】

1年以上前の記事です。内容が古い可能性があります。ケータイ各社が夏モデルを相次い …

将来あらゆる物をスマートフォンから探せる。が残念っ! 一番無くす回数が多いのはそのスマホ自体

1年以上前の記事です。内容が古い可能性があります。Googleがモノの位置を記録 …

no image
docomo(ドコモ)のSPモード障害が起こったわけ

1年以上前の記事です。内容が古い可能性があります。ちょっと前の話になってしまいま …

CSS2.1まとめ書き-background編(HTML・CSSリファレンス)

1年以上前の記事です。内容が古い可能性があります。CSS2.1まとめ書きも3回目 …

no image
ケータイメール無料の謎が解けた

1年以上前の記事です。内容が古い可能性があります。いよいよ、iPhoneを買っち …

LINE(ライン)アカウント乗っ取りの犯人は中国人

1年以上前の記事です。内容が古い可能性があります。たまたま自分のところには被害は …

タイのケータイキャリア「Truemove H」のCMが涙を誘う

1年以上前の記事です。内容が古い可能性があります。ひょっとしたら先日、Yahoo …

iPhoneでWi-fiの調子が悪くなったら「機内モード」

1年以上前の記事です。内容が古い可能性があります。こちらの記事からの派生。単独で …

no image
これはすごい。iPhoneの隠しコマンド一覧

1年以上前の記事です。内容が古い可能性があります。iPhoneの隠しコマンドとい …

衝撃!! 「LINE POP」は辞められない

1年以上前の記事です。内容が古い可能性があります。「LINE POP」がなんか知 …

血液型オヤジ