## 概要 項目の詳細設定の「拡張HTML」は、[エディタ](/ja/manual/table-editor)に配置した[項目](/ja/manual/table-management-what-is-items)の前後に、任意のHTMLを挿入する機能です。「詳細設定」画面の「拡張HTML」タブで設定します。  |設定項目|説明| |:--|:--| |フィールドの前|入力したHTMLが項目の前に出力されます。| |ラベルの前|入力したHTMLが項目名の前に出力されます。| |ラベルとコントロールの間|入力したHTMLが項目名と入力欄の間に出力されます。| |コントロールの後|入力したHTMLが入力欄の後に出力されます。| |フィールドの後|入力したHTMLが項目の後に出力されます。| ### 「拡張HTML」タブで使われている用語の意味 フィールド、ラベル、コントロールという用語の意味と、これらの前後関係は、以下の模式図のとおりです。 ##### 模式図  この模式図はHTMLのDOMツリーの構造を図示しています。 **実際の表示位置が模式図の通りになるとは限らないことに注意**してください。 ## 設定例 1. 以下の設定例では、[フィールドCSS](/ja/manual/table-management-extended-field-css)機能を利用し、分類Aと分類Bにマージンを設定しています。このようなCSSの調整は、検証用テーブルを別途用意し、実施してください。 1. HTMLの画面構成の仕様上、指定項目に十分な余白がない場合、「拡張HTML」で設定した内容と隣接する項目などとの予想外の重なりが起こり得ます。 ### 「フィールドの前」「フィールドの後」の設定例  ▼フィールドの前 ```html <div style="clear: both; margin-left: 120px;">フィールドの前</div> ``` ▼フィールドの後 ```html <div style="clear: both; margin-left: 120px;">フィールドの後</div> ``` ▼エディタでの表示結果  ### 「ラベルの前」「ラベルとコントロールの間」「コントロールの後」の設定例  ▼ラベルの前 ```html <div style="color:red; padding: 5px;">ラベルの前</div> ``` ▼ラベルとコントロールの間 ```html <div style="clear:both; padding: 5px;">ラベルとコントロールの間</div> ``` ▼コントロールの後 ```html <div style="color:red; padding: 5px;">コントロールの後</div> ``` ▼エディタでの表示結果  ## 前提条件 1. 設定を行うには「サイトの管理権限」が必要です。 1. 「拡張HTML」は「現在の設定」リストに表示される[項目](/ja/manual/table-management-what-is-items)に対して設定可能です。 ## 操作手順 1. 対象のテーブルを開いてください。 1. ナビゲーションメニューの「管理」をクリックしてください。 1. [テーブルの管理](/ja/manual/table-management)をクリックしてください。 1. [エディタ](/ja/manual/table-editor)タブをクリックしてください。 1. [エディタの設定](/ja/manual/table-management-editor-columns)の「現在の設定」リストから任意の項目を選択し、「詳細設定」ボタンをクリックしてください。 1. 「拡張HTML」タブをクリックしてください。 1. 必要な設定を行い、「変更」ボタンをクリックしてください。 1. コマンドボタンエリアの「更新」ボタンをクリックしてください。 ## 関連情報 <div id="ManualList"><ul><li><a href="/ja/manual/table-editor">テーブル機能：レコードのエディタ画面</a><span>2023/04/12 up</span></li></ul></article> <ul><li><a href="/ja/manual/table-management">テーブルの管理</a><span>2025/12/09 up</span></li></ul></article> <ul><li><a href="/ja/manual/table-management-what-is-items">テーブルの管理：項目</a><span>2025/10/24 up</span></li></ul></article> <ul><li><a href="/ja/manual/table-management-editor">テーブルの管理：エディタ</a><span>2026/02/10 up</span></li> <li><a href="/ja/manual/table-management-editor-columns">テーブルの管理：エディタ：エディタの設定</a><span>2026/04/27 up</span></li> <li><a href="/ja/manual/table-management-extended-field-css">テーブルの管理：エディタ：項目の詳細設定：フィールドCSS</a><span>2024/04/09 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />