携帯CSS採用ショッピングカート
新着情報/WEBインベンター

バージョンUP、最新情報、キャンペーン情報などを、月1回ほど配信 - WEBインベンター

新着情報/WEBインベンター 新着情報/WEBインベンター

携帯CSS採用PCtoMobile 、Contents-Cart Ver.13のリリース 2009年05月29日

携帯CSS採用PCtoMobile 、Contents-Cart Ver.13のリリース

PC&携帯連動のショッピングカートPCtoMobile(ピクトモバイル) Ver.13、Contents-Cart Ver.13をリリースいたしましたのでお知らせいたします。このバージョンUPは携帯ショッピングカートのデザインの大幅な改善を実施したものです。 また、Unicode版では携帯電話でもUTF-8で出力するようにしました。

このバージョンUPは下記のショッピングカートで実施いたしました。
PCtoMobile Ver.13.00
PCtoMobile-2 Ver.13.00
PCtoMobile Unicode Ver.13.00
Contents Cart Ver.13.00
Contents Mall Ver.13.00

詳しくは下記をご覧ください。

1.携帯CSSの使用に関する方針
2.文字サイズの指定
3.文字の色の指定
4.背景色付きの見出し
5.spacer.gifを使った罫線
6.spacer.gifを使ったスペース
7.float:leftによる画像の回り込み
8.Unicode版の改良

なお、サンプルはこちらでご覧になれます。携帯電話で実際にご覧になれば絵文字も含めてより一層良さが分かると思います。
http://wb-i.net/spf_ex.htm
http://wb-i.net/template.htm#css


━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.携帯CSSの使用に関する方針
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯電話の進歩に伴い各社ともほとんどの機種(現時点で約90%)でスタイルシートが使えるようになってきました。しかしながら、PCとは異なり携帯のスタイルシートでは3キャリアの仕様の違いにより使用が著しく制限されます。下記の大きな制限があります。

1)ドコモではインラインCSSのみ使える。(リンクの色だけ例外)
2)ドコモではインラインCSSでも使用できるCSSは少ない。

それで、ドコモに合わせたデザインが必要になります。もっとも、携帯で必要なデザインはそれほど多くはありませんから、これでもまずまずのデザインが実現できます。それで、下記の2〜7をデザインに取り入れました。

なお、3キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよびSoftBankでは、XHTMLが使用できない機種がまだ約15%ほどあります。プログラムではこれらを判別して適切なXHTML又はHTMLを出力しています。もちろん、XHTMLに対応していないかなり古い機種ではCSSは無視されますから、デザインはCSSなしのデザインとなります。しかし、携帯でインターネットをする人はそんなに古い機種を使ってはいないことでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
2.文字サイズの指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━
多くの携帯サイトで文字サイズを小さくする傾向にあります。それで、各社の携帯で大きさを統一することが難しい状況ですが、機種ごとに文字サイズを指定できるようにしました。

システム設定【20】携帯の基本設定の、「文字を1段階小さくする」のところで機種ごとに指定できます。
また、ここで、1を指定すると、下記のように設定されます。

x-small/xx-small/x-small/12px   (i-mode/AU/SoftBank/other(3キャリア以外)の順)

━━━━━━━━━━━━━━━━━━━━━━━━━━━
3.文字の色の指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━
文字の色、リンク関係の色をWEB上から指定できるようにしました。
しかし、リンク関係の色指定は3キャリアで表示が異なっており同じ表示を実現するのは簡単ではありません。それで、背景色を黒にしたりする止むを得ない場合を除いては無指定にするほうが望ましいでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
4.背景色付きの見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━
タイトルや見出しに背景を付けるだけでデザインや分かりやすさは飛躍的に向上します。 この点で3キャリア共に同じ表示を実現できるように努力してみました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
5.spacer.gifを使った罫線
━━━━━━━━━━━━━━━━━━━━━━━━━━━
罫線は普通タグ<hr>を使いますが、3キャリアで表示を一致させることはむずかしく、上下のマージンを0にすることはできないようです。それで、最近多く使われている下記の方法で罫線を表示しました。これにより柔軟な罫線表示が可能になります。

マージン0の高さ1xpの罫線:
<div style='background:gray;'><img src="./p_image/spacer.gif" width='1'
height='1'></div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━
6.spacer.gifを使ったスペース
━━━━━━━━━━━━━━━━━━━━━━━━━━━
限られた携帯画面では行間を適切に取ることが重要になります。それで、この場合も下記のような方法でスペースを確保しました。これにより改行ではできない行間の自由な設定ができます。

高さ5pxの行間5pxのスペースの場合:
<div><img src="./p_image/spacer.gif" width='1' height='5'></div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━
7.float:leftによる画像の回り込み
━━━━━━━━━━━━━━━━━━━━━━━━━━━
商品のサムネイル画像の回り込みは画面領域の節約と見やすいデザインのためにとても有効で、3キャリアともfloat:leftが使えるのでそれを利用しました。floatの解除は次のように行います。

<img src="" border='0' align='left' style='float:left;' />
・・・・・
<div style='clear:both;'></div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━
8.Unicode版の改良
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯の場合は、DoCoMo、SoftBankの最近の機種ではutf-8が使えます。しかし、AUではShift_JISのみが使える仕様となっています。それで、PCtoMobileのUnicode版Ver.13.00では、下記のように文字コードを機種ごとに振分けて出力します。

1)DoCoMo、SoftBankの最近の機種:UTF-8
2)AU、及びDoCoMo、SoftBankの旧機種:Shift_JIS
3)3キャリア以外、及びPCからのアクセス:UTF-8

という訳で、DoCoMo、SoftBank、AUの3キャリアに対応し、かつ、Unicode対応の海外の携帯電話の多くに対応しているはずです。


なお、バージョンUPに際しては下記の手順を参考にしてください。
(新バージョンのカートをダウンロードするために再注文する必要はありません。*****13.LZHでダウンロードできます。)
http://wb-i.net/advice.htm#up


皆様のご意見を取り入れながらさらに優れたシステムを開発して行きたいと思います。ご指導の程、よろしくお願いいたします。


Copyright (C) 2009  WEBインベンター All rights reserved.