メインコンテンツまでスキップ

リッチテキスト HTML の仕様

Next Design のリッチテキストフィールドには複数の書式フォーマットの値を設定でき、 UI に表示する書式付きのデータは HTML 形式で格納されます。
しかしながら、 HTML の仕様は多様かつ複雑であるため、リッチテキストフィールドで扱う HTML には一定の制限があります。

リッチテキスト関連の API で HTML 形式の値を正しく取得・設定するには、次に示す仕様に準拠した HTML を用いてください。

参照

HTML の全体構造

以下がリッチテキスト HTML の全体構造です。 Next Design のリッチテキストで扱える要素や属性の関係性を示します。

全体構造図

以下からは、各要素が持つ属性の詳細について説明します。

リッチテキスト HTML

リッチテキスト HTML は <html> タグと対応しています。

属性名キー多重度値域備考
ヘッダ-0..1ヘッダヘッダの中身は空とします。
スタイルを指定したい場合は、個別の HTML 要素に対して指定してください。
ボディ-1ボディ-

ボディ

ボディは <body> タグと対応しています。

属性名キー多重度値域
ルート要素-1..*段落
リスト
テーブル

段落

段落は <p> タグと対応しています。

属性名キー多重度値域備考
段落要素-1..*テキストコンテナ
画像
-
マージンmargin0..1px単位4つすべてを指定する必要があります。
上マージンmargin-top0..1px単位-
左マージンmargin-left0..1px単位-
下マージンmargin-bottom0..1px単位-
右マージンmargin-right0..1px単位-
行の高さline-height0..1単位なしの数値-
水平方向の配置text-align0..1left
center
right
justify
-
字下げの幅text-indent0..1px単位-

テキストコンテナ

テキストコンテナは <span> タグと対応しています。

属性名キー多重度値域備考
テキストコンテナ要素-0..*テキスト装飾
改行
リンク
-
テキスト-0..1文字列-
フォントfont-family0..1単一のフォントファミリーインストール済みフォントの英語名のみ有効です。
フォントサイズfont-size0..1px単位-
テキスト装飾(打消し線)text-decoration0..1line-through-
背景色background-color0..1RGB16進表記色
色キーワード1
-
文字色color0..1RGB16進表記色
色キーワード1
-

テキスト装飾

テキスト装飾は次のいずれかのタグと対応しています。

  • 上付き文字:<sup>
  • 下付き文字:<sub>
  • 下線:<u>
  • 斜体:<i>
  • 太字:<b>
属性名キー多重度値域
テキスト-1文字列

画像

画像は <img> タグと対応しています。

属性名キー多重度値域備考
ソースsrc1URL
ローカル絶対パス
base64
-
width0..1px単位画像固有の幅です。
高さheight0..1px単位画像固有の高さです。

base64

base64は data:image/{画像形式};base64,{Base64文字列} の書式でソースを指定します。

属性名キー多重度値域
画像形式-1png
jpeg
bmp

リスト

リストは次のいずれかのタグと対応しています。

  • 順序なしリスト:<ul>
  • 順序付きリスト:<ol>
属性名キー多重度値域
リスト項目li1..*リスト項目
マーカーlist-style-type0..1disc
circle
square
decimal
lower-latin
lower-roman

リスト項目

リスト項目は <li> タグと対応しています。

属性名キー多重度値域
リスト-0..*リスト
テキストコンテナ-1..*テキストコンテナ
行の高さline-height0..1単位なしの数値

テーブル

テーブルは <table><tbody> タグと対応しています。

属性名キー多重度値域備考
テーブル行-1..*テーブル行-
上側の境界線border-top0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
左側の境界線border-left0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
下側の境界線border-bottom0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
右側の境界線border-right0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
width0..1px単位テーブルセルに幅が設定されている場合は、その設定値を優先して適用します。

テーブル行

テーブル行は <tr> タグと対応しています。

属性名キー多重度値域
テーブルセル-1..*テーブルセル
高さheight0..1px単位

テーブルセル

テーブルセルは <td> タグと対応しています。

属性名キー多重度値域備考
ブロック要素-0..*段落
リスト
-
列範囲colspan0..1整数水平方向にセルを結合する数です。
行範囲rowspan0..1整数垂直方向にセルを結合する数です。
上側の境界線border-top0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
左側の境界線border-left0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
下側の境界線border-bottom0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
右側の境界線border-right0..1幅:px単位
形状:none, dotted, dashed, solid, double
色:RGB16進表記, 色キーワード1
3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。
パディングpadding0..1px単位4つすべてを指定する必要があります。
背景色background-color0..1RGB16進表記色
色キーワード1
-
垂直方向の配置vertical-align0..1top
middle
bottom
-
width0..1px単位同じ列の複数のセルに幅を設定した場合、最も先頭行に近いセルの設定値が適用されます。

リンク

リンクは <a> タグと対応しています。

属性名キー多重度値域
テキスト-1文字列
URLhref1文字列

Footnotes

  1. 設定したい色を "red" などのキーワードで指定できます。 CSS Colors Level 3 まで対応しています。 2 3 4 5 6 7 8 9 10 11