これからゆっくり考L +α tag:sakaki0214.com,2008-11-09://1 2010-07-07T03:08:40Z PCサイト・携帯サイトのコーディングに関することをポロポロとアウトプットしていくブログです。 Movable Type Commercial 4.22-ja ケータイサイト制作前にコーダーが確認しておきたいところ tag:sakaki0214.com,2010://1.56 2010-07-07T03:00:30Z 2010-07-07T03:08:40Z モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきた... sakaki0214 モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。
こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。

個人的に「ここだけは外せない！」という項目は以下の6つ

  • ・xhtml？html？
  • ・文字コードは？
  • ・tableは使ってOK？
  • ・絵文字は？
  • ・カタカナの扱いは？半角？全角？
  • ・VGA対応は？
]]> xhtml？html？

最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。
昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。

文字コードは？

携帯サイトといったらShif-JISですが、プログラムが絡んでくると「UTF-8で作成」ということも過去にありました。
そうするとこちらのauで文字化けしてしまって検証がやりにくくなるので、そのあたりも事前にちゃんと話しておくといいと思います。
（文字化けしても表示のチェックはある程度できるのでなんとかなりますが）

tableは使ってOK？

対応端末に901、701、702あたりが入ってくる場合は確認しておきたいところ。
古い端末なので、「使っちゃってくださいー」という場合もありますし、「絶対NG！」という場合もありました。
tableを使わないと再現できないデザインがあがってくることが多々あるので、最初にこれを確認しておくと非常にスムーズにコーディング作業が進みます。

絵文字は？

3キャリア1ソースの場合、コーディング終了後にプログラマーさんの方で処理をする場合が多いです。その場合、コーダーはどのように処理をしておけばいいかというのを確認しておきます。
私がやってきた案件では、i絵文字（docomoで無料配布されているツール）を使っていれておくというパターンが多かったです。依頼があれば私の方でもphpを埋め込んで3キャリア1ソースでも絵文字対応はできるのですが、大体依頼主様側で処理をしてくれることが多いです。

もしくは、デザインで絵文字っぽく使われているけど「画像をスライスして使ってください！」という場合もあるので、この辺りはきちんと確認。

カタカナの扱いは？半角？全角？

デザインで全部のカタカナが全角であがってくることがあります。
その場合、コーダー側で半角にする必要があるかないか、というのも確認しておきます。
ケータイサイトのデザインに慣れているデザイナーさんの場合は、カタカナの全角、半角を使い分けてくる場合があります（素敵すぎ！）。その場合はそれを忠実に再現します。
がしかし、普段ケータイサイトのデザインをやらない人の場合、原稿が全部全角カタカナだったからという理由だけで全部全角でテキストを流し込んでいることが考えられるため、コーダー側でどう処理をした方がいいのかというのを確認しておきます。

私の場合はコーダー側で半角に変換する、というパターンが多いです。

VGA対応は？

本当はスルーしたいところなんですが、後で問題になってくると非常に面倒なので事前にやはり要確認。
横幅480の端末（主にsoftbankのVGA対応端末）での表示をどうするか、です。

私の場合は、
「480でも崩れずにちゃんと見れるようにコーディングはしますが画像は1/2サイズになっちゃいますけどいいですか？」
と聞いて、OKをもらうことが多いです。
もしくは、依頼主様の方で画像変換のプログラムを組み込む、などなど。
3キャリア1ソースでVGAも完璧に対応というのは正直大変です。
プログラムが絡んでくるのでその辺はコーダー側ではノータッチです。

画像のwidth指定を100%表示にしておくというのも1つの手ではあるかもしれませんが、画像が最高に汚くなるので私はあまりやりたくはないです...。
100%表示にしても汚くならないもの（ライン画像など）は100%にしてますけど。

その他

後は、
「title、keywords、descriptionどうしますか？」とか、
「デザインでページ全体左右に余白空いてますけどこれ再現しますか？」とか、
「デザインをどこまで忠実に再現しますか？透過gifガンガン使う感じで大丈夫ですか？それとも軽さ重視ですか？」などなど、
細かい所まで突っ込んで聞こうと思えば色々でてきますが、沢山聞きすぎると大事なことが漏れる可能性もあるので、そのあたりは要調整、という感じです。]]> 執筆協力をした「ケータイサイト解体新書」が発売されました tag:sakaki0214.com,2010://1.55 2010-07-02T17:39:26Z 2010-07-02T18:01:56Z 別のブログでは既に告知してますが、こちらでも紹介させてください。 執筆協力をしま... sakaki0214 別のブログでは既に告知してますが、こちらでも紹介させてください。

執筆協力をしました本「ケータイサイト解体新書」が6月24日に発売されました。

執筆協力といっても、やっていることはこのブログでやっていることとあまり変わりません。実際に自分がデザイン、コーディングをしたサイトのソースがどかんと載っています。

以下、自分が担当したものをざーっとご紹介。

]]> CHAPTER4 4-01

おなじみの「モバツイ」
（おなじみなのでキャプチャーは割愛）

CHAPTER4 4-02

CHAPTER4 4-02

EC系のサイトデザイン、といっても公開できる実績がないので完全なるダミーサイトを作成。
サイト名を考えたり（オガベジ、はオーガニックベジタブルを略しただけだったり！）、商品なににしよー、値段どうしよー、と、ワイヤーといったものがないので色々大変でした。

CHAPTER4 4-03

CHAPTER4 4-03

コンテンツ配信系のサイト「Music Full」。
こちらも公開できる実績がないのでダミーサイト。
サイト名だけ決めてもらって、あとの諸々はすべて自分。
何が大変だったって、CDのジャケット作成とか、CDのタイトルとか曲名とか考えるのがとにかく大変でした。

CHAPTER4 4-04

CHAPTER4 4-04

ポータル系のサイト「think-L JAPAN」。
こちらもダミーサイトです。上と同じく、内容を考える方が大変だったっていう。

CHAPTER4 4-05

CHAPTER4 4-05

芸能・タレントオフィシャル系のサイトデザインということで、個人的にも親しくさせていただいているヨーヨー世界チャンピオンであるBLACKのオフィシャルサイトを作成しました。
BLACK、ヨーヨー、という2つのキーワードを意識したデザインにしたつもりです。

CHAPTER4 4-07

CHAPTER4 4-07

占い系のサイトデザイン、こちらもダミーサイト。
占い師もダミーでたてたほうがデザイン的にもっとしっくりくるものが作れたと思うのですが、ダミーサイトだとそのあたりが難しく...。

この続きは書籍で！

ソースは書籍にも掲載されていますが、Web上でも確認できるようになっています。もちろん携帯でページ確認もできるようになっています。（URLは書籍をご確認くださいませ）

私が読んでも「へー」と思うものがあったり、色々勉強になる本です。なので、現役でバリバリケータイコーディングやってます！という人も、経験が無い人も、ぜひぜひお手に取ってみてみてください。

ケータイサイト解体新書 デザインパターンから理解する実装テクニック
ケータイサイト解体新書 デザインパターンから理解する実装テクニック
posted with amazlet at 10.07.03
ホシナカズキ
ワークスコーポレーション
売り上げランキング: 5466
Amazon.co.jp で詳細を見る
]]> [携帯]携帯サイトで枠線を表現する方法 tag:sakaki0214.com,2010://1.54 2010-05-28T17:18:29Z 2010-06-07T07:38:53Z 3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすれ... sakaki0214 枠線のサンプル画像

3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか？

ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。

xhtmlの場合、htmlの場合、と両方確認してみました。

]]> サンプルページ（border使用）

QRコード
QRコード
→サンプルページを見る 

<div style="text-align:center;">
<div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</div>

divタグにborderプロパティ使用した場合

docomo：F-01A（iモードブラウザ1.0）

枠線は表示されません。

docomo：F-09A（iモードブラウザ2.0）

問題なく表示されます。

au（W63K）

問題なく表示されます。
がしかし、width効かずに枠が画面いっぱいに広がります。
%指定もpx指定もどちらも効かず。

softbank

問題なく表示されます。

実機での見え方


docomo F-01A（iモードブラウザ 1.0）


docomo F-07B（iモードブラウザ 2.0）


au W63K


softbank 930P（VGA）

結論

3キャリア1ソースの場合、docomoのことを考慮するとborderプロパティを使うのはNG。
ではどうすればよいか。
ここで登場するのがtableタグです。

サンプルページ（table使用）

QRコード
QRコード
→サンプルページを見る

tableタグを使用した場合

<div style="text-align:center;">
<table style="width:80%;margin:0 auto;background:#000000;">
<tr>
<td style="background:#eeeeee;">
<div style="text-align:center;font-size:x-small;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</td>
</tr>
</table>
</div>

tableタグの背景色に指定している色が枠線となります。

こうすると、3キャリア1ソースでも大体の端末で枠線が実現できます。auで、divタグにborderプロパティを使用していたときに発生していたwidthが効かない現象も解消されます。

ただし、docomoの古い端末ではtableタグが無視されるため、対応機種にtable未対応端末が含まれている場合は要検討です。

おまけでhtml版

QRコード
QRコード
→サンプルページを見る

tableタグを利用していますが、問題なく表示されます。

]]> [携帯]submitボタンの大きさ調整 tag:sakaki0214.com,2010://1.53 2010-04-21T03:50:51Z 2010-04-21T03:59:11Z よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタ... sakaki0214 よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタンのサイズ）が変更できるか、の検証です。

今までsubmitボタンの大きさを変更したことが無かったのですが、とあるソースを見ていたら、

<input type="submit" value="ボタン" style="font-size:x-small;" />

という記述をみかけて気になった次第です。

]]> サンプルページ

QRコード
→サンプルページを見る

<input type="submit" value="ボタン" style="font-size:x-small;" />

こんな感じで、inputタグの中でfont-sizeを指定してます。

<div style="font-size:x-small;"><input type="submit" value="ボタン" /></div>

下の方は、inputタグ内で指定するのではなく、その外側のdivでfont-sizeを指定しています。

各キャリア、端末の表示

※端末によって若干挙動が異なる可能性があります。

docomo（iモードブラウザ1.0/2.0）

普通のテキストと同じように制御可能

[小]
xx-small
x-small
small

[中]
medium

[大]
large
x-large
xx-large

au（W63K）

なにも変化なし。制御不可

softbank（930P）

7段階の大きさで制御可能

※外側のdivでは制御不可

結論

私の場合ですが、xhtmlでコーディングをする際、body直下のdivでfont-size:x-small指定をすることが多いです。
でも、それだとsoftbankではそれに連動したボタンサイズにならない、ということのようです。

今までそんな気にはしてこなかったので、たぶんそこまで違和感のあるボタンサイズにはなっていなかったんだとは思いますが、今後注意してみてみたいところです。

]]> [携帯]デザインの時、fontサイズを何pxにしてますか？ tag:sakaki0214.com,2010://1.52 2010-03-26T07:12:36Z 2010-03-26T07:32:10Z 携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフに... sakaki0214 携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフにしてる部分）を何ピクセルにしてますか？
PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。

ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準（中）」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。
※会社の方針や案件によっては違うかもしれないので一概には言えませんが。

デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...？

で、端末側の設定で文字サイズ標準（中）にすると、意外と文字が大きく表示されるんです。

なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見たときにだいぶ違和感を感じてしまう可能性があります。

※前提として、文字サイズはdocomoで大中小の3段階しか大きさの変化をつけられません。大はかなり大きいため、中、小の2段階しか使用ません。
詳しくはこちらのエントリーをどうぞ。
>>[携帯]フォントサイズ（XHTML版）

では、サンプルデザインと実際に組んだページを見比べてみます。

]]> サンプルデザイン

文字サイズが小さめのサンプル

このデザインは12px、10pxの文字サイズを使用しています。
実際にコーディングする際は、12pxをfont-size:medium;、10pxをfont-size:x-small;で作成します。

サンプルページのQRコード
→サンプルページを見る

実機での見え方

docomo iモードブラウザ1.0
docomo F-01A （iモードブラウザ1.0）

docomo iモードブラウザ2.0
docomo F-03B （iモードブラウザ2.0）

au W63K
au W63K

softbank 930P
softbank 930P（VGA表示）

文字サイズの大きさがデザインとだいぶ違うと思います。
画像の右側にテキストが入るデザインになっていますが、実機で見ると画像の右側に文字が収まり切らないので、このデザインを見ただけでは文字が画像の下に回り込んでいいのか、それとも回り込ませたくないのかが分かりません...。
コーダーは空気を読んで組んでしまうか、もしくは一旦確認をするという手間が発生します。

フォントサイズは何pxでデザインすればよいか

私の場合ですが、12pxと14px（もしくは15px）で作っています。
以下のデザインは12pxと14pxで作成しています。
それでもまだ小さいかな...と感じますが、これ以上大きくするとそれもそれでちょっとダサくなってしまうというか、なのでこのぐらいがいいかなーという自己判断。

文字サイズが大きめのサンプル

絶対これじゃないとダメ！っていうわけじゃないんですが、10pxだと小さいなーと昔から思っていたので、何となくまとめてみました。

※Special Thanks @tacamy!]]> [携帯]カラーコードを3桁で指定するとどうなるか tag:sakaki0214.com,2010://1.51 2010-02-22T05:56:54Z 2010-02-22T16:22:35Z 背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書... sakaki0214 背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書くことができます。
では、htmlで3桁のカラーコードを使っちゃうとどういうことになるか、というのをキャリア別にチェックしてみました。

先に結論を言ってしまうと、
「HTMLでカラーコード3桁は使うな」
ということなんですが、実際自分がつい使っちゃったことがあってしばしはまった経験があるので...一応書き残しておこうと思った次第です。

]]> サンプルページ

QRコード
QRコード
→サンプルページを見る

3桁でカラーコードを指定するとどうなるか

bodyタグに背景色をカラーコード3桁で指定

<body bgcolor="#333">

docomo（iモードブラウザ1.0）
[F-09A]背景が真っ黒になります。
[SO903i]背景が真っ白になります。
[D902i]背景が真っ白になります。

docomo（iモードブラウザ2.0）
[F-03B]背景が真っ黒になります。

au（W63K）
指定通りの背景色になります。

softbank（930P）
背景が真っ黒になります。

bodyタグに文字色、リンクカラーをカラーコード3桁で指定

<body bgcolor="#333" text="#666" link="#f00" vlink="#f00">

docomo（iモードブラウザ1.0）
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。

docomo（iモードブラウザ2.0）
[F-03B]文字色、リンク色、共に黒になります。

au（W63K）
指定通りの文字色、リンク色になります。

softbank（930P）
文字色、リンク色、共に黒になります。

fontタグに文字色、リンクカラーをカラーコード3桁で指定（htmlの場合）

<font color="#fff">サンプルテキスト</font><br />
<a href="#"><font color="#f00">サンプルテキスト</font></a>

docomo（iモードブラウザ1.0）
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。

docomo（iモードブラウザ2.0）
[F-03B]文字色、リンク色、共に黒になります。

au（W63K）
指定通りの文字色、リンク色になります。

softbank（930P）
文字色、リンク色、共に黒（背景と同化していて全く見えない）

まとめ

冒頭で結論は既に言っちゃいましたが、
「HTMLでカラーコード3桁は使うな」
です。

カラーコード3桁で指定しても携帯ではうまく効かない、と思い込んでいたのですが、CSSでは問題なく反映されるので使っても問題はないかと思います。

CSSであっても３桁での記述はdocomoのちょっと前の端末でうまく反映されないようです。なので、携帯ではカラーコードを３桁に省略せずに、きちんと６桁での記述がよいと思われます。

]]> [携帯]フォントサイズ（XHTML版） tag:sakaki0214.com,2010://1.50 2010-01-13T19:53:01Z 2010-09-02T06:07:38Z フォントサイズ（HTML版）に引き続き、今回はXHTML版です。 CSSでフォン... sakaki0214 フォントサイズ（HTML版）に引き続き、今回はXHTML版です。

CSSでフォントサイズを指定するので、こんな感じになります。

<span style="font-size:x-small;">文字文字</span>

各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。

サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。

]]> サンプルページ

QRコード
フォントサイズ（XHTML版）のQRコード
→サンプルページを見る

各種フォントサイズと、ついでに太字のサンプルもおいております。
太字の指定方法はbとstrongとfont-weight:bold;です。

各キャリア、端末の表示

docomo

【大】xx-large,x-large
【中】large,medium
【小】small,x-small,xx-small
※全端末共通（iモードブラウザ1.0/2.0や端末間での差異なし）

太字はiモードブラウザ1.0は一切効きません。
2.0だとb、strong、font-weight:bold;全て効きます。 N-02Bで確認していただいたところ、太字が一切効いていないとのご連絡をいただきました。2.0なら絶対太字が効く、というわけではないようです。

au

W63K

【大】xx-large,x-large
【中】large
【中】medium
【小】small,x-small
【極小】xx-small
5段階の大きさで表示されます。

太字は一切効いてません。

A5514SA

【大】xx-large,x-large
【中】large,medium,small
【小】x-small,xx-small
3段階の大きさで表示されます。

端末が今手元にないため、太字が効いているかは不明。

softbank

930P

【大】xx-large
【大】x-large
【中】large
【中】medium
【小】small
【小】x-small
【極小】xx-small
7段階の大きさで表示されます。

太字は一切効いてません。

各キャリアのキャプチャ画像

色々な端末で見るの面倒！という人用。
写真をずらーっと並べてみます。
※各端末の文字サイズの設定は「中」にしています。

docomo


SO903i（iモードブラウザ1.0）


F-01A（iモードブラウザ1.0）


F-01B（iモードブラウザ2.0）

au


W63K


W63K

softbank


930P

まとめ

※以下、3キャリア1ソースの場合を想定して書きます。

「携帯サイト[xhtml]のコーディング前のチェックポイント」のエントリーでも触れてますが、個人的には文字の大きさは2段階までと考えていて、3キャリア大体の端末でちゃんと文字の大きさを大小と表示させるためにはx-smallとmediumが一番無難と思っています。

3段階（大、中、小）にしない理由は、docomoがそもそも3段階でしか表示ができず、「大」は本当に大きくて見栄え的に私はNGだと思うので避けたい、というところです。もちろんそのサイトの性質にもよるので、ターゲットユーザーによって大を使う場合もあるかもしれませんが。

x-smallとmediumを使う理由は、3キャリアほぼほぼ共通して「大」「小」の2段階の大きさに表示できるのがx-smallとmediumだったっていうだけです。auとsoftbankに関しては、端末によって異なってくるのでx-smallとmediumだときちんと文字の大きさが2段階にならない場合もあります。じゃあxx-smallにすればいいかっていうと、softbankで結構文字が小さくなります。

3キャリア1ソースだと、どこに妥協点をもっていくかによって指定方法が変わってきます。
その案件にかかわっている人達とどうするか相談して決めるのがベスト、ですかね。

]]> 携帯サイト[xhtml]のコーディング前のチェックポイント tag:sakaki0214.com,2009://1.49 2009-11-29T18:15:00Z 2009-12-01T13:18:34Z 前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来る... sakaki0214 前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。

コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。

デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。

前置きはこのぐらいにして、早速本題へ。

以下が今回のサンプルデザインです。

初期提出デザイン

「これをxhtml、3キャリ1ソースコーディングしてください」
と言われた場合で考えていきます。

前提条件は、
・3キャリア1ソース
・xhtml
・文字コード：Shift-JIS
・改行コード：CR LF
・QVGA対応（VGA対応は特にしない）

対応端末は、
・docomo 902以降（table未対応機種を除外）
・au WIN端末
・softbank 3G
です。

]]> チェックポイント

パッと見て指摘すべき個所は以下の項目。

デザインのチェックポイント

各チェックポイントの詳細は以下を。

背景画像は1つのみ

htmlの場合は｢背景色を複数つかっていないか」というのがポイントでしたが、xhtmlの場合は背景色はいくつあってもOK（divの背景色としていくつでも指定可）です。

ただ、背景画像に関してはbodyタグにしか指定できません。 詳細は「[携帯]各キャリア別、背景画像の対応状況」のエントリーを。

なので、「背景画像は1ページにつき1種類まで」です。

今回のサンプルデザインの場合、bodyで背景画像を指定しているので、タイトル画像部分に背景画像は使えません。なので、タイトル画像はテキストも含めて1枚画像にします。

違う背景色が連続するところはdivの使い方に注意

auでは要素と要素の間に隙間があきます。 なので、違う背景色を指定しているdivとdivの間に隙間があいてしまうので、bodyに指定している背景画像がその隙間に表示されてしまいます。

分かりやすいところで、「サイト内検索」の部分で説明すると、

<div style="background:#84775d;">サイト内検索</div><br />
<div style="background:#f6f0e3;">フォームのパーツ</div>

とやってしまうと、auで見た時に

auで見た時のサンプル画像

こんな感じで隙間があくのです。

なので、divを入れ子にする必要がでてきます。

<div style="background:#84775d;">サイト内検索<br />
<div style="background:#f6f0e3;">フォームのパーツ</div>
</div>

「サイト内検索」以外にも同様にdivの使い方に注意が必要な個所として、タブとタブのすぐ下のラインとの間、「お知らせ」の各項目の部分はdivの使い方に注意しないとauで隙間があきますので要注意です。

フォント関連

xhtmlの場合はcssでfont-size:**;と指定します。 **へはx-small,mediumといった値を入れます。 font-size:10pxという指定もできますが、携帯端末側での文字サイズ変更が効かなかったり、各キャリアで表示が結構異なってしまうので使わない方がいいです。
※px数が小さいとiモードブラウザ2.0で豆みたいな文字になっちゃいます。

文字の大きさはhtml版と同様「2段階」までがベストだと思います。 docomoの文字の大きさがそもそも3段階までしかない、というのと、一番大きいのは本当に大きいのでちょっと不格好かなーと思い、普段は使いません。（3段階の文字の大きさが使われているデザインが上がってきたときは「2段階で」、とピシッと言ってます。）

au、softbankは3段階以上文字の大きさがありますが、docomoに足並みをそろえて2段階といったところです。

2段階の場合はx-small（もしくはxx-small）とmediumを使っています。

後、やはり太字は使いません。 理由はhtml版と同様、docomo（iモードブラウザ1.0：2008年冬モデル以前）、auで効かないからです。 案件によっては、「効く端末にだけ効けばいいから使ってください！」という場合もあるかもしれないので、そこは要相談ですねー。

リンク色が複数存在する

xhtmlの場合はcssでリンク色の指定が可能となります（bodyでも指定可）。
1ページに設定できるリンクの基本色は1つで、「リンク色をここだけ変更したい」という場合はaタグの内側にspanなどで色の指定をするのですが、docomoやsoftbankでそれをすると、リンクの文字色は変更できてもリンクの下線はそのページに設定した基本のリンク色となります。

リンク部分のサンプル画像

これはベースのリンク色をオレンジにした場合、です。

コーディングする際は、全ページに共通して多く使われているリンク色をベースのリンク色に設定したりしますが、いろんなリンク色がまんべんなく使われているとどれをベースのリンク色にすればいいのか悩みます。

なので、そういった場合はデザイナーさんなりディレクターさんに確認した方がいいです。

後、事前にクライアントさん側にも言っておいた方がよりスムーズに進みます。
いざ出来上がったページを実機で見た時に、「ここ（リンクの下線の色）直してくださいー」っていう指示が来てしまうこともありますので。

※ちょっと面倒なやり方ですが、aタグの内側のspanでの指定とあわせて、cssのclassでもリンク色の指定もしておくと、docomoiモードブラウザ2.0、softbankで下線の色も一緒に変更することが可能です。（つまり、iモードブラウザ1.0のみ下線の色とリンク色が揃えられないっていうことになります）

詳細は「[携帯]xhtmlのリンク指定方法～cssとbodyの違い」でご確認くださいませ。

tableは使ってもいいか

今回はtable未対応端末（docomo901、701以前）が対応端末に含まれていませんが、念の為聞いておくといいと思います。 稀にレギュレーション云々でNGの場合がありますので、念には念を！です。

ページの左右の余白再現、特定の場所を枠線で囲う、といった場合や、テキストボックスとボタンの横並びを再現したい場合は（詳細は「[携帯]入力フォームとボタンを横一列に並べる」を）tableの使用が必須となってきます。

tableを使わないと再現できないぞっていうデザインは結構あがってくるので、最初にtable使用の可否は聞くといいです。

あと、xhtmlで作成した場合でも、tableの中にtableを使うとauの一部端末では内側のtableの中身が一切表示されないので、 枠線の中に（table必須）、検索入力窓とボタンを横並びにして（table必須）、ということはできないので、「サイト内検索」の部分は再現不可能です。

横並びの画像の横幅合計が240だと崩れる可能性アリ

今回のサンプルでいうとページ上部にあるタブの部分が該当するのですが、横並びの画像で横幅240pxぴったりにデザインされていると、240px未満の端末で見た時に、タブが横並びにならずに下に落ちます。

横幅が240pxの携帯でも、スクロールバーの分だけ狭くなって238pxっていう場合もありますし、230pxの端末もまだ世の中に結構あります。なので、より多くの携帯できちんと見れるようにするためには、230pxぐらいにした方がいいかなーと思います。

まとめ

今回は「xhtmlで作成する場合」ということでチェックポイントをあげてみましたが、前回のhtml版のエントリー＋今回のエントリー、両方のチェックポイントを頭に入れてデザインチェックをしてみてください（重複している項目は今回省略しましたので）。

上記チェックポイントを踏まえて、再現可能なデザインに修正し、コーディングしたものが以下のものです。

修正後のサンプルデザイン

サンプルページ
QRコード
→サンプルページを見る

]]> [携帯]各キャリア別、背景画像の対応状況 tag:sakaki0214.com,2009://1.48 2009-11-25T13:26:09Z 2009-11-26T03:04:23Z 3キャリア1ソースで作成するときは、「背景画像は1つまで！」ルールでやっているの... sakaki0214 3キャリア1ソースで作成するときは、「背景画像は1つまで！」ルールでやっているのですが、各キャリアの対応状況ってどんなんだろーと思いちょっと確認してみました。

1キャリアのみ対応の案件もたまにあるので、柔軟に対応できますように。

]]> サンプルページ

QRコード
→サンプルページを見る

結果発表

htmlのサンプルページ

bodyに指定
<body background="bg.gif" ...>

docomo:○
au：○
softbank：○

table/tdに指定
<table background="bg2.gif">
<tr>
<td>サンプルです</td>
</tr>
</table>

<table>
<tr>
<td background="bg2.gif">サンプルです</td>
</tr>
</table>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

xhtmlのサンプルページ

bodyに指定
<body style="background:url(bg.gif) ...>

docomo:○
au：○
softbank：○

table/tdに指定

<table style="background:url(bg2.gif);">
<tr>
<td>サンプルです</td>
</tr>
</table>

<table>
<tr>
<td style="background:url(bg2.gif);">サンプルです</td>
</tr>
</table>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

divに指定
<div style="background:url(bg2.gif)">divに背景指定</div>

docomo:×（iモードブラウザ1.0）、○（iモードブラウザ2.0）
au：○
softbank：○

まとめると

docomo（iモードブラウザ1.0）がネック！
これの市場占有率がおちたら3キャリア1ソースでも数種類の背景画像が使えるようになります...ね。

]]> [携帯]xhtmlのリンク指定方法〜cssとbodyの違い tag:sakaki0214.com,2009://1.47 2009-11-20T04:54:17Z 2010-04-07T02:44:06Z 結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です... sakaki0214 結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。

<body link="#5994FF" vlink="#59E2FF">


<style type="text/css">
<![CDATA[
a:link{color:#5994FF;}
a:focus{color:;}
a:visited{color:#59E2FF;}
]]>
</style>

サンプルページ
QRコード
→サンプルページを見る

bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？
って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。

]]> まずは予備知識として

docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモードブラウザ2.0ではhead内もしくは外部ファイルに書いたCSSも効くようになりました。

※「iモードブラウザ1.0」2008年秋冬モデル以前
※「iモードブラウザ2.0」2009年春夏モデル以降

docomoとソフトバンクのリンク色の仕様として、aタグの内側に文字色の指定をしてもリンクの下線の色はbodyないしcssで指定した色が適用されてしまいます。

リンクの文字色と下線の色が異なるのサンプル画像

classを使ってリンク色を指定することによって、この「リンクの下線の色」もリンク色と同一色にすることができます。

iモードブラウザ1.0の為にaタグの内側にspanタグで文字色指定もしておきます。

<style type="text/css">
<![CDATA[
a:link {color:#FF71BA;}
a:focus {}
a:visited {color:#FF71BA;}

a.orange:link {color:#ff6600;}
a.orange:visited {color:#ff6600;}

a.blue:link {color:#3366FF;}
a.blue:visited {color:#3366FF;}
]]>
</style>
・
・
・
<a href="#">リンクサンプルです</a><br />
<a href="#" class="orange"><span style="color:#ff6600;">リンクサンプルです</span></a><br />
<a href="#" class="blue"><span style="color:#3366FF;">リンクサンプルです</span></a><br />

QRコード
→サンプルページを見る

リンクの文字色と下線の色が同一のサンプル画像
iモードブラウザ1.0以外の見え方

こうすることによって、iモードブラウザ1.0以外の端末で見たときに、リンクの文字色と下線が異なるといったことが発生しなくなります。ちょっと面倒ですけど。

iモードブラウザ1.0に関しては...恐らく仕様上変更できないと思います。

]]> [携帯]フォームで使うパーツをまとめてみた tag:sakaki0214.com,2009://1.46 2009-11-18T15:58:00Z 2010-03-31T04:32:14Z 携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるとい... sakaki0214 携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。
そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。

フォームサンプル画面
こんなフォームページがちょちょいのちょいと。

Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ？
ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。

]]> メニュー

さくっとコピペできるように、html用とxhtml用で分けています。

・html用のフォームパーツ
・xhtml用のフォームパーツ

数字とか値は適当に入っているので、コピペしたら直してくださいませ。

html用のフォームパーツ

基本パーツ

formタグ
<form action="" method="">

</form>
一行テキスト
<input type="text" value="" size="">
プルダウン
<select name="xx">
<option selected> </option>
<option value="x">サンプル</option>
<option value="x">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="" name=""> hoge<input type="radio" value="" name="">
チェックボックス
hoge<input type="checkbox" value="" name=""> hoge<input type="checkbox" value="" name="">
テキストボックス
<textarea name="" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン">

割とそのまま使えるパーツ

名前
お名前<br>
<input type="text" value="" size="27">

姓<br>
<input type="text" value="" size="27">

名<br>
<input type="text" value="" size="27">

姓(カナ)<br>
<input type="text" value="" size="27">

名(カナ)<br>
<input type="text" value="" size="27">
住所
〒<input type="text" value="" size="4">-<input type="text" value="" size="6"><br>
住所<br>
<input type="text" value="" size="27">

都道府県<br>
<select name="都道府県">
	<option selected> </option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br>
<input type="text" value="" size="5"> 年 <input type="text" value="" size="3"> 月 <input type="text" value="" size="3"> 日

生年月日<br>
<select name="year">
<option selected> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br>
女<input type="radio" value="" name=""> 男<input type="radio" value="" name="">
同意規約
同意規約<br>
<input type="checkbox" name="" value=""> 同意する
ボタン
<input type="submit" value="確認する">

<input type="submit" value="確認画面へ">

<input type="submit" value="送信">

<input type="reset" value="リセットする">

xhtml用のフォームパーツ

基本パーツ

formタグ
<form action="" method="">

</form>
一行テキスト
<input type="text" value="" style="width:%;" size="" />
プルダウン
<select name="xx">
<option selected="selected"> </option>
<option value="x">サンプル</option>
<option value="x">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="" name="" /> hoge<input type="radio" value="" name="" />
チェックボックス
hoge<input type="checkbox" value="" name="" /> hoge<input type="checkbox" value="" name="" />
テキストボックス
<textarea name="" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン" />

割とそのまま使えるパーツ

名前
お名前<br />
<input type="text" value="" style="width:95%;" size="27" />
姓<br />
<input type="text" value="" style="width:95%;" size="27" />
名<br />
<input type="text" value="" style="width:95%;" size="27" />
姓(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" />
名(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" />
住所
〒<input type="text" value="" style="width:40px;" size="4">-<input type="text" value="" style="width:60px;" size="6"><br />
住所<br>
<input type="text" value="" style="width:95%" size="27">

都道府県<br />
<select name="都道府県">
	<option selected="selected"> </option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br />
<input type="text" value="" style="width:60px;" size="5" /> 年 <input type="text" value="" style="width:40px;" size="3" /> 月 <input type="text" value="" style="width:40px;" size="3" /> 日

生年月日<br />
<select name="year">
<option selected="selected"> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br />
女<input type="radio" value="" name="" /> 男<input type="radio" value="" name="" />
同意規約
同意規約<br />
<input type="checkbox" name="" value="" /> 同意する
ボタン
<input type="submit" value="確認する" />

<input type="submit" value="確認画面へ" />

<input type="submit" value="送信" />

<input type="reset" value="リセットする" />

補足

フォームパーツは、携帯で確認する場合は必ず
<form action="" method=""></form>
で囲われていないとdocomoのiモードブラウザ1.0で表示されません。値は空でいいです。

※methodが入っていなくてもフォームパーツは表示されますが、↑のサンプルでは一応いれてます。
※このエントリーは、今後必要に応じてパーツが追加される可能性があります。

]]> auでselectボックス（プルダウン）が2行になる現象 tag:sakaki0214.com,2009://1.45 2009-11-17T14:50:00Z 2009-11-18T01:43:50Z 恐らく、auの古めの機種でしか発生しないとは思うのですがたまたま遭遇してしまった... sakaki0214 恐らく、auの古めの機種でしか発生しないとは思うのですがたまたま遭遇してしまったため書き残しておきます。 というか、今までこんな現象知らなかったので...今まで私が制作したサイトはことごとく2ｇ（ｒｙ

...。

xhtml、htmlどちらでも同じ現象が発生します。

]]> 一般的なでの見え方

他のキャリアで見るとなんの問題もない普通のプルダウンなんですが。

auの古めな機種（A5511T、W41CAで検証）で見ると、

au（古い端末）での見え方

という感じで2行になります。

ちなみに、auの最近の端末で見るとプルダウンの部分だけ他よりもフォントが大きく見えてしまいます。

一般的なでの見え方

サンプルページ
QRコード
→サンプルページを見る

原因は？

selectの外側で小さめの文字サイズを指定すると、selectボックスの中身のテキストはデフォルトのサイズのままだけど、ボックスのみが小さめの文字サイズにあわせて小さくなります。

要するに、「中身は大きいままなのに外側のボックスは小さくなってしまう」ということです。

auの最近の機種で確認すると、プルダウンの選択肢の部分だけ他よりちょっと大きく見えます。古い端末のように2行になってしまうことはないんですが、文字サイズ指定がselectには効いていないようです。

フォントを1とかx-smallといった小さいサイズをページ全体に指定している場合は、
・auの古い端末でプルダウン内のテキストが2行になってしまう
・auの最近の端末でプルダウン内のテキストが他より大きくなってしまう
という現象を防ぐため、optionの内側で文字サイズの指定をしてあげるとよいです（面倒ですけどね）。

今回はauだけ調整すればよいので、内部スタイルシートで記述しています（外部でももちろんOKです）。

<style type="text/css">
<![CDATA[
.fontS {font-size:x-small;}
]]>
</style>
・
・
・
<select name="xx">
<option value="1"><span class="fontS">20歳～40歳</span></option>
<option value="2"><span class="fontS">40歳～60歳</span></option>
<option value="3"><span class="fontS">60歳～80歳</span></option>
</select>

htmlの場合はoptionの内側にfont size="数字"を指定する必要があります。

<select name="xx">
<option value="1"><font size="1">20歳～40歳</font></option>
<option value="2"><font size="1">40歳～60歳</font></option>
<option value="3"><font size="1">60歳～80歳</font></option>
</select>

サンプルページ
QRコード
→サンプルページを見る

tableの各セルの内側で文字サイズを指定しなおすのと似たような感覚ですね。

ついでにdocomo、softbankの挙動も確認してみる

docomoとsoftbankはoptionタグの内側の文字サイズ指定が効かないです。

docomoの場合は、selectタグの外側の文字サイズがそのままプルダウン内の文字サイズに反映されているようですが、softbankの場合はどの文字サイズ指定も影響しない...どう文字サイズを変更してもプルダウン内の文字サイズを変更することができませんでした。

混乱してきたのでまとめると？

docomo
...selectタグの外側の文字サイズがプルダウン内（optionタグ）の文字サイズに影響

au（古め）
...optionタグの内側に文字サイズ指定をしないと改行される恐れあり（ページ全体の文字サイズが小さい場合）
au（新しめ）
...optionタグの内側の文字サイズ指定が有効

softbank
...完全固定。どの文字サイズ指定にも影響されない

補足

widthで横幅広げれば改行しないのでは？と思い色々試してみましたが、optionタグ内部の文字サイズを小さくしていない状態だとwidthがうまく効きません。selectタグとoptionタグにwidth指定を入れてみたのですが反応無し。
なので、改行されないようにしたい場合はやはりoptionタグ内部の文字サイズを小さくするという方法しか無いようです。

]]> [携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 tag:sakaki0214.com,2009://1.44 2009-11-08T18:48:50Z 2009-11-14T01:16:31Z モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、x... sakaki0214 モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、xhtmlの場合はhead内に記述する必要があります。

<body link="#000000" vlink="#ff0000" alink="">
  • ・link 通常のリンク色
  • ・vlink 訪問済みのリンク色
  • ・alink フォーカス時のリンク色
<head>
...
<style type="text/css">
<![CDATA[
a:link{color:#000000;}
a:visited{color:#666666;}
a:focus{color:;}
]]>
</style>
</head>
  • ・a:link 通常のリンク色
  • ・a:visited 訪問済みのリンク色
  • ・a:focus フォーカス時のリンク色

未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって表示が異なります。

]]> サンプルページ

QRコード
→サンプルページを見る

html版、xhtml版を作成しています。各ページの指定方法は以下の通りです。

[サンプルページ1]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色はグレー

[サンプルページ2]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色はピンク

[サンプルページ3]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色は指定なし

リンクフォーカス時の各キャリア表示差異

docomo

html

[文字色]
alinkで指定した色。alinkの指定がない場合、フォーカス時のリンク文字色はそのテキストの背景の色。
[背景色]
link（訪問済みリンクの場合はvlink）で指定した色。

xhtml

[文字色]
a:focusで指定した色。a:focusの指定がない場合、フォーカス時のリンク文字色はそのテキストの背景の色。
[背景色]
a:link（訪問済みリンクの場合はa:visited）で指定した色。

au

html

[文字色]
背景色の反転（？）色。制御不可。
[背景色]
link（訪問済みリンクの場合はvlink）で指定した色。

xhtml

[文字色]
背景色の反転（？）色。制御不可。
[背景色]
a:link（訪問済みリンクの場合はa:visited）で指定した色。

auではフォーカス時の文字色の制御ができません。
alinkは効かずにlink（vlink）で指定した色が背景色となり、その反転色が文字色となります。 その反転色は白になる場合もありますが（リンク背景色が黒の場合など）、このような感じの色になる時もあります。視認性の悪いフォントカラーになる時がありますが...どうしようもないです。

softbank

html

[文字色]
白
[背景色]
alinkで指定した色。alinkの指定がない場合はlink(vlink)で指定した色

xhtml

[文字色]
白
[背景色]
a:focusで指定した色。a:focusの指定がない場合はa:link(a:visited)で指定した色

softbankはリンクフォーカス時の文字色は常に「白」。ってことは、背景色に白を指定した場合、つまりalink、a:focusを白にするとどうなるかというと、その場合はこういった感じになります。強制的にデフォルトの青い背景に...なります。

まとめ

各サンプルページの表示はこんな感じになります。

サンプルページ1

[指定方法]
link/a:link 黒
vlink/a:visited 赤
alink/a:focus グレー

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

サンプルページ2

[指定方法]
link/a:link 黒
vlink/a:visited 赤
alink/a:focus ピンク

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

サンプルページ3

[指定方法]
link/a:link 黒
vlink/a:visited 赤
alink/a:focus 指定なし

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

個人的には

alink、a:focusはいつも使いません。
使う色を間違えると非常に残念な感じになります...

link/a:link とalink/a:focusに同じ色を指定するのは絶対ダメ。docomoでリンクフォーカス時に文字が見えなくなるので要注意！です。

]]> 携帯サイト（html,table使用可）の制作に入る前に確認しておきたいチェック項目 tag:sakaki0214.com,2009://1.42 2009-11-01T19:46:13Z 2009-11-02T04:28:49Z 前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック... sakaki0214 前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。

今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。

ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。

デザイン、条件は前のエントリーと同様です。

初期提出デザイン

前提条件は、
・3キャリア1ソース
・html（CSSは使用不可）
・文字コード：Shift-JIS
・改行コード：CR LF

対応端末は、
・docomo 901以降
・au WIN端末
・sb 3G
です。
※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。

]]> チェックポイント

tableが使えることによって前よりもチェックすべきポイントは減りましたが、tableを使うことによって新たなチェックポイントが発生してきます。

デザインのチェックポイント

詳細は以下をどうぞ。
前回とかぶる項目（文字サイズや太字の項目）は割愛します。

まずはtableが使えないときにNGとされていた部分について

ページの左右余白

前回NGとしていた「ページ左右の余白」を、今回はtableを使うことによって再現しています。
こうすることによって、各セル（td）の内側1つ1つすべてにfont指定をしています...面倒ですがこれをしないとデフォルトのサイズになりますので抜けてしまわないように注意が必要です。

リストアイコンの下に文字が回り込まない

これもtableを使うことによってデザイン通りにコーディングしています。左寄せにしている画像の右側のテキストが長くなっても画像の下に回り込まないようにするためには、tableが必要なのです。

背景色

これもtableを使えばcssを使わずとも再現可能です。ただ、table非対応機種のことを考慮すると文字色に気をつける必要がでてきます。

「ご注意ください」の部分は背景色のグレーが表示されなくてもきちんと文字が読めますが、フッターのコピーライト部分は背景色のグレーが表示されないと文字が背景と同化してしまって全く読めなくなります。

枠線内側の左右余白

「ご注意ください」の部分の枠線は、tableの背景色をグレーにし、tdの背景色を極薄い青にして枠線っぽく見せています。 なので、そのさらに内側の左右に余白をもたせようと思うとまたtableを使う必要がでてきてしまいます。がしかし、tableを入れ子にしてしまうとauの一部機種で内側のtableの中身が一切表示されなくなります。よってtableの内側にtableは使えません。

tableの入れ子ができないとなると枠線の内側の左右余白はあきらめるしかなさそうです。なので枠線にぴったり文字がくっつく感じになります。

まとめ

tableを使うことによって、ただのhtmlサイトでもだいぶ見栄えの良い携帯サイトが作れるようにはなります。 ただ、やはりtableはできれば使いたくないので（使わないほうがいいと思うので）、背景色をいろいろ使いたい！という場合はxhtmlで作ったほうがいいです。

※tableは絶対NG！というわけではないです。tableでしか実現できなこともありますし、そういう時は使います。ただ、cssでそれが実現できるのであればcssを使ったほうがベターという考えです。今回の背景色もわざわざtableを使わなくてもcssで実現できることなので。
あとは、tableの入れ子はしないように注意が必要です。

※追記
↓のサンプルページをauで見ていただくと分かることなんですが、画像とtableとtableの間に隙間があいてしまっています。xhtmlで作成している場合はdivを入れ子にして隙間があかないようにーとか対応できるんですが、tableだとそれができないので隙間はどうしてもあきます。画像の下に隙間があくのも、3キャリア1ソースだと全キャリアで隙間をなくすっていうのは無理です。詳細はこちらのエントリーをどうぞ。

今回はページの左右に余白をとっているデザインを再現しましたが、携帯サイトでページの左右に余白をとるのは個人的にはすっごく避けたいデザインです。tableの使用が必須になってきてしまいますし、コンテンツの中身でどうしてもtableの使用が必要となってきたときに、tableの入れ子ができないので色々と面倒なことになります。

なので、モバイルサイトのデザインをする際は、両端に文字をぴったりとくっつけたデザインをしていただきたいなーと常々思ってます。意図的にどうしてもあけたいのか、PCサイトのデザインをする感覚であけてしまっているのかが分からないので毎回困ります。うぐぐ...

修正後のデザイン

今回の条件下でコーディング可能なものにデザインしなおしたものです。

修正後のデザイン

サンプルページ
QRコード
→サンプルページを見る
※絵文字は3キャリア対応をしていないので、sbで団子になってます。

]]> 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 tag:sakaki0214.com,2009://1.41 2009-10-29T17:27:23Z 2009-11-02T01:42:04Z 「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではな... sakaki0214 「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。

モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。

ですが、知っているのと知らないのとでは工数がかなり違ってきます。
一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。

今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめてみた感じです。

デザイナーさんに関しては、その項目に気をつけてデザインしていただければ戻しがぐんっと減りますよ！って感じです。

分かりやすいようにサンプルデザインを作ってみました。

初期提出デザイン

「これでhtmlでコーディングしてください」
と言われた場合で考えていきます。

前提条件は、
・3キャリア1ソース
・html（CSSは使用不可）
・文字コード：Shift-JIS
・改行コード：CR LF

対応端末は、
・docomo 901/701以降
・au WIN端末
・softbank 3G
です。

]]> チェックポイント

パッとみて指摘すべき箇所は以下の項目。

デザインのチェックポイント

各チェックポイントの詳細は以下をどうぞ。

tableの使用はOKか

docomoの901、701、702、が対応端末にはいっている場合はtableの使用可否の確認します。901、701、702（一部）はtableが効きません（なかったこととしてレンダリングされます）。

tableは全く使わないのか、基本使わないがtable非対応機種で見ても大きな崩れがなければ使ってもよいのか、それとも気にせず普通に使っていいのかの確認をします。

901、701、702が対応端末に入っていなくても、念のため聞いておくのもいいかと思います。

※2009年10月31日修正
・902はtable対応しているため表示を削除しました。
・702の一部がtable非対応の旨追記しました。

ご指摘ありがとうございました。
ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」 | ke-tai.org

背景色を複数色使っていないか

bodyに背景色を指定するため、基本1色です（背景画像もbodyタグでのみ指定可能）。
複数色使いたい場合はtableの使用が必須です。
table非対応機種では無視されてしまうので場合によっては文字色が見えなくなる可能性もあるのでオススメできません。

複数の背景を色使いたい場合はxhtmlをオススメします。

枠線を使っていないか

枠線はtableを使う必要があります。よってtableが使えない端末では実現不可能です。
cssを使った場合でも、borderが使えないためtableの使用が必須になります。

901、701が対応端末に入ってくる場合は要注意です。

サムネイル画像の横にテキストが来るパターン

今回のサンプルページだと、「新作ブランケットの受付スタート☆」の説明文のところが要確認です。 文字の量が増えた場合、サムネイル画像の下に文字が回り込まないようなデザインになっていますが、これはtableを使う必要があるため今回の条件では実現不可となります。

リストアイコンの下に文字が回り込んでくるかどうか

これは「【特集】冬の季節～」のところです。
これも↑と同じ理由で実現不可。tableが使えない以上、テキストが折り返すと左端から次の行が始まります。

ページの左右に微妙な余白が空いていないか

tableの使用が必須となります。よってこれも実現不可。
デザインする際にピタッと左右にくっつけてほしいところ。
そういうデザインがあがってきた場合でも、口頭で事情を説明することによって「左右の余白は開けなくていいですー」ってなるパターンが多いです。

フォントサイズは2段階ないし1段階か

今回のサンプルサイトでは3段階使っています。
3キャリア1ソースで3段階の文字サイズを使うことはかなり厳しい...おそらく無理です。
なので2段階までで調整してもらいます。

太字を使っていないか

docomo、auでは効かないです（iモードブラウザ2.0では効くので、全部効かないわけではないですが）。 なので現状は「太字使えない機種が多いですよー」ぐらいに言ってます。

まとめ

cssを使わないで制作する場合、tableが使えるか使えないかでできることが結構変わってきます。
個人的にはtableはあまり積極的には使いたくはないんですが。だってセルの中でいちいちフォントサイズ指定し直すのめんｄ（ｒｙ

あとは、tableの中でtableを使ってしまうとauの一部機種で内側のtableの中身が全く表示されなかったりとかもあるので、あまり積極的にビシバシ使うのもどうかなーと思うわけです。上手に使えば表現の幅も広がるので悪くはないと思うんですけどね。

そんな感じで、デザイン時に多少気をつけていただければコーダーは泣いて喜びますし、コーダーもきちんとできるできないを把握していればサクッと「このデザイン無理でーす。」って戻せるわけですし、知っといて損はないと思います。

たかが携帯サイト、されど携帯サイトです。

以上を踏まえたうえでcssを使わずに、tableも使わずに実現できるデザインに作り直したものが以下のものです。

改修後のデザイン

サンプルページ
QRコード
http://sakaki0214.com/sample/091030/

tableを使っていい場合はどうなるか、は次のエントリーをどうぞ。
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目-table使用可の場合

]]>