新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

ようやくケータイ(携帯電話)キャリア6社の絵文字が統一されたらしい(スマホも)

1年以上前の記事です。内容が古い可能性があります。ついにと言うか、やっとですよね …

no image
iPhoneからTwitpicに文字化けさせずに画像を送信する方法5つ

1年以上前の記事です。内容が古い可能性があります。ツイッター本アカウントではFl …

フォルダも下の4つのアイコンに登録できた【iPhone】

1年以上前の記事です。内容が古い可能性があります。これ、誰もが知っていることかも …

知らない人といきなり通話。「斉藤さん」が面白い【iPhoneアプリ】

1年以上前の記事です。内容が古い可能性があります。こんなアプリが無料で配布されて …

Flash(フラッシュ)でGifアニメを作るときの注意点

1年以上前の記事です。内容が古い可能性があります。先日、とあるサイトでGifアニ …

iPhone(+モバイルバッテリー)での風呂スマホは危険。海外では死亡例も

1年以上前の記事です。内容が古い可能性があります。スマホと言えばiPhoneかA …

むしろ良い。docomo(ドコモ)iPhoneは「ドコモ電話帳」、「SPモードメール」などが利用不可

1年以上前の記事です。内容が古い可能性があります。むしろこれはそのままでもいいん …

3色限定ダンジョン限定パーティ「クリシュナ」と「ミスター・サタン」+「クシナダ姫」【パズドラパーティ紹介#4】

1年以上前の記事です。内容が古い可能性があります。最近のパズドラ(パズル&amp …

no image
iPhone(アイフォーン)はどうも危険そうだ

1年以上前の記事です。内容が古い可能性があります。「iPhone」のハッキング・ …

no image
やっぱり携帯って凄い。

1年以上前の記事です。内容が古い可能性があります。やっぱり携帯って凄いですね。

血液型オヤジ