2010年 2月 15日
XHTML/HTML TIPS | 
※2010年2月現在の情報です。
—-
FlashLiteのことばかり書いているので、今日はHTML/XHTMLのことを書きます。
HTML/XHTMLをでサイトを作る際、デザイナーさんやコーダーさんがちょっと気をつけておけば見栄えはグンッと良くなります。
ぜひ、取り入れてみてください！
■画像のコツ
携帯の画面横幅は240px(VGAだと480px)だから、どんな画像でも横幅240pxで作ったりしていませんか？
それはちょっと待った！です。実は、ブラウジング時画面の横幅は240px無い機種が多いです。(au/SBは240pxある端末はほぼ無い)なぜならば、ブラウジング時に右横にスクロールバーが表示されるから。
そのため、横幅は機種によってまちまちです。（228pxとか232pxとか）
横幅240px未満のブラウザで、横幅240pxで配置された画像を見たとき、横にのみ縮小がかかります。
写真とかの画像の場合、この縮小は目立たないのですが、ドットで書かれた画像なんかの場合は、縮小が目立ち、視認性が悪くなってしまいます。(下記図)
横幅一杯に作った画像を配置することがだめな事だとは思っていません。横幅一杯の画像を配置して、コンテンツとコンテンツの区切りとして使ったりとか、デザインする上でよく使うと思います。ただ、横幅一杯の画像を作るときは、その要素の中に潰れては困るもの（商品ロゴ等や、ドットでかかれたもの）が含まれていないか注意してみてください。
＊オプトピクチャーやPicutureFitter、KeitaiPictureなんかの携帯電話向けの画像変換ASPを使えば端末ごとに最適なサイズにリサイズしてくれるようです。
- リンク用画像を作るときはマージンも画像内に含めて！
画像をリンクとして使っているケースはよく見られますが、画像のリンクにフォーカスがあっているのが分かりづらい時はありませんか？
リンク用の画像をピッタリ切り出してしまうと、フォーカスしたときに表示される囲い線が画像となじんでしまいます。なので、リンク用の画像を切り出す際は、少しマージンを含めて切り出しましょう。
＊ちなみに、フォーカス時のリンク枠の色の設定ですが、できる機種と出来ない機種があります。（出来ないもののほうが多いかも？）
■レイアウトのコツ
携帯サイトは左端から右端までびっちりテキストが書かれているものが多いです。が、左右にマージンを取ってテキストを配置したほうが読みやすく、洗練された印象を与えることが出来ます。
やりかたは簡単です。下記のような＜table＞タグの中にテキストを書くようにします。
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
ここにテキスト
</td>
</tr>
</table>
//width="95%"のパーセンテージを変えることで余白を調整できます。ピクセル指定にしていないのはVGA端末のことを考慮しているためです。
*一部の古い端末はtableタグ非対応ですが、非対応の機種の場合、tableタグ部分を無視するだけなので大きな影響はありません。
- XHTMLで背景を切り替える時は＜div＞に要注意！
こういう背景色を多用したサイト(図左)、最近増えてきましたよね。ただドコモではきれいに見えてもauではこんなカンジ(図右)に見えているサイトがあります。
背景色の切り替えポイントで画像を配置した時に、本来なら出て欲しくない背景線(つまりスキマです。)が格好悪い。うーん、とっても残念。
どうしようもない現象と諦めている方もいらっしゃるのではないでしょうか?
が、これは＜div＞タグの配置の修正で回避できます。ワンソースで3キャリアいけます。
<div style="background-color:#ff0033">
テキスト
<div style="background-color:#000000">
<img src="●●.gif" /><br />
<span style="color:#FFFFFF">テキスト2</span>
</div>
</div> ←一番最初のdivを最後に閉じる
といった感じになります。
わかりますでしょうか？一番最初の＜div＞(上記図で言うと赤い背景部分)の中に次にくる＜div＞(上記図で言うと黒い背景部分)を内包します。そして、切り替え画像は2番目の＜div＞の先頭に配置します。こうすることによって、画像を区切りとした背景色の切り替えがキレイに表現できます。
＊説明、はしょってる部分もあるので、分かり辛ければコメントください。
続きは第二弾で〜。
一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾) - case:MobileDesign! モバイルサイトのデザイン紹介ブログ
早速、新人教育用に見せたいサイトにブックマークしました。
とても分かりやすく画像付きで紹介されています。
ただ、tableを左右paddingはここぞという時のみに使った方が良いでしょう。あまり使いすぎると縦に長くなってしまうので。
2年前 |
固定リンク | 2010年 2月 15日 |
