CSS と LESS フレームワークに関する知識が必要になります。
この記事では、公開されているアダプティブフォームの CSS クラスについて説明します。これらのクラスを活用して、アダプティブフォームの様々なコンポーネントのスタイルを設定できます。 警告を表示するダイアログやステータスバーなど、オーサリングコンポーネントのスタイル設定については、ここでは説明しません。テーマエディターを使用してコンポーネントのスタイル設定ができない場合にのみ、これらのスタイル構造を使用してスタイル(CSS または Less)を作成してください。
LESS フレームワークにより、アダプティブフォームでのスタイルのカスタマイズを簡単に行うことができます。フレームワークでは、変数や関数のセット(ミックスイン)を使用したスタイルの定義が可能です。LESS フレームワークにより、バンドルされているコードをのサイズを減らし、コードの再利用率を高めることができます。
アダプティブフォームのスタイルは、次の方法でカスタマイズすることができます。
アダプティブフォームのテーマを変更して、アダプティブフォームが埋め込まれたWebページと外観が一致するようにすることができます。
テーマの変更は通常、アダプティブフォームの全体的な外観をCSS プロパティを使用して変更することにより行われます。コンポーネントのレイアウトや配置の変更など、アダプティブフォームのログ"OK&FEEL"に対する大きな変更は、テーマの変更とは見なされません。
Web ページのテーマは、ブートストラップに基づき、次の CSS プロパティによって定義されます。
現在、LESS 変数は、アダプティブフォームのさまざまな要素のこれらのプロパティに対してのみ定義されています。
要素の外観、レイアウト、配置、可視性を変更することができます。このタスクを実現するには、この記事に示すスタイル設定構成を含めるカスタム.cssファイルを作成または更新します。
アダプティブフォームにスタイルを適用するには、編集用としてアダプティブフォームを開き、アダプティブフォームコンテナのプロパティを開いて、「基本」タブでカスタム .css ファイルのパスを指定します。アダプティブフォームのデフォルトのスタイル構成は、カスタムの .css ファイル内の構成によって上書きされます。
この記事で説明されているコンポーネントには、CSS クラスが事前に定義されています。変数を編集することにより、CSS クラスでスタイルを変更することができます。または、クラス全体を書き直すこともできます。このセクションでは、変数を使って変更できるコンポーネントとスタイル内のクラスを説明します。
コンテナは、トップレベルのコンポーネントです。 他のパネルおよびフィールドは、コンテナコンポーネントの下に位置しています。
CSS クラス |
|
変数の説明 |
変数の説明 |
|
コンテナの背景色 |
|
コンテナのパディング |
|
コンテナの余白 |
|
コンテナのフォントカラー |
アダプティブフォームには、さまざまなタイプのフィールドが含まれています。各フィールドにはユニークなクラス名があり、それがフィールドの名前となっています。フィールドにも共通のクラス名guideFieldNode
があります。
フィールドには、ラベル、ウィジェット、ヘルプの説明(詳細な説明および短い説明の両方)、フィールドヘルプアイコン(クエスチョンマーク)が含まれています。
CSS クラス |
|
変数 |
説明 |
|
フィールドのパディング |
|
フィールドのエラーメッセージのフォントカラー |
|
フィールドのエラーメッセージのフォントサイズ |
フィールドに使用されるHTML要素labelには、ラベルが上にあるか左にあるかに応じて、leftまたはtopのクラスが含まれます。
CSS クラス |
|
変数 |
説明 |
|
フィールドラベルのフォントカラー |
|
フィールドラベルのフォントサイズ |
|
フィールドラベルに対するCSSの行の高さのプロパティ |
|
フィールドラベルに対するCSSフォント重み付けプロパティ |
|
フィールドラベルの余白 |
ラベルに対するCSSルールは、guideFieldLabelラベルを使用して適用されます。 カスタム変更を見えるようにするには、作成者がこのルールを上書きする必要があります。
タイプによっては、ウィジェットにもクラスが含まれています。一般的に、ウィジェットには guideFieldWidget
クラスが含まれています。HTML に付属のウィジェットは通常、標準の HTML 要素 input と select を使用しています。スタイル設定は、それに応じて行われます。変数を変更することによって、カスタムウィジェットのスタイル設定を行うことはできません。
CSS クラス |
|
変数 |
説明 |
|
ウィジェットの背景色(チェックボックスとラジオボタンには適用されません) |
|
ウィジェットのボーダーのカラー |
|
ウィジェットのボーダーのサイズ |
|
ウィジェットのボーダーの半径 |
|
ウィジェットのボーダーのタイプ |
|
ウィジェットのボーダーのフォーカスタイプ |
|
ウィジェットのボーダーの統合されたスタイル |
|
ウィジェットの中のテキストの色 |
|
ウィジェットの中のテキストのサイズ |
|
ウィジェットのCSS行の高さのプロパティ |
|
ウィジェットに対する CSS のパディングのプロパティ |
|
ウィジェットがフォーカスされたときのボーダーの色 |
|
必須フィールドのウィジェットのボーダーの色 |
|
必須フィールドのウィジェットの背景色 |
|
フィールドが無効になっているときのウィジェットの背景色 |
|
フィールドが無効になっているときのウィジェットのフォントカラー |
|
フィールドが無効になっているときのウィジェットのボーダーの色 |
|
ウィジェットの高さ(チェックボックスとラジオボタンには適用されません) |
|
チェックボックスおよびラジオボタンの高さ |
|
複数選択のドロップダウンの最大の高さ |
変数を使用したフォーカス時、必須、無効フィールドのスタイル設定には制限があります。ただし、スタイルをオーバーライドすることにより変更することができます。変数の使用における制限は、主に変数の数を抑えるために設けられています。制限は、フィールドの外観が大幅に変化する場合に緩和できます。これは、フィールドが前述の状態のいずれかにあるためです。
作成者は、短い説明と詳細な説明のコンポーネントを使用することにより、ヘルプコンテンツを指定することができます。両方のコンポーネントは、説明の種類に応じて、共通のクラス.guideHelpDescription
と別のクラス.long
/ .short
を持ちます。 ヘルプコンテンツは、説明のスタイル設定をオーバーライドする段落要素で囲まれています。ヘルプの説明(詳細な説明と短い説明の両方)は、次の表で説明されるとおり、widgetshelp で始まる変数を使用して変更されます。
変数 |
説明 |
|
ウィジェットの詳細なヘルプの背景色 |
|
ウィジェットの詳細なヘルプのボーダーの色 |
|
ウィジェットの詳細なヘルプの左のインジケーターのボーダーの色 |
|
ウィジェットの短いヘルプの背景色 |
|
ウィジェットの短いヘルプのフォントカラー |
|
ウィジェットの短いツールヒントのヘルプの背景色 |
|
ウィジェットの短いツールヒントのヘルプのフォントカラー |
利用条件 (TnC
) ウィジェットでは、利用条件を指定することができます。このウィジェットは、次の表で説明する変数を使ってカスタマイズすることができます。
変数 |
説明 |
tnc-unvisited |
未訪問の TnC リンクのフォントカラー |
tnc-visited |
訪問済みの TnC リンクのフォントカラー |
ボタンもウィジェットのひとつです。ただし、そのスタイル設定はウィジェットとは多少異なります。アダプティブフォームでは、次のいずれかを含んでいればボタンと見なされます。
ボタンの HTML コード
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS クラス |
説明 |
|
ボタンのアイコンを指定します |
|
ボタンのラベルまたはキャプションのスタイルを設定します |
変数 |
説明 |
|
ボタンのボーダーのサイズ |
|
ボーダーのタイプ |
|
ボタンに対する CSS のパディングのプロパティ |
|
ボタンのフォントサイズ |
|
ボタンの背景色 |
|
ボタンのフォントカラー |
|
ボタンのボーダーの色 |
|
大きいボタン(.buttonlarge クラスを持ったボタン)のパディング |
|
大きいボタンのフォントサイズ |
|
小さいボタン(.buttonsmall クラスを持ったボタン)のパディング |
|
小さいボタンのフォントサイズ |
|
情報ボタン(.buttoninformative クラスを持ったボタン)の背景色 |
|
情報ボタンのフォントカラー |
|
情報ボタンのボーダーの色 |
|
警告スタイルのボタン(.buttonwarning クラスを持ったボタン)の背景色 |
|
警告スタイルのボタンのフォントカラー |
|
警告スタイルのボタンのボーダーの色 |
|
通知ボタン(.buttonalert クラスを持ったボタン)の背景色 |
|
通知ボタンのフォントカラー |
|
通知ボタンのボーダーの色 |
ウィジェットでは、ヘルプコンテンツで詳細な説明が追加されたときに疑問符が表示されます。ブートストラップで指定されているデフォルトのアイコンが使用されます。カスタムアイコンを使用したい場合には、ブートストラップのアイコンをカスタマイズすることができます。
CSS クラス |
|
変数 |
説明 |
|
アイコンの色 |
|
カーソルをアイコンの上に移動させたときのアイコンの色 |
テーブル内のヘッダーおよびボディ行のカラーテーマは、次の変数を使用して変更することができます。
変数 |
説明 |
|
ヘッダー行の背景色デフォルト値は |
|
奇数のボディ行の背景色デフォルト値は |
|
偶数のボディ行の背景色デフォルト値は |
アダプティブフォームの添付ファイルウィジェットでは、ファイルをアップロードすることができます。変数を使ってウィジェットをカスタマイズすることもできます。
変数 |
説明 |
|
ウィジェットに表示されるファイルのパディング |
|
ファイルアイテムの背景色 |
|
上のボーダーの色 |
|
ファイルアイテムのフォントカラー |
|
ウィジェットのプレビューアイコン(ブートストラップのアイコン)の色 |
|
ファイルアイテムのコメントの高さ |
ナビゲータータブには 4 種類あります。これらに’は、左側および上部のタブ、ウィザード、アコーディオンが含まれています。各ナビゲーターには、異なるクラスが割当られています。
ナビゲーター |
CSS クラス |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.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"/%3E%60%60%3Cbutton%20name=?lang=ja"Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
子孫 セレクターで要素を選択する 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 クラス |
説明 |
|
入れ子ナビゲーターを持つタブナビゲーター(左側と上部の両方) |
|
入れ子ナビゲーターを持たないタブナビゲーター(左側と上部の両方) |
guideNavIcon クラスで、タブナビゲーター(左側と上部の両方)およびウィザードナビゲーターにデフォルトのアイコンを指定することができます。
CSS クラス |
|
オーサリング中にパネルに CSS クラス(例:<CLASS_NAME>)を指定することで、特定のナビゲーターのアイコンを変更することができます。ナビゲーターのアイコンに <CLASS_NAME>_nav を追加します。
変数 |
説明 |
タブナビゲーター |
|
|
タブナビゲーター全体の背景色 |
|
タブの背景色 |
|
タブのフォントカラー |
|
カーソルが置かれたときのタブの背景色 |
|
カーソルが置かれたときのタブのフォントカラー |
|
パネルがフォーカスされた(アクティブな)ときの背景色 |
|
パネルがフォーカスされたときのフォントカラー |
|
パネルの完了式が true を返したときの背景色 |
|
パネルの完了式が true を返したときのフォントカラー |
|
パネルが一度フォーカスされたが、パネルの完了式がfalseを返したときの背景色 |
|
パネルが一度フォーカスされたが、パネルの完了式がfalseを返したときのフォントカラー |
|
タブのボーダーのカラー |
|
タブのフォントサイズ |
|
タブのパディング |
|
タブの余白 |
|
垂直タブの余白 |
|
タブのボーダーのサイズ |
|
タブの最小の高さ |
|
入れ子タブのインデント |
ウィザードナビゲーション |
|
|
ウィザードナビゲーター全体の背景色 |
|
ウィザードの背景色 |
|
ウィザードのフォントカラー |
|
パネルがフォーカスされた(アクティブな)ときの背景色 |
|
パネルがフォーカスされたときのフォントカラー |
|
パネルの完了式が true を返したときの背景色 |
|
パネルの完了式が true を返したときのフォントカラー |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときの背景色 |
|
パネルが一度フォーカスされたが、パネルの完了式が false を返したときのフォントカラー |
|
ウィザードの色 |
|
ウィザードのフォントサイズ |
|
ウィザードのパディング |
|
ウィザードのボーダーのサイズ |
|
ウィザードナビゲーターの行頭文字(キャプション/ラベルの前に付ける)のボーダーの色 |
|
ウィザードナビゲーターのプログレスバーの背景色 |
|
プログレスバーの塗りつぶしの色 |
アコーディオンナビゲーター |
|
|
アコーディオンのパディング |
パネルには、オプションのツールバーとそのコンテンツが含まれます。
CSS クラス |
|
変数 |
説明 |
|
パネルの背景色 |
|
パネルテキストのフォントサイズ |
|
パネルテキストのフォントカラー |
|
パネル内のパディング |
|
パネルの説明のフォントサイズ |
|
パネルの説明のパディング |
|
パネルのヘルプの背景色 |
|
パネルのヘルプのインジケーターのボーダーの色 |
パネルノードは、ナビゲーターとコンテンツに分けられています。コンテンツ用の別のスタイル設定コンポーネントはありません。
説明された変数は、コンテンツだけでなくナビゲーターにも適用されます。
一番上のパネル(RootPanel)にはこのクラスがありません。
これらの変数は、ヘッダーバーに影響します。ヘッダーバーは、モバイルデバイスまたは画面の小さいデバイスに表示され、パネルタイトルおよび次へ/前へのナビゲーターを含むバーのことです。
CSS クラス |
|
変数 |
説明 |
|
ヘッダーバーの背景色 |
|
ヘッダーバーの中のテキストのフォントカラー |
|
ヘッダーバーのパディング |
これらの変数は、スクロールインジケーターに影響します。スクロールインジケーターとは、モバイルデバイスまたは画面の小さいデバイスに表示されるオレンジの矢印のことです。スクロールインジケーターは、画面で表示されている部分以外にコンテンツがあることを示しています。下方向にスクロールすると表示されます。矢印は、コンテンツの一番下に到達すると消えます。
CSS クラス |
|
変数 |
説明 |
|
スクロールインジケーターの下からの固定位置 |
|
スクロールインジケーターの右からの固定位置 |
|
スクロールインジケーターの幅 |
|
スクロールインジケーターの高さ |
次の表に示すこれらの変数は、モバイル固定ツールバーのレイアウトに影響します。
CSS クラス |
|
変数 |
説明 |
|
モバイルデバイス上でのツールバーの下からの固定位置 |
|
モバイルデバイス上でのツールバーの上からの固定位置 |
|
モバイルデバイス上でのツールバーの左からの固定位置 |
|
モバイルデバイス上でのツールバーの右からの固定位置 |
|
モバイルデバイス上でのツールバーのボタンアイコンの上からの固定位置 |
|
モバイルデバイス上でのツールバーのボタンアイコンの幅 |
|
モバイルデバイス上でのツールバーのボタンアイコンの高さ |
|
モバイルデバイス上でのツールバーの背景色 |
/etc/clientlibs/fd/af/guidetheme/simpleEnrollmentの単純な登録テーマと、カテゴリguide.theme.simpleEnrollment
でもいくつかの変数が導入されています。 シンプルな登録を強化するテーマを作成する場合は、次の「追加の変数」を使用できます。
変数 |
説明 |
|
ボタンがフォーカスされたときの背景色 |
|
ボタンにカーソルが置かれたときの背景色 |
|
ボタンの半径 |
|
ナビゲーションボタン(前へ/次へ)の背景色 |
|
カーソルが置かれたときのナビゲーションボタン(前へ/次へ)の背景色 |
|
ウィザードナビゲーターと対応するプログレスバーが最初にレンダリングされたときの背景色 |
|
現在/アクティブなウィザードナビゲーターと対応するプログレスバーの背景色 |
|
訪問済みのウィザードナビゲーターと対応するプログレスバーの背景色 |
|
ナビゲーターとパネルにコンテナを分岐するボーダーの色 |
|
タブと左側にあるタブ(タブナビゲーター)を分ける下のボーダーの色 |
|
ナビゲーターの入れ子ナビゲーターの背景色 |