Show Menu
トピック×

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

前提条件

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

カスタマイズの対象

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

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

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

テーマを変更する

アダプティブフォームのテーマを変更して、アダプティブフォームが埋め込まれたWebページと外観が一致するようにすることができます。
テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームの「OK」と「操作性」に対する大きな変更は、テーマの変更とは見なされません。
Web ページのテーマは、ブートストラップに基づき、次の CSS プロパティによって定義されます。
  • 背景色
  • ボーダー(種類、色、太さ)
  • フォントカラー
  • パディング
  • の余白
  • フォントサイズ
  • 行の高さ
現在、LESS 変数は、アダプティブフォームのさまざまな要素のこれらのプロパティに対してのみ定義されています。

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

要素の外観、レイアウト、配置、可視性を変更することができます。この作業を行うには、この記事に示すスタイル設定構成を含めるカスタム.cssファイルを作成または更新します。
アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。

コンポーネント

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

コンテナのスタイル設定

コンテナは、最上位のコンポーネントです。 他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。
CSS クラス
guideContainerNode
変数の説明
変数の説明
container-bgColor
コンテナの背景色
container-padding
コンテナのパディング
container-margin
コンテナの余白
container-fontColor
コンテナのフォントカラー

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

アダプティブフォームには、さまざまなタイプのフィールドが含まれています。各フィールドにはユニークなクラス名があり、それがフィールドの名前となっています。The field also has a common class name guideFieldNode .
フィールドには、ラベル、ウィジェット、ヘルプの説明(詳細な説明および短い説明の両方)、フィールドヘルプアイコン(クエスチョンマーク)が含まれています。
CSS クラス
guideFieldNode
変数
説明
field-padding
フィールドのパディング
field-error-font-color
フィールドのエラーメッセージのフォントカラー
field-error-font-size
フィールドのエラーメッセージのフォントサイズ

ラベルのスタイル設定

The HTML element label used for the field includes the classes left or top depending on whether the label is at the top or left.
CSS クラス
guideFieldLabel
変数
説明
label-font-color
フィールドラベルのフォントカラー
label-font-size
フィールドラベルのフォントサイズ
label-line-height
フィールドラベルのCSS行の高さのプロパティ
label-font-weight
フィールドラベルのCSSフォントの太さプロパティ
label-margin
フィールドラベルの余白
The CSS rules for the label are applied using the guideFieldLabel label. カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。

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

タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには 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
複数選択のドロップダウンの最大の高さ

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

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

ヘルプの説明

作成者は、短い説明と詳細な説明のコンポーネントを使用することにより、ヘルプコンテンツを指定することができます。Both components have a common class .guideHelpDescription and another class .long / .short , depending on the type of description. ヘルプコンテンツは、説明のスタイル設定をオーバーライドする段落要素で囲まれています。ヘルプの説明(詳細な説明と短い説明の両方)は、次の表で説明されるとおり、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 リンクのフォントカラー

ボタン

ボタンもウィジェットのひとつです。ただし、そのスタイル設定はウィジェットとは多少異なります。アダプティブフォームでは、次のいずれかを含んでいればボタンと見なされます。
  • 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
ヘッダー行の背景色The default value is #333 .
table-odd-row-bg-color
奇数のボディ行の背景色デフォルト値は rgb(255, 255, 255) です。
table-even-row-bg-color
偶数のボディ行の背景色デフォルト値は #eee です。

添付ファイル

アダプティブフォームの添付ファイルウィジェットでは、ファイルをアップロードすることができます。変数を使ってウィジェットをカスタマイズすることもできます。
変数
説明
fileItemPadding
ウィジェットに表示されるファイルのパディング
fileItemBackground
ファイルアイテムの背景色
fileItemBorderColor
上のボーダーの色
fileItemColor
ファイルアイテムのフォントカラー
filePreviewIconColor
ウィジェットのプレビューアイコン(ブートストラップのアイコン)の色
fileItemCommentHeight
ファイルアイテムのコメントの高さ

パネルのスタイル設定

パネルには、オプションのツールバーとそのコンテンツが含まれます。
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
モバイルデバイス上でのツールバーの背景色

テーマ固有の変数

The Simple enrollment theme at /etc/clientlibs/fd/af/guidetheme/simpleEnrollment and the category guide.theme.simpleEnrollment also introduce a few variables. シンプルな登録を強化するテーマを作成する場合は、次の「追加変数」を使用できます。
変数
説明
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
ナビゲーターの入れ子ナビゲーターの背景色