フォームの表示密度の変更

Lightning Experience では、表示密度の設定によって、コンテンツがどれほど密に表示されるかと、項目の表示ラベルの位置が決定されます。組織で使用する表示密度は [設定] で制御し、各ユーザはプロファイルメニューで好きな表示密度を選べます。

組織の [カンファタブル] 設定では、表示ラベルが項目の上に配置され、ページ要素間のスペースが広くなります。一方、[コンパクト] は、表示ラベルが項目と同じ行に表示され、行間のスペースが狭くなっている密集したビューです。また、[コージー] は、[コンパクト] と似ていますが、行間のスペースが広くなっています。

好みの表示密度の設定に合わせてフォームを設計するか、またはフォーム密度によって表示密度の設定を上書きできます。表示密度を上書きすることで、表示ラベルの位置をより詳細に制御できますが、スペースは制御できません。また、フォームの各項目で表示ラベルの位置を個別に変更するためのバリエーションも設定できます。

デフォルトの場合、または density="auto" を設定した場合、lightning-record-edit-form、lightning-record-view-form、および lightning-record-form は、組織の表示密度に適応されます。

組織の表示密度を上書きするには、density="compact" または density="comfy" を指定します。cozy 値は、density 属性ではサポートされていません。組織の表示密度が [コージー] に設定されている場合、表示ラベルと項目はデフォルトで同じ行に表示されます。

組織の表示密度の設定と、lightning-record-edit-form、lightning-record-view-form、および lightning-record-form でのフォーム密度との関係を下表に示します。

フォーム密度が compact である場合、列が 1 つだけのフォームを広い領域に表示すると、表示ラベルと項目が離れすぎてしまうことがあります。フォームで [コンパクト] 密度を使用している場合に表示ラベルと項目の間のスペースを狭くするには、lightning-input-field または lightning-output-field で slds-form-element_1-col クラスを使用します。

特定の項目のみで表示ラベルと項目の配置をフォームの設定とは変えたい場合には、lightning-input-field に対してバリエーションを設定できます。バリエーションによって、その項目の表示密度を上書きできます。

lightning-input-field では、バリエーションとして standard (デフォルト)、label-hidden、label-inline、および label-stacked がサポートされています。

次の例は、2 つの入力項目では表示ラベルを同じ行に表示し、他の項目では [カンファタブル] フォーム密度で項目の上に表示しています。

lightning-output-field では、バリエーションとして standard (デフォルト) と label-hidden がサポートされています。

次の例では、フォーム密度は comfy で、出力項目値を表示ラベルなしで表示しています。非表示の表示ラベルは、支援技術で利用できます。

また、表示ラベルバリエーションが label-inline の場合に表示ラベルと項目の間のスペースを狭くするには、lightning-input-field で slds-form-element_1-col クラスを使用します。

システム管理者は、[密度設定] ページで組織のデフォルト表示密度を設定できます。ユーザはいつでも各自の表示密度を選択できます。ユーザの表示密度設定を上書きすることはできません。組織のデフォルト表示設定は、Salesforce のエディションによって異なります。密度の変更は、Salesforce Classic、Experience Cloud サイト、または Salesforce モバイルアプリケーションには適用されません。詳細は、「ユーザインターフェースの設定」を参照してください。

関連トピック

• コンポーネントの参照: lightning-record-edit-form
• コンポーネントの参照: lightning-record-view-form