外出しCSSを利用する

2009年12月現在、ドコモ端末の多くは外出しCSSに対応していません。
このため、XHTML文章中にインライン(style属性等)にてCSSを記述する必要がありますが
mobyletでは外出しCSSファイルをインラインに展開する、強力なツールを利用することが出来ます。
#Ver 1.0.2からベータ版としてリリース。

CSS Expand機能利用設定

CSS Expand機能(外出しCSS展開機能)の設定方法

この機能は外出しCSSファイルをドコモ端末に対してのみ、インライン化する機能です。
au、SoftBank端末に対しては外出しファイルのまま、linkタグとして出力します。
まず、この機能を利用するための条件は以下の通りです。

  • XHTMLモードでのみ利用可能(ドコモ端末はXHTMLの場合のみCSSを認識出来ます)
  • mobylet.xmlにCSS Expand機能の利用設定を行う
  • <m:css />タグを利用する(JSP以外でも利用可能)

mobylet.xmlの設定方法はこちらをご覧ください。

CSS Expand機能の使い方

CSS Expand機能の使い方

通常、外出しCSSファイルを配置する場合と同様にheadタグ内で、以下のように指定します。

<m:css src="/mobylet/top.css" />

ローカルパスでのアクセス

Seasar2のHotDeploy利用時はローカルパスを指定する必要があります

Seasar2のHotDeploy時は同じインスタンス上の外出しCSSファイルをURL指定で読み込むことが出来ないため、
ローカルパスに変換する必要があります。
この場合は、mobylet.xmlを配置した場所と同一階層に
org.mobylet.view.config.CSSConfig.propertiesというファイルを生成し、
その中に以下のプロパティを記述します。

#CSSのパスを<m:css src="/css/top.css" />と指定して
#実体が「/var/tomcat/webapps/mobylet/webapp/css/top.css」にある場合
css.local.base.path=/var/tomcat/webapps/mobylet/webapp

この設定はSeasar2及びHotDeploy以外の場合でもご利用頂けます。

使えるCSSの記述方法

CSS Expand機能が処理可能なCSSの記述方法

単一タグ指定

body {
  background-color: #FFDDDD;
}

複数タグ指定(グループ化)

body, div {
  background-color: #FFDDDD;
}

ID指定(タグとのセットも可能)

#bgRed {
  background-color: #FFDDDD;
}

CLASS指定(タグとのセットも可能)

.bgRed, div.bgRed {
  background-color: #FFDDDD;
}

子孫セレクタ

body div {
  /* bodyタグの配下のdivタグ全て */
  background-color: #FFDDDD;
}

子供セレクタ

body > div {
  /* bodyタグの直接の配下であるdivタグ全て */
  background-color: #FFDDDD;
}

全称セレクタ

* {
  /* 全てのタグにマッチ */
  background-color: #FFDDDD;
}

first-child疑似クラス

body > div:first-child {
  /* bodyタグの直接の配下である最初のdivタグのみ */
  background-color: #FFDDDD;
}

link, visited, active, hover疑似クラス(aタグのみ)

a:link {
  background-color: #FFDDDD;
}
ページのTOPへ戻る