アダプティブフォームのスタイル構成 styling-constructs-for-adaptive-forms

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

前提条件 prerequisites

CSS および LESS フレームワークに関する知識。

カスタマイズの対象 what-can-be-customized

この記事では、アダプティブフォームで公開されている css クラスの一覧を示します。 これらのクラスを使用して、アダプティブフォームの様々なコンポーネントのスタイルを設定できます。 警告を表示するダイアログやステータスバーなど、オーサリングコンポーネントのスタイル設定については、ここでは説明しません。テーマエディターを使用してコンポーネントのスタイル設定ができない場合にのみ、これらのスタイル構造を使用してスタイル(CSS または Less)を作成してください。

アダプティブフォームのスタイルのカスタマイズ customizing-styles-in-adaptive-forms

LESS フレームワークは、アダプティブフォームのスタイルをカスタマイズするユースケースを簡素化します。 フレームワークでは、変数や関数のセット(Mixin)を使用したスタイルの定義が可能です。LESS フレームワークにより、バンドルされているコードのサイズを減らし、コードの再利用率を高めることができます。

アダプティブフォームのスタイルは、次の方法でカスタマイズできます。

  • テーマを変更
  • コンポーネントのスタイルを変更

テーマを変更 changing-theme

アダプティブフォームのテーマは、アダプティブフォームが埋め込まれている web ページと外観が一致するように変更することができます。

テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームのルック&フィールへの大幅な変更は、テーマの変更とは見なされません。

Web ページのテーマは、ブートストラップに基づき、以下の CSS プロパティによって定義されます。

  • 背景色
  • ボーダー(種類、色、太さ)
  • フォントカラー
  • パディング
  • 余白
  • フォントサイズ
  • 行の高さ

現在、LESS 変数は、アダプティブフォーム内の様々な要素のこれらのプロパティに対してのみ定義されています。

コンポーネントスタイルの変更 changing-component-style

要素の外観、レイアウト、配置、表示を変更できます。そのためには、カスタムの .css ファイルを作成または更新し、この記事で説明するスタイル構成をそのファイルに含める必要があります。

アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。

コンポーネント components

この記事で説明されているコンポーネントには、CSS クラスが事前に定義されています。変数を編集して、CSS クラスでスタイルを変更できます。または、クラス全体を書き換えることもできます。 このセクションでは、変数を使用して変更できるコンポーネントとスタイル内のクラスを説明します。

コンテナのスタイル設定 container-styling

コンテナは、最上位のコンポーネントです。他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。

CSS クラス
guideContainerNode
変数の説明
変数の説明
container-bgColor
コンテナの背景色
container-padding
コンテナのパディング
container-margin
コンテナの余白
container-fontColor
コンテナのフォントカラー

フィールドのスタイル設定 field-styling

アダプティブフォームには、様々なタイプのフィールドが含まれています。 各フィールドには一意のクラス名があり、それがフィールドの名前となっています。また、フィールドには、guideFieldNode という共通のクラス名もあります。

フィールドには、ラベル、ウィジェット、ヘルプの説明(詳細な説明と短い説明の両方)、フィールドヘルプアイコン(クエスチョンマーク)が含まれています。

CSS クラス
guideFieldNode
変数
説明
field-padding
フィールドのパディング
field-error-font-color
フィールドのエラーメッセージのフォントカラー
field-error-font-size
フィールドのエラーメッセージのフォントサイズ

ラベルのスタイル設定 label-styling

フィールドに使用される HTML 要素 label には、ラベルが上にあるか左にあるかによって、left または top のクラスが含まれます。

CSS クラス
guideFieldLabel
変数
説明
label-font-color
フィールドラベルのフォントカラー
label-font-size
フィールドラベルのフォントサイズ
label-line-height
フィールドラベルに対する CSS の行の高さのプロパティ
label-font-weight
フィールドラベルに対する CSS のフォントの太さのプロパティ
label-margin
フィールドラベルの余白

ラベルに対する CSS ルールは、guideFieldLabel ラベルを使用して適用されます。カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。

ウィジェットのスタイル設定 widgets-styling

タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget クラスが含まれています。HTML に付属のウィジェットは通常、標準の HTML 要素 input と select を使用しています。スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。

CSS クラス
guideFieldWidget
変数``
説明
widgets-bg-color
ウィジェットの背景色(チェックボックスとラジオボタンに対しては機能しません)
widgets-border-color
ウィジェットのボーダーのカラー
widgets-border-thickness
ウィジェットのボーダーのサイズ
widgets-border-radius
ウィジェットのボーダーの半径
widgets-border-type
ウィジェットのボーダーのタイプ
widget-border-focus-type
ウィジェットのボーダーのフォーカスタイプ
widgets-border
ウィジェットのボーダーの統合されたスタイル
widgets-font-color
ウィジェットの中のテキストの色
widgets-font-size
ウィジェットの中のテキストのサイズ
widgets-line-height
ウィジェットに対する CSS の行の高さのプロパティ
widgets-padding
ウィジェットに対する CSS のパディングのプロパティ
widgets-focus-border-color
ウィジェットがフォーカスされたときのボーダーの色
widgets-mandatory-border-color
必須フィールドのウィジェットのボーダーの色
widgets-mandatory-bg-color
必須フィールドのウィジェットの背景色
widgets-disabled-bg-color
フィールドが無効になっているときのウィジェットの背景色
widgets-disabled-font-color
フィールドが無効になっているときのウィジェットのフォントカラー
widgets-disabled-border-color
フィールドが無効になっているときのウィジェットのボーダーの色
widget-height
ウィジェットの高さ(チェックボックスとラジオボタンには適用されません)
checkbutton-height
チェックボックスおよびラジオボタンの高さ
listboxwidget-height
複数選択ドロップダウンの最大の高さ

ウィジェットのスタイル設定における制限事項 limitations-in-widget-styling

フォーカスされたフィールド、必須フィールド、および無効なフィールドのスタイル設定は、変数を使用して制限されます。ただし、スタイルを上書きすることで変更することができます。変数の使用における制限は、主に変数の数を抑えるために設けられています。制限は、フィールドの外観が大きく変更され、前述の状態のいずれかにある場合に緩和できます。

ヘルプの説明 help-description

作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .guideHelpDescription を持っており、説明のタイプによって、もう 1 つのクラス .long.short を持っています。ヘルプコンテンツは、説明のスタイル設定を上書きする段落要素で囲まれています。ヘルプの説明(詳細な説明と短い説明の両方)は、以下の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。

変数
説明
widgets-help-long-bg-color
ウィジェットの詳細なヘルプの背景色
widgets-help-long-border-color
ウィジェットの詳細なヘルプのボーダーの色
widgets-help-long-border-indicator-color
ウィジェットの詳細なヘルプの左のインジケーターのボーダーの色
widgets-help-short-bg-color
ウィジェットの短いヘルプの背景色
widgets-help-short-color
ウィジェットの短いヘルプのフォントカラー
widgets-help-short-tooltip-bg-color
ウィジェットの短いツールヒントのヘルプの背景色
widgets-help-short-tooltip-color
ウィジェットの短いツールヒントのヘルプのフォントカラー

利用条件 terms-and-conditions

利用条件(TnC ``)ウィジェットでは、利用条件を指定できます。このウィジェットは、以下の表で説明する変数を使用してカスタマイズできます。

変数
説明
tnc-unvisited
未訪問の TnC リンクのフォントカラー
tnc-visited
訪問済みの TnC リンクのフォントカラー

ボタン button

ボタンもウィジェットの 1 つです。ただし、スタイル設定はウィジェットとは多少異なります。アダプティブフォームでは、以下のいずれかがボタンを構成します。

  • input[type = text]
  • button
  • .button クラスを持つ要素

ボタンの HTML コード:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS クラス
説明
iconButton-icon
ボタンのアイコンを指定します
iconButton-label
ボタンのラベルまたはキャプションのスタイルを設定します
変数``
説明
button-border-size
ボタンのボーダーのサイズ
button-border-type
ボーダーのタイプ
button-padding
ボタンに対する CSS のパディングのプロパティ
button-font-size
ボタンのフォントサイズ
button-background-color
ボタンの背景色
button-font-color
ボタンのフォントカラー
button-border-color
ボタンのボーダーの色
button-large-padding
大きいボタン(.buttonlarge クラスを持つボタン)のパディング
button-large-font-size
大きいボタンのフォントサイズ
button-small-padding
小さいボタン(.buttonsmall クラスを持つボタン)のパディング
button-small-font-size
小さいボタンのフォントサイズ
button-info-background-color
情報ボタン(.buttoninformative クラスを持つボタン)の背景色
button-info-font-color
情報ボタンのフォントカラー
button-info-border-color
情報ボタンのボーダーの色
button-warning-background-color
警告スタイルのボタン(.buttonwarning クラスを持つボタン)の背景色
button-warning-font-color
警告スタイルのボタンのフォントカラー
button-warning-border-color
警告スタイルのボタンのボーダーの色
button-alert-background-color
アラートボタン(.buttonalert クラスを持つボタン)の背景色
button-alert-font-color
アラートボタンのフォントカラー
button-alert-border-color
アラートボタンのボーダーの色

疑問符 question-mark

ウィジェットでは、作成者がヘルプ コンテンツに長い説明を追加すると、疑問符が表示されます。ブートストラップで提供されるデフォルトのアイコンが使用されます。カスタムアイコンを使用するには、ブートストラップアイコンをカスタマイズします。

CSS クラス
guideHelpQuestionMark
変数
説明
questionmark-font-color
アイコンの色
questionmark-hover-font-color
カーソルをアイコンの上に移動させたときのアイコンの色

テーブル table

テーブル内のヘッダーおよびボディ行のカラーテーマは、以下の変数を使用して変更できます。

変数
説明
table-header-bg-color
ヘッダー行の背景色デフォルト値は #333 です。
table-odd-row-bg-color
奇数のボディ行の背景色デフォルト値は rgb(255, 255, 255) です。
table-even-row-bg-color
偶数のボディ行の背景色デフォルト値は #eee です。

ファイル添付 file-attachment

アダプティブフォームのファイル添付ウィジェットを使用して、ファイルをアップロードできます。 変数を使用してウィジェットをカスタマイズすることもできます。

変数
説明
fileItemPadding
ウィジェットに表示されるファイルのパディング
fileItemBackground
ファイルアイテムの背景色
fileItemBorderColor
上のボーダーの色
fileItemColor
ファイルアイテムのフォントカラー
filePreviewIconColor
ウィジェットのプレビューアイコン(ブートストラップのアイコン)の色
fileItemCommentHeight
ファイルアイテムのコメントの高さ

ナビゲーターのスタイル navigator-styles

ナビゲータータブは 4 種類あります。これらには、左側、上部、ウィザード、アコーディオンのタブがあります。各ナビゲーターには、異なるクラスが割り当てられています。

ナビゲーター
CSS クラス
Accordion
.accordion-navigators
tabs on the left
.tab-navigators-vertical
tabs on the top
.tab-navigators
Wizard
.wizard-navigators

以下に示すのは、タブナビゲーター要素(ブートストラップタブに類似する)の HTML コードです。

<li>

<a>tab title</a>

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></code>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

descendant セレクターで要素を選択する CSS ルールを使用して、ナビゲーターのスタイル設定を変更できます。例えば、アンカータグにテキスト装飾スタイルを追加するには、以下のようにします。

上部のタブナビゲーター:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

さらに、入れ子のナビゲーターの有無に基づいて、タブナビゲーター(左側と上部の両方)のスタイル設定を行うためのクラスがあります。

CSS クラス
説明
nested_true
入れ子ナビゲーターを持つタブナビゲーター(左側と上部の両方)
nested_false
ネストされた/子/サブナビゲーターを持たないタブナビゲーター(左側と上部)

guideNavIcon クラスには、タブナビゲーター(左側と上部の両方)およびウィザードナビゲーターにデフォルトのアイコンがあります。

CSS クラス
guideNavIcon
NOTE
オーサリング中にパネルに CSS クラス(例:<CLASS_NAME>)を指定することで、特定のナビゲーターのアイコンを変更できます。ナビゲーターのアイコンに <CLASS_NAME>_nav を追加します。
変数
説明
タブナビゲーター
navigator-bg-color
タブナビゲーター全体の背景色
tabs-bg-color
タブの背景色
tabs-font-color
タブのフォントカラー
tabs-hover-bg-color
カーソルが置かれたときのタブの背景色
tabs-hover-font-color
カーソルが置かれたときのタブのフォントカラー
tabs-active-bg-color
パネルがフォーカスされた(アクティブな)ときの背景色
tabs-active-font-color
パネルがフォーカスされたときのフォントカラー
tabs-completed-bg-color
パネルの完了式が true を返したときの背景色
tabs-completed-font-color
パネルの完了式が true を返したときのフォントカラー
tabs-stepped-bg-color
パネルが一度フォーカスされたが、パネルの完了式が false を返したときの背景色
tabs-stepped-font-color
パネルが一度フォーカスされたが、パネルの完了式が false を返したときのフォントカラー
tabs-border-color
タブのボーダーのカラー
tabs-font-size
タブのフォントサイズ
tabs-padding
タブのパディング
tabs-margin
タブの余白
tabs-vertical-margin
垂直タブの余白
tabs-border-thickness
タブのボーダーのサイズ
tabs-min-height
タブの最小の高さ
heirarichal-indent
入れ子タブのインデント
ウィザードナビゲーター
wizard-navigator-bg-color
ウィザードナビゲーター全体の背景色
wizard-tabs-bg-color
ウィザードの背景色
wizard-tabs-font-color
ウィザードのフォントカラー
wizard-tabs-active-bg-color
パネルがフォーカスされた(アクティブな)ときの背景色
wizard-tabs-active-font-color
パネルがフォーカスされたときのフォントカラー
wizard-tabs-completed-bg-color
パネルの完了式が true を返したときの背景色
wizard-tabs-completed-font-color
パネルの完了式が true を返したときのフォントカラー
wizard-tabs-stepped-bg-color
パネルが一度フォーカスされたが、パネルの完了式が false を返したときの背景色
wizard-tabs-stepped-font-color
パネルが一度フォーカスされたが、パネルの完了式が false を返したときのフォントカラー
wizard-tabs-border-color
ウィザードの色
wizard-tabs-font-size
ウィザードのフォントサイズ
wizard-tabs-padding
ウィザードのパディング
wizard-tabs-border-thickness
ウィザードのボーダーのサイズ
wizard-nav-bullet-border
ウィザードナビゲーターの行頭文字(キャプション/ラベルの前に付ける)のボーダーの色
wizard-progress-bg-color
ウィザードナビゲーターのプログレスバーの背景色
wizard-progress-color
プログレスバーの塗りつぶしの色
アコーディオンナビゲーター
accordion-tabs-padding
アコーディオンのパディング

パネルのスタイル設定 panel-styling

パネルには、オプションのツールバーとそのコンテンツが含まれます。

CSS クラス
guidePanelNode
変数
説明
panel-background-color
パネルの背景色
panel-font-size
パネルテキストのフォントサイズ
panel-font-color
パネルテキストのフォントカラー
panel-padding
パネル内のパディング
panel-description-font-size
パネルの説明のフォントサイズ
panel-description-padding
パネルの説明のパディング
panel-help-bg-color
パネルのヘルプの背景色
panel-help-border-indicator-color
パネルのヘルプのインジケーターのボーダーの色

パネルノードは、ナビゲーターとコンテンツに分かれています。コンテンツ用の別のスタイル設定コンポーネントはありません。 説明した変数は、ナビゲーターとコンテンツに適用されます。

最上部のパネル(RootPanel)にはこのクラスはありません。

モバイルのスタイル設定 mobile-styling

ヘッダーバー header-bar

これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ/前へのナビゲーターを含むバーのことです。

CSS クラス
guide-header-bar
変数
説明
headerbar-background-color
ヘッダーバーの背景色
headerbar-font-color
ヘッダーバーの中のテキストのフォントカラー
headerbar-padding
ヘッダーバーのパディング

スクロールインジケーター scroll-indicator

これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターは、モバイルデバイスまたは小さな画面のデバイスに表示されるオレンジ色の矢印です。スクロールインジケーターは、画面の表示されている部分を超えたコンテンツがあることを示します。下にスクロールして表示できます。矢印は、コンテンツの最後に到達すると消えます。

CSS クラス
mobileScrollIndicator
変数
説明
scrollIndicatorBottom
スクロールインジケーターの下からの固定位置
scrollIndicatorRight
スクロールインジケーターの右からの固定位置
scrollIndicatorWidth
スクロールインジケーターの幅
scrollIndicatorHeight
スクロールインジケーターの高さ

モバイル固定ツールバーのレイアウト固有の変数 mobile-fixed-toolbar-layout-specific-variables

以下の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。

CSS クラス
mobileToolbar
変数
説明
mobileToolbarBottom
モバイルデバイス上でのツールバーの下からの固定位置
mobileToolbarTop
モバイルデバイス上でのツールバーの上からの固定位置
mobileToolbarLeft
モバイルデバイス上でのツールバーの左からの固定位置
mobileToolbarRight
モバイルデバイス上でのツールバーの右からの固定位置
mobileButtonIconTopMargin
モバイルデバイス上でのツールバーのボタンアイコンの上からの固定位置
mobileButtonIconWidth
モバイルデバイス上でのツールバーのボタンアイコンの幅
mobileButtonIconHeight
モバイルデバイス上でのツールバーのボタンアイコンの高さ
mobilefixedtoolbarbgcolor
モバイルデバイス上のツールバーの背景色

テーマ固有の変数 theme-specific-variable

/etc/clientlibs/fd/af/guidetheme/simpleEnrollment の​ シンプルな登録 ​のテーマおよびカテゴリ guide.theme.simpleEnrollment でも、いくつかの変数が導入されています。シンプルな登録を強化するテーマを作成したい場合は、以下の追加変数を利用できます。

変数
説明
button-focus-bg-color
ボタンがフォーカスされたときの背景色
button-hover-bg-color
ボタンにカーソルが置かれたときの背景色
button-radius
ボタンの半径
navigation-button-bg-color
ナビゲーションボタン(前へ/次へ)の背景色
navigation-button-bg-hover-color
カーソルが置かれたときのナビゲーションボタン(前へ/次へ)の背景色
initial-nav-color
ウィザードナビゲーターと対応するプログレスバーが最初にレンダリングされたときの背景色
active-nav-color
現在アクティブなウィザードナビゲーターと対応するプログレスバーの背景色
visited-nav-color
訪問済みのウィザードナビゲーターと対応するプログレスバーの背景色
tabs-bifercating-border-color
ナビゲーターとパネルにコンテナを分岐するボーダーの色
tabs-navigator-separator-color
タブと左側にあるタブ(タブナビゲーター)を分ける下のボーダーの色
tabs-child-nav-bg-color
ナビゲーターの入れ子ナビゲーターの背景色
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2