CSSをご利用の場合。

WAP 2.0及びPCではCSSを利用したデザインも可能です。この場合はCSSでのプロパティシートを活用するため、定義スクリプトでのスタイル定義は一切無効となります。

WAP 2.0向けCSSプロパティシートをPCでも用いる場合。

この場合、PC専用のプロパティシートを以下の手順で作成して下さい。

  1. 冒頭にWAP 2.0向けCSSプロパティシートをインポートします。
  2. 続いて、htmlセレクタまたはbodyセレクタのうち、「background」で始まるプロパティ値を全部「div.B」セレクタの値として定義します。

以下に一例を挙げておきます。

@import "WAP 2,0向けプロパティシートへのURL";
		div.B {
		    background-color: 背景色;
		    }

設定において、PC向けCSSリンクに、こうして作ったPC向けCSSプロパティシートをリンクする<link>要素を定義しておきます。

以下に一例を挙げておきます。

$css='<link rel="stylesheet" type="text/css" href="PC向けプロパティシートのURL" media="screen, projection ">';

モバイル用CSS作成の際の注意点。

WAP 2.0向けCSSは、PC向けのCSSと異なる点があります。以下の点に注意してデザインして下さい。

  • 携帯電話向けCSSでは、属性セレクタ(要素名[属性名]等)、隣接セレクタ(セレクタA+セレクタB)が使えない仕様になっております。
  • 携帯電話向けCSSでは、以下のプロパティが省略されており、使えません。
    • displayプロパティ
    • floatプロパティ
    • clearプロパティ
    • ポジショニング系プロパティ
  • 実装の問題ですが、携帯電話のブラウザには、現在のところ以下のような不具合が見られます。
    • ボーダを上下左右のうち一部だけ指定した場合は上下左右が同じ条件で描写されるか、全く描写されないかのどちらかとなる場合があるようです。従って下だけにボーダを引いてもその様に表示されない可能性があります。
    • リスト系の要素でマージンやパッディングが無視されます。
    • 見出し系の要素で、font-sizeプロパティにフォントサイズ基準(「%」単位…「em」単位は後述の理由から使わないようにして下さい)で値を与えても、大きさは揃いません。
  • PCでも使われるCSSでは、font-sizeプロパティ(fontプロパティの文字サイズ部分も含む)の単位に「em」を使わないで下さい。インターネットエクスプローラで表示がおかしくなる事があります。

予約しているクラス名。

当システムでは、「m----」で始まるクラス名(例：「m----center」)と「B」クラスを予約しております。

  • ハイフンは四個以上連続します。

実際に利用している名前とCSSプロパティ定義が衝突した場合、プロパティがモバイルシステムが書出す<style>要素によって上書きされますので、ご注意下さい。


しらぎくモバイルシステム 運用マニュアル・記事一覧。