リッチテキスト HTML の仕様
Next Design のリッチテキストフィールドには複数の書式フォーマットの値を設定でき、 UI に表示する書式付きのデータは HTML 形式で格納されます。
しかしながら、 HTML の仕様は多様かつ複雑であるため、リッチテキストフィールドで扱う HTML には一定の制限があります。
リッチテキスト関連の API で HTML 形式の値を正しく取得・設定するには、次に示す仕様に準拠した HTML を用いてください。
参照
- リッチテキスト関連の API については、 設計情報 > モデル > リッチテキストフィールドを操作する を参照してください。
HTML の全体構造
以下がリッチテキスト HTML の全体構造です。 Next Design のリッチテキストで扱える要素や属性の関係性を示します。
以下からは、各要素が持つ属性の詳細について説明します。
リッチテキスト HTML
リッチテキスト HTML は <html> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
ヘッダ | - | 0..1 | ヘッダ | ヘッダの中身は空とします。 スタイルを指定したい場合は、個別の HTML 要素に対して指定してください。 |
ボディ | - | 1 | ボディ | - |
ボディ
ボディは <body> タグと対応しています。
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
ルート要素 | - | 1..* | 段落 リスト テーブル |
段落
段落は <p> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
段落要素 | - | 1..* | テキストコンテナ 画像 | - |
マージン | margin | 0..1 | px単位 | 4つすべてを指定する必要があります。 |
上マージン | margin-top | 0..1 | px単位 | - |
左マージン | margin-left | 0..1 | px単位 | - |
下マージン | margin-bottom | 0..1 | px単位 | - |
右マージン | margin-right | 0..1 | px単位 | - |
行の高さ | line-height | 0..1 | 単位なしの数値 | - |
水平方向の配置 | text-align | 0..1 | left center right justify | - |
字下げの幅 | text-indent | 0..1 | px単位 | - |
テキストコンテナ
テキストコンテナは <span> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
テキストコンテナ要素 | - | 0..* | テキスト装飾 改行 リンク | - |
テキスト | - | 0..1 | 文字列 | - |
フォント | font-family | 0..1 | 単一のフォントファミリー | インストール済みフォントの英語名のみ有効です。 |
フォントサイズ | font-size | 0..1 | px単位 | - |
テキスト装飾(打消し線) | text-decoration | 0..1 | line-through | - |
背景色 | background-color | 0..1 | RGB16進表記色 色キーワード1 | - |
文字色 | color | 0..1 | RGB16進表記色 色キーワード1 | - |
テキスト 装飾
テキスト装飾は次のいずれかのタグと対応しています。
- 上付き文字:<sup>
- 下付き文字:<sub>
- 下線:<u>
- 斜体:<i>
- 太字:<b>
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
テキスト | - | 1 | 文字列 |
画像
画像は <img> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
ソース | src | 1 | URL ローカル絶対パス base64 | - |
幅 | width | 0..1 | px単位 | 画像固有の幅です。 |
高さ | height | 0..1 | px単位 | 画像固有の高さです。 |
base64
base64は data:image/{画像形式};base64,{Base64文字列}
の書式でソースを指定します。
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
画像形式 | - | 1 | png jpeg bmp |
リスト
リストは次のいずれかのタグと対応しています。
- 順序なしリスト:<ul>
- 順序付きリスト:<ol>
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
リスト項目 | li | 1..* | リスト項目 |
マーカー | list-style-type | 0..1 | disc circle square decimal lower-latin lower-roman |
リスト項目
リスト項目は <li> タグと対応しています。
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
リスト | - | 0..* | リスト |
テキストコンテナ | - | 1..* | テキストコンテナ |
行の高さ | line-height | 0..1 | 単位なしの数値 |
テーブル
テーブルは <table> と <tbody> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
テーブル行 | - | 1..* | テーブル行 | - |
上側の境界線 | border-top | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
左側の境界線 | border-left | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
下側の境界線 | border-bottom | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
右側の境界線 | border-right | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
幅 | width | 0..1 | px単位 | テーブルセルに幅が設定されている場合は、その設定値を優先して適用します。 |
テーブル行
テーブル行は <tr> タグと対応しています。
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
テーブルセル | - | 1..* | テーブルセル |
高さ | height | 0..1 | px単位 |
テーブルセル
テーブルセルは <td> タグと対応しています。
属性名 | キー | 多重度 | 値域 | 備考 |
---|---|---|---|---|
ブロック要素 | - | 0..* | 段落 リスト | - |
列範囲 | colspan | 0..1 | 整数 | 水平方向にセルを結合する数です。 |
行範囲 | rowspan | 0..1 | 整数 | 垂直方向にセルを結合する数です。 |
上側の境界線 | border-top | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
左側の境界線 | border-left | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
下側の境界線 | border-bottom | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
右側の境界線 | border-right | 0..1 | 幅:px単位 形状:none, dotted, dashed, solid, double 色:RGB16進表記, 色キーワード1 | 3つの値は任意の順序で指定可能ですが、全ての値を設定する必要があります。 |
パディング | padding | 0..1 | px単位 | 4つすべてを指定する必要があります。 |
背景色 | background-color | 0..1 | RGB16進表記色 色キーワード1 | - |
垂直方向の配置 | vertical-align | 0..1 | top middle bottom | - |
幅 | width | 0..1 | px単位 | 同じ列の複数のセルに幅を設定した場合、最も先頭行に近いセルの設定値が適用されます。 |
リンク
リンクは <a> タグと対応しています。
属性名 | キー | 多重度 | 値域 |
---|---|---|---|
テキスト | - | 1 | 文字列 |
URL | href | 1 | 文字列 |