アダプティブフォームのスタイル構成

前提条件

CSS と LESS フレームワークに関する知識が必要になります。

カスタマイズの対象

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

アダプティブフォームのスタイルのカスタマイズ

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

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

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

テーマを変更する

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

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

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

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

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

コンポーネントスタイルの変更

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

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

コンポーネント

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

コンテナのスタイル設定

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

CSS クラス

guideContainerNode

変数の説明

変数の説明

container-bgColor

コンテナの背景色

container-padding

コンテナのパディング

container-margin

コンテナの余白

container-fontColor

コンテナのフォントカラー

フィールドのスタイル設定

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

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

CSS クラス

guideFieldNode

変数

説明

field-padding

フィールドのパディング

field-error-font-color

フィールドのエラーメッセージのフォントカラー

field-error-font-size

フィールドのエラーメッセージのフォントサイズ

ラベルのスタイル設定

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

CSS クラス

guideFieldLabel

変数

説明

label-font-color

フィールドラベルのフォントカラー

label-font-size

フィールドラベルのフォントサイズ

label-line-height

 フィールドラベルに対する CSS の行の高さのプロパティ

label-font-weight

 フィールドラベルに対する CSS のフォントの太さのプロパティ

label-margin

フィールドラベルの余白

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

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

タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには 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

複数選択のドロップダウンの最大の高さ

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

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

ヘルプの説明

作成者は、短い説明と詳細な説明のコンポーネントを使用して、ヘルプコンテンツを指定できます。コンポーネントは両方とも、共通のクラス .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

ウィジェットの短いツールヒントのヘルプのフォントカラー

利用条件

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

変数

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

ボタン

ボタンもウィジェットの 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

アラートボタンのボーダーの色

疑問符

ウィジェットでは、ヘルプコンテンツで詳細な説明が追加されたときに疑問符が表示されます。ブートストラップで指定されているデフォルトのアイコンが使用されます。カスタムアイコンを使用したい場合には、ブートストラップのアイコンをカスタマイズすることができます。

CSS クラス

guideHelpQuestionMark

変数

説明

questionmark-font-color

アイコンの色

questionmark-hover-font-color

カーソルをアイコンの上に移動させたときのアイコンの色

テーブル

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

変数

説明

table-header-bg-color

ヘッダー行の背景色デフォルト値は #333 です。

table-odd-row-bg-color

奇数のボディ行の背景色デフォルト値は rgb(255, 255, 255) です。

table-even-row-bg-color

偶数のボディ行の背景色デフォルト値は #eee です。

ファイル添付

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

変数

説明

fileItemPadding

ウィジェットに表示されるファイルのパディング

fileItemBackground

ファイルアイテムの背景色

fileItemBorderColor

上のボーダーの色

fileItemColor

ファイルアイテムのフォントカラー

filePreviewIconColor

ウィジェットのプレビューアイコン（ブートストラップのアイコン）の色

fileItemCommentHeight

ファイルアイテムのコメントの高さ

ナビゲータータブには 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
メモ

オーサリング中にパネルに 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

アコーディオンのパディング

パネルのスタイル設定

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

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）にはこのクラスは割り当てられていません。

モバイルのスタイル設定

ヘッダーバー

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

CSS クラス

guide-header-bar

変数

説明

headerbar-background-color

ヘッダーバーの背景色

headerbar-font-color

ヘッダーバーの中のテキストのフォントカラー

headerbar-padding

ヘッダーバーのパディング

スクロールインジケーター

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

CSS クラス

mobileScrollIndicator

変数

説明

scrollIndicatorBottom

スクロールインジケーターの下からの固定位置

scrollIndicatorRight

スクロールインジケーターの右からの固定位置

scrollIndicatorWidth

スクロールインジケーターの幅

scrollIndicatorHeight

スクロールインジケーターの高さ

モバイル固定ツールバーのレイアウト固有の変数

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

CSS クラス

mobileToolbar

変数

説明

mobileToolbarBottom

モバイルデバイス上でのツールバーの下からの固定位置

mobileToolbarTop

モバイルデバイス上でのツールバーの上からの固定位置

mobileToolbarLeft

モバイルデバイス上でのツールバーの左からの固定位置

mobileToolbarRight

モバイルデバイス上でのツールバーの右からの固定位置

mobileButtonIconTopMargin

モバイルデバイス上でのツールバーのボタンアイコンの上からの固定位置

mobileButtonIconWidth

モバイルデバイス上でのツールバーのボタンアイコンの幅

mobileButtonIconHeight

モバイルデバイス上でのツールバーのボタンアイコンの高さ

mobilefixedtoolbarbgcolor

モバイルデバイス上でのツールバーの背景色

テーマ固有の変数

/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

ナビゲーターの入れ子ナビゲーターの背景色

このページ