携帯対応HTML/XHTMLタグその他
font
フォント
2009/11/23
<font>～</font>
[iモード対応HTML Ver2.0]
[au XHTML]
[SoftBank HTML] [SoftBank XHTML]
font要素は、文字の色や大きさど文字のスタイルを定義するインライン要素です。
属性
docomo
| 属性 | iモード対応 HTMLバージョン |
iモード対応 XHTMLバージョン |
説明 |
|---|---|---|---|
| color="%Color" | 2.0 | - | 文字の色を指定。デフォルトは黒。 ※カラー対応機種のみ。 |
| size="{1～7}" | 5.0 | - | 文字サイズを数値で指定。 ※FOMA（i-HTML5.0）以降のみ。「1～2」はフォントサイズ小、「3」はフォントサイズ中（デフォルト）、「4～7」はフォントサイズ大。 |
| size="+1" size="-1" |
5.0 | - | 文字サイズを相対指定。 ※FOMA（i-HTML5.0）以降のみ。 |
au
| 属性 | XHTML | 説明 |
|---|---|---|
| WAP2.0 | ||
| color="%Color" | ○ | 文字の色を指定。デフォルトは黒。 |
| size="{1～7}" | ○ | 文字サイズを数値で指定。「1～4」はフォントサイズ小。それ以降は徐々にフォントサイズが大きくなる。 |
SoftBank
| 属性 | HTML | XHTML | 説明 | |||
|---|---|---|---|---|---|---|
| SoftBank HTML C2型 |
SoftBank HTML C3型 |
SoftBank HTML P型 |
SoftBank HTML 3GC型 |
SoftBank XHTML 3GC型 |
||
| color="%Color" | ○ | ○ | ○ | △ | ○ | 文字の色を指定。デフォルトは黒。 |
注意事項
- SoftBank
-
- font要素内にimg/br要素を記述することはできません。
- font要素にid/class/lang/title/style/size/face属性を指定することはできません。
サンプル
<font color="#000000" size="1">size=1</font><br> <font color="#333333" size="2">size=2</font><br> <font color="#363636" size="3">size=3</font><br> <font color="#666666" size="4">size=4</font><br> <font color="#696969" size="5">size=5</font><br> <font color="#999999" size="6">size=6</font><br> <font color="#c9c9c9" size="7">size=7</font><br><br> <font color="#ff6699" size="+1">size+=1</font><br> <font color="#ff6699">size+=0</font><br> <font color="#ff6699" size="-1">size-=1</font><br>
u
テキストに下線を引く
2009/11/23
<u>～</u>
[au XHTML]
[SoftBank HTML] [SoftBank XHTML]
u要素は、テキストに下線（アンダーライン）を引いて表示するインライン要素です。
<u>～</u>で囲んだ部分のテキストに下線が表示されます。
XHTMLでは、spanまたdiv要素に「text-decoration:underline;」をスタイルシートで指定しましょう。
注意事項
- SoftBank
-
- [HTML]u要素内にimg/br要素記述不可。
サンプル
■HTML鐓r緒V鐔緒盾<u>鐓r緒V鐔緒盾</u>鐓r緒V鐔緒盾■XHTML
鐓r緒V鐔緒盾<span style="text-decoration:underline;">鐓r緒V鐔緒盾</span>鐓r緒V鐔緒盾
blink
テキストを点滅させる
2009/11/23
<blink>～</blink>
[iモード対応HTML Ver2.0]
[au XHTML]
[SoftBank HTML] [SoftBank XHTML]
blink要素は、タグで囲まれた部分のテキストを点滅表示するインライン要素です。
画像などテキスト以外の文字列は点滅しません。
XHTMLでは、spanまたdiv要素に「text-decoration:blink;」をスタイルシートで指定しましょう。
※PC向けサイトではblink要素はご法度ですが、携帯サイトではテキストを目立たせるのに使用するメジャ―なタグです。
サンプル
■HTML<blink>ﾃｷｽﾄが点滅します!</blink>
<span style="text-decoration:blink;">ﾃｷｽﾄが点滅します!</span><br> <div style="text-decoration:blink;">ﾃｷｽﾄが点滅します!</div>
marquee
テキストを横に流す
2009/11/23
<marquee>～</marquee>
[iモード対応HTML Ver2.0]
[au XHTML]
[SoftBank HTML] [SoftBank XHTML]
marquee要素は、mタグで囲まれた部分をスクロール表示するインライン要素です。
XHTMLでは、spanまたdiv要素に「display:*;」をスタイルシートで指定します。
※PC向けサイトではmarquee要素は過去の産物ですが、携帯サイトでは長いテキストを1行でスクロールさせることができるため、テキストをRSSリーダー風に流して目立たせるのに使用するメジャ―なタグです。
属性
docomo
| 属性 | iモード対応 HTMLバージョン |
iモード対応 XHTMLバージョン |
説明 |
|---|---|---|---|
| behavior="%Behavior" | 2.0 | - | スクロール画面終端での振る舞いを指定。デフォルトは「scroll」。 |
| direction="%Direction" | 2.0 | - | スクロール方向を指定。デフォルトは「left」。 |
| loop="{1～16}" | 2.0 | - | スクロールを繰り返す回数を指定。デフォルトは無限ループ（16回）。 |
| width= | 2.0 | - | 画面幅固定。-※ユーザー変更不可。 |
| height= | 2.0 | - | 1行固定-※ユーザー変更不可。 |
| scrollamount= | 2.0 | - | 高さをピクセル単位で指定。 |
| scrolldelay= | 2.0 | - | 高さをピクセル単位で指定。 |
| bgcolor="%Color" | 5.0 | - | 背景色を指定。 |
| style="display: -wap-marquee; |
- | 1.0 | テキストをスクロール。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-style:scroll; |
- | 1.0 | 一方方向へのスクロールを繰り返す（デフォルトと同じ） 。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-style:slide; |
- | 1.0 | スクロールを1回したら停止。。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-style:alternate; |
- | 1.0 | スクロール方向（左→右、右→左）を交互にスクロール。。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-dir:rtl; |
- | 1.0 | 左→右へスクロール。。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-dir:ltr; |
- | 1.0 | 右→左へスクロール。。 ※span要素またはdiv要素のみ指定可能。 |
| style="display: -wap-marquee-loop:{1～16}; |
- | 1.0 | ループ回数を指定。デフォルトは無限ループ（16回）。 ※span要素またはdiv要素のみ指定可能。 |
au
| 属性 | XHTML | 説明 |
|---|---|---|
| WAP2.0 | ||
| direction="%Direction" | ○ | スクロール方向を指定。デフォルトは「left」。 |
| behavior="%Behavior" | ○ | スクロール画面終端での振る舞いを指定。デフォルトは「scroll」。 |
| scrolldelay="%Number" | ○ | スクロール移動間隔をミリ秒で指定。0より大きい値を指定。 |
| scrollamount="%Number" | ○ | 一度にスクロールする幅をピクセル単位で指定。0より大きい値を指定。 |
| loop="{%Number|inifinite}" | ○ | スクロールを繰り返す回数を指定。デフォルトは0で無限ループ（inifiniteと等価）。 |
| bgcolor="%Color" | ○ | 背景色を指定(デフォルトは白）。 |
SoftBank
| 属性 | HTML | XHTML | 説明 | ||||
|---|---|---|---|---|---|---|---|
| SoftBank HTML C2型 |
SoftBank HTML C3型 |
SoftBank HTML P型 |
SoftBank HTML 3GC型 |
SoftBank XHTML 3GC1型 |
SoftBank XHTML 3GC2型 |
||
| direction="%Direction" | ○ | ○ | ○ | ○ | ○ | ○ | スクロール方向を指定。デフォルトは「left」。 |
| behavior="%Behavior" | × | × | ○ | ○ | ○ | ○ | スクロール画面終端での振る舞いを指定。デフォルトは「scroll」。 |
| scrolldelay="%Number" | × | × | ○ | △ | △ | △ | スクロール移動間隔をミリ秒で指定。0より大きい値を指定。 |
| scrollamount="%Number" | × | × | ○ | △ | △ | △ | 一度にスクロールする幅をピクセル単位で指定。0より大きい値を指定。 |
| loop="{%Number|inifinite}" | × | × | ○ | ○ | ○ | ○ | スクロールを繰り返す回数を指定。デフォルトは0で無限ループ（inifiniteと等価）。 |
| bgcolor="%Color" | × | × | △*1 | △ | △ | △ | 背景色を指定(デフォルトは白）。 |
*1：P4(2)型端末でのみ
サンプル
HTML
<marquee behavior="scroll">ﾃｷｽﾄがｽｸﾛｰﾙします!</marquee> <marquee behavior="slide">ﾃｷｽﾄがｽｸﾛｰﾙします!</marquee> <marquee behavior="altemate">ﾃｷｽﾄがｽｸﾛｰﾙします!</marquee> <marquee direction="left">ﾃｷｽﾄが右から左へｽｸﾛｰﾙします!</marquee> <marquee direction="right">ﾃｷｽﾄが左から右へｽｸﾛｰﾙします!</marquee> <marquee loop="2">ﾃｷｽﾄが2回ｽｸﾛｰﾙします!</marquee> <marquee bgcolor="yellow">ﾃｷｽﾄがｽｸﾛｰﾙします!</marquee>
XHTML
[iモード対応HTML Ver1.0]▼デフォルト <span style="display:-wap-marquee;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼一方方向へのスクロールを繰り返す（デフォルトと同じ） <span style="display:-wap-marquee;display:-wap-marquee-style:scroll;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-style:scroll;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼スクロールを1回したら停止 <span style="display:-wap-marquee;display:-wap-marquee-style:slide;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-style:slide;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼スクロール方向（左→右、右→左）を交互にスクロール <span style="display:-wap-marquee;display:-wap-marquee-style:alternate;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-style:alternate;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼右→左へスクロール <span style="display:-wap-marquee;display:-wap-marquee-dir:rtl;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-dir:rtl;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼左→右へスクロール <span style="display:-wap-marquee;display:-wap-marquee-dir:ltr;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-dir:ltr;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div> ▼ループ回数指定（デフォルトは「1」、無限ループの場合は「infinite」） <span style="display:-wap-marquee;display:-wap-marquee-loop:2;">ﾃｷｽﾄがｽｸﾛｰﾙします!</span> <div style="display:-wap-marquee;display:-wap-marquee-loop:2;">ﾃｷｽﾄがｽｸﾛｰﾙします!</div>
center
要素の中央寄せ
2009/11/23
<center>～</center>
[iモード対応HTML Ver1.0]
[au XHTML]
[SoftBank HTML] [SoftBank XHTML]
center要素は、要素をセンタリング（左右中央揃え）して表示するブロック要素です。 <center>～</center>内の要素は、ブロック要素もインライン要素もすべてセンタリングされて表示されます。
ただし、直接style="text-align:left;"のように左寄せなどを指定している要素は、center要素より要素に直接指定したstyle属性の定義が優先されますので、center要素内にあってもセンタリングはされません。
注意事項
- SoftBank
-
- center要素内に、ul/ol/pre/dl/div/center要素を記述することはできません。
- div要素のalign属性にcenterを指定した場合と等価。
サンプル
ﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄ<br><br> <center> <img src="dog.gif" width="76" height="76" alt="dog"><br> ﾃｷｽﾄも画像もｾﾝﾀﾘﾝｸﾞ </center><br> ﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄ
