ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
[携帯]デザインの時、fontサイズを何pxにしてますか？ │ これからゆっくり考L +α
携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフにしてる部分）を何ピクセルにしてますか？ PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。 ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準（中）」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。 ※会社の方針や案件によっては違うかもしれないので一概には言えませんが。 デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...？ で、端末側の設定で文字サイズ標準（中）にすると、意外と文字が大きく表示されるんです。 なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見た
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
[携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 │ これからゆっくり考L +α
モバイルサイトでリンク色を指定するには、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 フォーカス時のリンク色 未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって
[携帯]複数画像を縦に隙間なく表示させられるか │ これからゆっくり考L +α
先日コーディングをしたモバイルサイトの案件で、どうしても複数画像を縦に隙間なく表示させなければならない状況がありまして、その時の検証結果をまとめてみました。 3キャリア（docomo,au,softbank）1ソース対応 対応機種：3G以降 xhtmlで記述 サンプルページ http://sakaki0214.com/sample/090328/index.xhtml ※シュミレーターやFirefoxのアドオン「FireMobileSimulator」や、直接携帯端末で見てください。 各サンプルの簡単な解説 [1]1画像ごとにbrで改行<img src="画像" /><br /> <img src="画像" /><br /> <img src="画像" /><br /> [2]改行なし<img src="画像" /> <img src="画像" /> <img src="画像" /> [3
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
404 not found │ これからゆっくり考L +α