CSSリファレンス

サポートするプロパティ

Durianで動作するアプリケーションはCSS機能を利用することができます。

この機能はW3Cによって勧告が行われてるCSS2（Cascading Style Sheets, Level2）の簡易版の機能です。

正式な仕様は、W3CのCSS2仕様（http://www.w3.org/TR/REC-CSS2）などを参照してください。

定義できるスタイル	対応機種
color:文字の色づけ	DoCoMo端末カラー対応機種、SoftBank端末カラー対応機種、WILLCOM端末全機種、PC
background-color:背景の色づけ	DoCoMo端末カラー対応機種、SoftBank端末カラー対応機種、WILLCOM端末全機種、PC
font-size:フォントサイズの設定	CHTML5.0以上対応FOMA、SoftBakの一部端末、WAP2、WILLCOM端末全機種、PC
text-align: center 文字の中央寄せ	DoCoMo端末全機種、SoftBank端末全機種、au端末全機種、WILLCOM端末全機種、PC
text-align: right 文字の右寄せ	DoCoMo端末全機種、SoftBank端末全機種、au端末全機種、WILLCOM端末全機種、PC
text-align: left 文字の左寄せ	DoCoMo端末全機種、SoftBank端末全機種、au端末全機種、WILLCOM端末全機種、PC
text-decoration: blink 文字の点滅	DoCoMo端末全機種、SoftBank端末全機種、WILLCOM端末全機種、PC
text-decoration: underline 文字の下線付け	SoftBank端末全機種、WILLCOM端末全機種、PC
border:表の枠線表示	DoCoMo端末全機種、SoftBank端末全機種、au端末全機種、WILLCOM端末全機種、PC
border-top:水平線の表示	DoCoMo端末全機種、SoftBank端末全機種、WILLCOM端末全機種
border-bottom:水平線の表示	DoCoMo端末全機種、SoftBank端末全機種、WILLCOM端末全機種、PC
border-top: 水平線の色づけ	SoftBank端末全機種、WILLCOM端末全機種、PC

文字の色づけ

文字に色づけを行うには、色づけを行いたいテキストを囲う要素に対してCSSファイル中で以下のように記述します。

h1 {
	color: red;
}

前景色属性(color)で色づけを行いますが、色の値は、キーワードで指定します。RGB形式では指定できません。

背景の色づけ

背景に色づけを行うには、ページのbody要素に対してCSSファイル中で以下のように記述します。bodyにのみ指定可能です。

body {
	background-color: red;
}

背景色属性（background-color）で色づけを行いますが、色の値は、キーワードで指定します。RGB形式では指定できません。

フォントサイズの設定

フォントサイズを変更したいテキストを囲む要素に対してCSSファイル中で以下のように記述します。

h1 {
	font-size: x-large;
}

フォントサイズは、xx-small, x-small, small, medium, large, x-large, xx-largeのいずれかを指定します。

これ以外の長さ指定には対応していません。

文字の中央寄せ

文字を中央寄せを行うには、中央寄せを行いたいテキストを囲うdiv要素に対してCSSファイル中で以下のように記述します。

Durianでは文字を中央寄せする場合、div、p、h1-h6要素で囲まれたテキストしか中央寄せの指定ができないことに注意してください。

ただし、class属性やid属性の値を変えることで、中央寄せさせたいdiv要素とそうでないdiv要素を分類することができるので、この機能を活用してください。

text-align属性の値にcenterと指定してください。

div {
	text-align: center;
}

この中央寄せ機能はdivタグの中に含まれる子要素も中央寄せすることが可能ですが、au端末で複数行中央寄せする場合は一行単位でdiv要素で囲んで指定してください。

文字の点滅

文字の点滅に対応した端末では、特定の文字を文字を点滅させることができます。

まず、点滅させたいテキストを囲む要素に対してCSSファイル中で以下のように記述します。

h1 {
	text-decoration: blink;
}

文字の下線付け

文字の下線付けに対応した端末では、特定の文字に下線をつけて表示ことができます。

まず、下線をつけたいテキストを囲む要素に対してCSSファイル中で以下のように記述します。

h1 {
	text-decoration: underline;
}

表の枠線表示

XHTMLBasicで表を記述する場合、デフォルトでは表の枠線は表示されません。表の枠線を表示させる場合はCSSで以下のような記述をします。

table {
	border: outset 1pt;
}

この指定によってXHTMLBasic中の表の枠線が表示されるようになります。(DoCoMo/au/WILLCOM端末は仕切り線 SoftBank端末は枠線)

この他にも表の表示をサポートしている端末もあります。(次表参照)

DoCoMo対応端末	au対応端末	SoftBank対応端末
テーブル対応機以外は仕切り線と上下区切り線のみ。テーブル対応機はテーブル表示。	仕切り線と上下区切り線のみ。	2.0は仕切り線と枠線。3.0はテーブル表示。

CSS2では表の枠線について細かい規定を設けており、セル単位の枠線指定まで可能ですが、Durianでは上記のような簡単な指定で枠線を表示します。

詳細についてはW3CのCSS2のサイトを参照してください。(http://www.w3.org/TR/REC-CSS2/tables.html#borders)

水平線の表示

XHMLBasicでページを記述する場合、水平線を表示させることができませんが、CSSの機能を利用して擬似的に水平線を表示させることができます。

水平線を表示させることができるのは空タグでないdivタグのみです。

この場合に以下の指定をCSSで行えば、divタグ上部に水平線を表示できます。

div {
	border-top: solid 1pt;
}

値の詳細についてはW3CのCSS2のサイトを参照してください。(http://www.w3.org/TR/REC-CSS2/box.html#border-properties)

水平線の色づけ

水平線の色づけに対応した端末では、水平線に色をつけて表示ことができます。

水平線指定したCSSの記述を以下のように変更してください。

div {
	border-top: solid 1pt red;
}

この指定によってXHTMLBasic中のdiv要素囲いの上側に水平線が表示され、それが赤色で表示されます。

その他水平線

border-style、border-width、border-top-style、border-bottom-color、border-bottom-widthにも対応しています。