1. Oracle Integration Generation 2でのプロセスの使用
  2. 開発者のタスク
  3. Webフォームの作成
  4. スタイル・シートとスタイル設定の操作
機械翻訳について

スタイル・シートとスタイル設定の操作

スタイルシートとスタイル設定を使用して、Webフォームの外観をカスタマイズできます。 スタイルシートはフォーム全体に適用されます。 使用可能なスタイルシートをフォームに適用するかインポートして、Webフォームの外観を管理および制御できます。 スタイル設定により、選択したコントロールの外観を変更できます。 スタイル設定を使用して、Webフォームで現在選択しているコントロールの表示固有のプロパティを定義します。

ノート:

個々のコントロールに適用されるスタイル設定が、スタイルシートによってコントロールに適用されたスタイルを上書きします。

フォームのスタイルシートの変更

フォームのスタイルシートを変更するには:

  1. 「Properties」ペインで、「Stylesheet」に移動して、「Lookup stylesheet」アイコンをクリックします。

    CSSブラウザ・ペインが開き、すべての使用可能なスタイルシートが表示されます。

  2. 適用するスタイルシートを選択します。 選択したスタイルシートがWebフォームに適用されます。

  3. オプションで、スタイルシートをインポートします。 「アップロード」をクリックします。 「File Open」ダイアログ・ボックスが開きます。

    ローカル・マシンからインポートするスタイルシートを選択して、「Open」をクリックします。 選択したスタイルシートがインポートされて、フォームに適用できます。

    ノート:

    インポートしたスタイルシートがCSSブラウザで使用可能になり、他のフォームに適用できます。

  4. 「Preview」ペインで「Form」タブを選択して、選択したスタイルシートが適用されたフォームをプレビューします。 「CSS」タブを選択して、選択したスタイルシートで使用可能なスタイルをプレビューします。 スタイル・シートを使用して各コントロールをカスタマイズする方法を知りたいですか? 「CSSを使用したWebフォームのカスタマイズ」を参照してください。

フォームのコントロールのスタイルの変更

フォームのコントロールのスタイル設定を変更するには:
  1. スタイル設定を変更するコントロールを選択します。 「Properties」ペインが変更されて、「General」タブと「Styling」タブが表示されます。
  2. 「Styling」タブを選択します。 その特定のコントロールに表示されるスタイル設定オプションの数を確認できます。
  3. コントロールに適用するスタイル設定プロパティを選択して、スタイル設定を指定します。
    スタイル設定プロパティを参照してください。

スタイル設定プロパティ

コントロールの外観を変更するには、そのスタイル設定プロパティを「Properties」ペインの「Styling」タブで定義します。 「Styling」タブを使用して、現在選択しているコントロールの表示固有のプロパティを定義します。

次の表に、「Styling」タブで使用可能なプロパティのリストをアルファベット順に示します。

ノート:

スタイル・プロパティはコントロール固有のものです。 次に示すすべてのプロパティが、すべてのコントロールで使用できるわけではありません。
プロパティ 説明

Automatic column size

行内の表示可能コントロールの量に基づいて、コントロールの列サイズが計算されます。 「Automatic column size」は、デフォルトで選択されています。

ノート: 電話などの小さいデバイスでは、「automatic column size」が有効になっている場合、各コントロールは1行で表示されます。

デバイス・サイズに応じて、列の絶対サイズを指定できます。 これを行うには、「Automatic column size」の選択を解除して、列サイズの4つの使用可能なオプション「Small」、「Medium」、「Large」および「Extra large」に、1から12の範囲で数値を入力します。

Background Color

コントロール内のコンテンツ領域の背景色を指定します。

Border (色、幅、スタイル、半径)

コントロールのコンテンツ領域でのボーダーの外観を決定します。

  • Border Color: 境界線の色を定義します。

  • Border Width: 境界線の幅を定義します。 1in、5em、20pxなどの標準値を使用します。

  • ボーダーのスタイル: ボーダーのスタイルをソリッド、ドット、またはダッシュで定義します。

  • 枠線の角の丸め: 丸められたボーダー・コーナーの値を定義します。 1in、5em、20pxなどの標準値を使用します。

Color

コントロールのコンテンツ領域内のテキストの色を指定します。

Control Alignment

フォーム内のコントロールの配置(左、右、または中央)を指定します。

Control Class Name

特定のカスケード・スタイル・シート(CSS)をフォームで使用しているときにカスタマイズを可能にします。 フォームの選択したスタイル・シートで定義されているプロパティからクラス名を選択して、CSSクラスをコントロールに適用します。

Font Size

コントロールのコンテンツ領域内のテキストのフォント・サイズを定義します。 使用できる値は、x-small、small、normal、large、およびx-largeです。

高さ

コントロールの絶対高さを設定します。 1in、5em、20pxなどの標準値を使用します。

Label Color

コントロールのラベルの色を指定します。

Label Size

コントロールのラベルのサイズを指定します。 使用できる値は、x-small、small、normal、large、およびx-largeです。

ノート: Panelコントロールの場合、標準テーマを使用すると、ラベル・サイズプロパティの値がオーバーライドされます。

Reset Inline Styles to Default

「Styling」タブで行ったスタイル設定の選択をすべて破棄し、設定をそのデフォルト値にリストアします。

Text Alignment

コントロール内のコンテンツの配置(左、右、または中央)を指定します。 このプロパティは、入力テキスト・コントロールなどのテキストにユーザーが入力できるコントロールに適用されます。

テーマ

CSSを使用してコントロールの書式を定義します。 このプロパティは、PanelコントロールとSectionコントロールに適用されます。

Panelコントロールの場合:

  • 標準: コントロール・ラベルのサイズを24ピクセル(フォント・サイズ)に自動的に拡大し、ラベルを太字(フォントの太さ)にします。 「標準」テーマは、「ラベル・サイズ」プロパティの値をオーバーライドします。

  • なし: コントロールに書式設定を適用しません。 「なし」がデフォルト値です。

セクション・コントロールの場合:

  • インデント: セクションを自動的にインデントします。 インデント・テーマを使用すると、セクション内のセクションを簡単にネストできます。

  • なし: コントロールに書式設定を適用しません。 「なし」がデフォルト値です。

幅

コントロールの絶対幅を設定します。 5in、20px、5%などの標準値を使用します。

CSSを使用したWebフォームのカスタマイズ

カスケード・スタイル・シート(CSS)を使用して、Webフォーム要素の外観をカスタマイズします。 カスタムCSSコードを使用して、要素の色、フォント、または余白などの視覚的な属性を変更します。

また、フォーム・エディタで使用可能なプロパティを使用して基本スタイルを適用して要素をフォームすることもできます。 スタイル設定プロパティを参照してください。 しかし、CSSを介して利用できるスタイリング・オプションは、より広範かつ具体的です。 次のトピックでは、すべてのフォーム要素とそれに対応するCSSセレクタについて説明します。 これらのセレクタは、色、フォント、配置などのいくつかのプロパティを変更することによってスタイルを設定できます。

トピック:

ノート:

このセクションでは、CSSの基本的な知識を前提としています。

フォーム・コンテナのスタイル設定

フォーム・コンテナに対応するセレクタを使用して、バックグラウンドや枠線などのフォーム全体に適用されるプロパティをスタイルできます。

次の図は、すべてのセレクタが記載されたサンプル・フォーム・コンテナを示しています:


css-form-container.pngの説明が続きます
図css-form-container.pngの説明
番号 セレクタ名 説明 サンプルCSSコード

1

.canvas

このセレクタは、フォームの最も外側のコンテナに対応します。 フォームの枠線、パディングなどのプロパティをスタイルするには、このセレクタを使用します。

.canvas { border: 5px solid #F6DDCC;}

2

.canvas__content

このセレクタを使用して、フォームのコンテンツ領域の枠線とバックグラウンドをスタイルします。 プロパティ・ペインでフォームのスタイリング・プロパティを変更した場合は、そのセレクタにスタイル(バックグラウンドまたは罫線)が適用されます。

ティップ: 適用されるスタイルをオーバーライドするには、CSSコードで!importantを使用します。

.canvas__content { background: #D7DBDD !important; border: 1px solid #D35400 !important; }

3

.row-control

このセレクタを使用して、フォーム内の行を識別します。

.row-control { border-bottom: 1px solid #D35400; }

4

.canvas__footer

このセレクタを使用して、フォームのフッターを指定します。

.canvas__footer { display: block; background: #5D6D7E; height: 10px; }

5

.canvas__header

このセレクタを使用して、フォームのヘッダーを指定します。

ノート: displayプロパティをblockに設定すると、ヘッダーとフッターが表示されます。

.canvas__header { display: block; background: #5D6D7E; height: 20px; }

形式フォーム・コントロール

対応するCSSセレクタを使用して、特定のコントロールのさまざまなコンポーネントのスタイルを設定できます。

コントロールのスタイリングのベスト・プラクティスは、コントロール・クラス名を定義することです。 スタイル設定プロパティを参照してください。 コントロール・クラス名は、CSSファイル内のコントロールを識別するためのもので、この名前をクラス名として使用して、そのクラス内のコントロールのセレクタを変更することができます。 「CSSを使用したスタイル・スタンプの制御」を参照してください。

次の表に、CSSを使用してスタイルを設定できるカスタマイズ可能なすべてのコントロールと関連セレクタを示します。

UIコントロール セレクタ 説明

ラベル(フォーム内のすべてのコントロールのタイトルまたはラベルに対応)

.oj-labelラベル

ラベルのスタイルを指定します。

.oj-label-required-icon

必須アイコンのスタイルを指定します。 色、余白、パディングなどのプロパティを適用できます。

.oj-label-required-icon:before

デフォルトの必須の記号であるアスタリスク(*)の代わりに新しい記号を指定します。

.oj-label-help-icon

ヘルプ・アイコンのスタイルを指定します。

.oj-label-help-icon:before

デフォルトのヘルプ・アイコン/記号の代わりに新しい記号を指定してください。

検証メッセージ

.oj-messaging-inline-container .oj-message.oj-message-error

検証メッセージ・コンテナのスタイルを指定します。

.oj-message-error-icon

検証エラー・アイコン・コンテナのスタイルを指定します。

.oj-message-error-icon::before

デフォルトのエラー・アイコン/記号の代わりに新しい記号を指定してください。

.oj-message-content

検証メッセージの内容のスタイルを指定します。

.oj-message-summary

検証メッセージのタイトルのスタイルを指定します。

.oj-message-detail

検証メッセージの詳細のスタイルを指定します。

InputText

.oj-inputtext-input

入力テキスト・コンテナのスタイルを指定します。

.oj-inputtext.oj-無効な入力

入力が無効な場合、入力テキスト・コンテナのスタイルを指定します。

.oj-inputtext input[disabled]

コントロールが無効なときに、入力テキスト・コンテナのスタイルを指定します。

.oj-inputtext input[readonly]

コントロールが読み取り専用の場合、入力テキスト・コンテナのスタイルを指定します。

TextArea

.oj-textarea textarea

テキスト・エリア・コンテナのスタイルを指定します。

.oj-textarea.oj-無効なテキスト・エリア

入力が無効な場合、テキスト・エリア・コンテナのスタイルを指定します。

.oj-textarea textarea[disabled]

コントロールが無効なときに、テキスト・エリア・コンテナのスタイルを指定します。

.oj-textarea textarea[readonly]

コントロールが読み取り専用である場合は、テキスト・エリア・コンテナのスタイルを指定します。

ボタン

.button-control.oj-button

Buttonコントロールのスタイルを指定します。

.button-control.oj-button[disabled]

ボタンが無効になっているときのボタンのスタイルを指定します。

.button-control.oj-button .oj-button-text

ボタン・テキストのスタイルを指定します。

.button-control.oj-button.oj-hover

ホバー上のボタンのスタイルを指定します(ボタン上にマウスを置いたとき)。

.button-control.oj-button.oj-active

ボタンがアクティブなときに、そのボタンのスタイルを指定します。

.button-control.oj-button.oj-focus

ボタンがフォーカスされているときのスタイルを指定します。

選択

.oj-select

コンテナの選択のスタイルを指定します。

.oj-select .oj-select-choice

選択した入力のスタイルを指定します。

.oj-select.oj-invalid .oj-select-choice

無効な選択入力のスタイルを指定します。

.oj-select.oj-disabled .oj-select-choice

無効な選択入力のスタイルを指定します。

.oj-select-open-icon

ドロップダウン・アイコン・コンテナのスタイルを指定します。

.oj-select-open-icon:before

デフォルトのドロップダウン・アイコン/記号の代わりに新しい記号を指定してください。

.oj-select-choices

複数選択が有効な場合のコンテナの選択のスタイルを指定します。

.oj-select-multi .oj-select-selected-choice

複数選択が有効な場合に、選択したオプションのスタイルを指定します。

.oj-select-multi .oj-select-selected-choice-label

選択したオプション・ラベルのスタイルを指定します。

.oj-select-multi .oj-select-clear-entry:before

選択したオプションのデフォルトのアイコン/記号の削除の代わりに新しい記号を指定します。

ブラウザを識別

.oj-identity

アイデンティティ・コンテナのスタイルを指定します。

.oj-identity-select

アイデンティティ入力のスタイルを指定します。

.oj-identity.oj-invalid .oj-select-choice

無効なアイデンティティ入力のスタイルを指定します。

oj-identity.oj-disabled .oj-select-choice

コントロールが無効のときにアイデンティティ入力のスタイルを指定します。

.oj-select-open-icon

ドロップダウン・アイコン・コンテナのスタイルを指定します。

.oj-select-open-icon:before

デフォルトのドロップダウン・アイコン/記号の代わりに新しい記号を指定してください。

.oj-select-choices

複数の選択が有効な場合、アイデンティティ・コンテナのスタイルを指定します。

.oj-select-multi .oj-select-selected-choice

複数選択が有効な場合に、選択したオプションのスタイルを指定します。

.oj-select-multi .oj-select-selected-choice-label

選択したオプション・ラベルのスタイルを指定します。

.oj-select-multi .oj-select-clear-entry:before

選択したオプションのデフォルトのアイコン/記号の削除の代わりに新しい記号を指定します。

チェックリストとチェックボックス

.oj-checkboxset

コントロール・コンテナのスタイルを指定します。

.oj-choice-row

各チェック・オプションのスタイルを指定します。

.oj-choice-row入力

各行のチェックボックスのスタイルを指定します。

.oj-choice-rowラベル

各行のラベルのスタイルを指定します。

.oj-checkboxset.oj-invalid .oj-checkbox:not(.oj-disabled)

無効なオプションのスタイルを指定します。

.oj-choice-row input[disabled]

無効なオプションのスタイルを指定します。

.oj-choice-row-inline

インライン・オプションのスタイルを指定します。

ラジオ・ボタン

.oj-radioset

コントロール・コンテナのスタイルを指定します。

.oj-choice-row

各オプションのスタイルを指定します。

.oj-choice-row入力

各行のラジオ・ボタンのスタイルを指定します。

.oj-choice-rowラベル

各行のラベルのスタイルを指定します。

.oj-radioset.oj-invalid .oj-radio:not(.oj-disabled)

無効なオプションのスタイルを指定します。

.oj-choice-row input[disabled]

無効なオプションのスタイルを指定します。

.oj-choice-row-inline

インライン・オプションのスタイルを指定します。

数値

.oj-inputnumber-wrapper

Numberコンテナのスタイルを指定します。

.oj-inputnumber入力

数値入力用のスタイルを指定します。

.oj-inputnumber.oj-無効な入力

無効な数値入力のスタイルを指定します。

.oj-inputnumber input[disabled]

コントロールが無効のときに入力される数値のスタイルを指定します。

.oj-inputnumber input[readonly]

コントロールが読み取り専用である場合に入力される数値のスタイルを指定します。

Date Time

.oj-inputdatetime-input-container

Date Timeコントロール・コンテナ全体のスタイルを指定します。

.oj-inputdatetime-input-container入力

日付時間コントロールの入力領域のスタイルを指定します。

.oj-inputdatetime-input-container input[disabled]

日付時間コントロールが無効になっているときのスタイルを指定します。

.oj-inputdatetime-input-container input[readonly]

読み取り専用の場合は、日付時間コントロールのスタイルを指定します。

.oj-inputdatetime-input-trigger

カレンダと時間アイコン・コンテナのスタイルを指定します。

.oj-inputdatetime-calendar-icon

カレンダ・アイコンのスタイルを指定します。

.oj-inputdatetime-calendar-icon:before

デフォルトのカレンダ・アイコン/記号の代わりに新しい記号を指定してください。

.oj-inputdatetime-time-icon

時間アイコンのスタイルを指定します。

.oj-inputdatetime-time-icon:before

デフォルトの時間アイコン/記号の代わりに新しい記号を指定してください。

日付

.oj-inputdatetime-date-only

以下のプロパティの前にこのセレクタを使用して、日付コントロールに固有のスタイリングを適用します。

.oj-inputdatetime-input-container

日付コントロール・コンテナ全体のスタイルを指定します。

.oj-inputdatetime-input-container入力

日付コントロールの入力領域のスタイルを指定します。

.oj-inputdatetime-input-container input[disabled]

Dateコントロールが無効になっているときのスタイルを指定します。

.oj-inputdatetime-input-container input[readonly]

読み取り専用の場合は、日付コントロールのスタイルを指定します。

.oj-inputdatetime-input-trigger

カレンダ・アイコン・コンテナのスタイルを指定します。

.oj-inputdatetime-calendar-icon

カレンダ・アイコンのスタイルを指定します。

.oj-inputdatetime-calendar-icon:before

デフォルトのカレンダ・アイコン/記号の代わりに新しい記号を指定してください。

時間

.oj-inputdatetime-time-only

以下のプロパティの前にこのセレクタを使用して、時間コントロールに固有のスタイリングを適用します。

.oj-inputdatetime-input-container

Timeコントロール・コンテナ全体のスタイルを指定します。

.oj-inputdatetime-input-container入力

時間コントロールの入力領域のスタイルを指定します。

.oj-inputdatetime-input-container input[disabled]

Timeコントロールが無効になっているときのスタイルを指定します。

.oj-inputdatetime-input-container input[readonly]

読み取り専用の場合は、Timeコントロールのスタイルを指定します。

.oj-inputdatetime-input-trigger

時間アイコン・コンテナのスタイルを指定します。

.oj-inputdatetime-time-icon

時間アイコンのスタイルを指定します。

oj-inputdatetime-time-icon:before

デフォルトの時間アイコン/記号の代わりに新しい記号を指定してください。

Eメール

.oj-inputtext-input

入力コンテナのスタイルを指定します。

.oj-inputtext.oj-無効な入力

入力が無効な場合は、入力コンテナのスタイルを指定します。

.oj-inputtext input[disabled]

コントロールが無効の場合、入力コンテナのスタイルを指定します。

.oj-inputtext input[readonly]

コントロールが読み取り専用である場合は、入力コンテナのスタイルを指定します。

URL

.oj-inputtext-input

入力コンテナのスタイルを指定します。

.oj-inputtext.oj-無効な入力

入力が無効な場合は、入力コンテナのスタイルを指定します。

.oj-inputtext input[disabled]

コントロールが無効の場合、入力コンテナのスタイルを指定します。

.oj-inputtext input[readonly]

コントロールが読み取り専用である場合は、入力コンテナのスタイルを指定します。

メッセージ

p, h1, h2, h3, h4, h5, h6

 これらのセレクタを使用して、そのタイプ(pまたはh1〜h6)に基づいてメッセージのスタイルを設定します。 コントロール・クラス名を使用して特定のものにします。

金額

.oj-inputnumber-wrapper

Moneyコンテナのスタイルを指定します。

.oj-inputnumber入力

金銭入力のスタイルを指定します。

.oj-inputnumber.oj-無効な入力

無効な金銭入力のスタイルを指定します。

.oj-inputnumber input[disabled]

コントロールが無効になっているときに貨幣入力のスタイルを指定します。

.oj-inputnumber input[readonly]

コントロールが読み取り専用である場合は、貨幣入力のスタイルを指定します。

電話

.oj-inputtext-input

入力コンテナのスタイルを指定します。

.oj-inputtext.oj-無効な入力

入力が無効な場合は、入力コンテナのスタイルを指定します。

.oj-inputtext input[disabled]

コントロールが無効の場合、入力コンテナのスタイルを指定します。

.oj-inputtext input[readonly]

コントロールが読み取り専用である場合は、入力コンテナのスタイルを指定します。

イメージ

.image-control

イメージ・コンテナのスタイルを指定します。

ビデオ

iframe[name=Video]

Videoコンテナのスタイルを指定します。

リンク

.anchorLink a

リンク・コンテナのスタイルを指定します。

パネル

特定のセレクタはありません

プロパティ・ペインのコントロール・クラス名を使用してセレクタを作成します。

セクションとモバイル・タブ

.oj-collapsible-header

セクション・ヘッダー・コンテナのスタイルを指定します。

.oj-collapsible-wrapper

セクション・ヘッダー・コンテンツのスタイルを指定します。

.oj-collapsible-header-icon.oj-collapsible-open-icon

セクションを開くアイコンのスタイルを指定します。

.oj-collapsible-header-icon.oj-collapsible-open-icon:before

デフォルトの開くアイコン/記号の代わりに新しい記号を指定してください。

.oj-collapsible-header-icon.oj-collapsible-close-icon

セクション・クローズ・アイコンのスタイルを指定します。

.oj-collapsible-header-icon.oj-collapsible-close-icon:before

デフォルトの閉じるアイコン/記号の代わりに新しい記号を指定してください。

.oj-collapsible-header p

ヘッダー・タイプのスタイルを指定: paragraph.

.oj-collapsible-header h1

.oj-collapsible-header h2

.oj-collapsible-header h3

.oj-collapsible-header h4

.oj-collapsible-header h5

.oj-collapsible-header h6

ヘッダー・タイプのスタイルを指定: タイトル1からタイトル6。

タブ

.tab-container

Tabsコンテナのスタイルを指定します。

.oj-tabs-tab

タブ・ヘッダーのスタイルを指定します。

.oj-tabs-tab.oj-selected

選択したタブ・ヘッダーのスタイルを指定します。

.oj-tabs-tab.oj-disabled

無効なタブ・ヘッダーのスタイルを指定します。

.oj-tabs-title

タブ・タイトルのスタイルを指定します。

.oj-tabs-panel

タブ・コンテンツのスタイルを指定します。

表

.table-container

表コンテナ全体のスタイル(ラベルを含む)を指定します。

.table-control

表のスタイルのみを指定します。

.oj-table-header

表ヘッダー・セクションのスタイルを指定します(thead)。

.oj-table-header-row

すべての表ヘッダー列(tr)を含む表ヘッダー行のスタイルを指定します。

.oj-table-column-header-cell

表列ヘッダー・コンテナ(th)のスタイルを指定します。

.oj-table-column-header-text

各列のテキストのスタイルを指定します。

.oj-table-body

すべてのアイテムを含む表本文のスタイルを指定します(tbody)。

.oj-table-body-row

表本文の各行のスタイルを指定します(tr)。

.table-cell

本文内の特定のセルのスタイルを指定します。

.table-cell.oj-selected

選択したセルのスタイルを指定します。

button.add

このセレクタを使用して、表内にボタンを追加します。

button.delete

このセレクタを使用して、表内のボタンを削除します。

繰返し可能セクション

.repeatable-section

Repeatable Sectionコンテナのスタイルを指定します。

button.add

このセレクタを使用して、繰り返し可能なセクション内にボタンを追加します。

button.delete

繰り返し可能なセクション内からボタンを削除するには、このセレクタを使用します。
CSSを使用したスタイル・スタンプの制御

基本的なスタイリングをコントロールに適用して、コントロール・クラスの名前とセレクタの使い方を理解しましょう。 次の図は、スタイリングが適用されていないInput Textコントロールを示しています:


css-inputtext.pngの説明が続きます
図css-inputtext.pngの説明

CSSを使ってこのコントロールにスタイリングを適用するには:
  1. フォーム・キャンバスでコントロールを選択します。
  2. プロパティ・ペインで、「スタイリング」タブを選択します。
  3. 次の図に示すように、コントロール・クラス名フィールドに、CSSファイル内のコントロールを識別する名前を入力します:
  4. 次に、CSSコードでこの名前を使用して、コントロールのプロパティまたはセレクタを変更します。 次のサンプル・コードは、コントロールのラベルのスタイリングを示しています: 
    .firstname .oj-label label { 
  font-size: 20px; 
  color: blue;
  }
  .firstname .oj-label-required-icon:before { 
  content: "#"; 
   }
  5. フォームのプロパティ・ペインからこのスタイル・シートをアップロードします。 カスタマイズされた入力テキスト・コントロールは、次のように表示されます:
  6. 同様に、このコントロールに関連する他のセレクタをカスタマイズすることもできます。 複数のクラス名をコントロールに適用することもできます。 さらに、同様のスタイルを必要とする他のコントロールと同じクラス名を再利用することもできます。

ノート:

セレクタのスタイルを定義するときにCSSコードにコントロール・クラス名を指定しないと、スタイルはセレクタを満たすすべてのコントロールに適用されます。

フォーム参照スタイル

参照によって別のフォームにフォームをインポートすると、インポートされたフォームに親フォームのスタイリングが自動的に適用されます。 この動作により、たとえ参照があっても、指定されたスタイルがフォームに対して強制されます。

インポートしたフォームのスタイリングを保持する場合は、子フォームのCSSコードを親フォームのCSSファイルに含めます。 また、コード内の対応するクラス名を使用して、インポートされたフォームのコントロールにスタイルを適用するようにしてください。

次の例は、インポートされたフォームのCSSコード(親クラスのCSSファイルに追加されたコントロール・クラス名)を示しています: 

.oj-label label { 
   color: blue; 
}
 .nominee .oj-label label { 
   color: brown; 
 }

結果のフォーム・スタイリングは次のように表示されます:


css-form-reference.pngの説明が続きます
図css-form-reference.pngの説明

ノート:

親フォームのCSSファイルで使用する前に、同じクラス名(この場合はnominee)を子フォームのコントロールに追加する必要があります。

インポートされたビジネス・タイプのスタイル設定

ビジネス・タイプ・パレットからビジネス・タイプをキャンバスにドラッグすると、ビジネス・タイプのデータ属性に基づいて一連のコントロールを含むセクションが作成されます。 CSSを介してフォームに定義されたすべてのスタイルは、コントロールのこの自動生成セクションにも適用されます。

スタイルの動的管理

イベント・ウィンドウからコントロールのスタイルを動的に管理できます。 イベントの詳細を知りたいですか? 「フォームへの動的動作の追加」を参照してください。

イベント・ウィンドウ内で、条件が満たされたときにクラス名をコントロールに追加または削除するアクションを指定できます。 割り当てられたクラス名に基づいて、実行中にコントロールのスタイリングが変更されます。 ダイナミックなスタイリングをよりよく理解するために、次の例を見てみましょう。

許可される値が60未満の任意の数値であるNumberコントロール(Age)を考えてみましょう。 次に、実行中にユーザーが入力した値に基づいてコントロールのスタイルを設定するイベントを作成します。
css-number.pngの説明が続きます
図css-number.pngの説明
  1. Webフォーム・エディタで、「期間」コントロールを選択し、プロパティ・ペインの「一般」タブで「イベント」オプションを探します。
  2. イベントを定義するには、「追加」アイコンをクリックします。
    イベント・フィールドは、コントロールで使用可能なイベント・オプションを示すドロップダウン・メニューに変わります。
  3. メニューから「変更時」オプションを選択します。
  4. イベント・ウィンドウでIf条件を定義して、コントロールの許容値を60未満に指定します。
  5. 次の図に示すように、条件のThenおよびElse部分のアクションを指定します。
    定義されたアクションは、ユーザーが入力した値に基づいてコントロールに適切なクラス名が適用されていることを確認します。 その後、CSSのクラス名用に定義されたスタイリングがコントロールに動的に適用されます。
    css-actions.pngの説明が続きます
    図css-actions.pngの説明
  6. この場合、CSSファイル内のクラス名のスタイリングを次のように定義できます: 
    .allowed .oj-inputnumber input {
color: green; 
}
.notallowed .oj-inputnumber input {
color: red; 
}
  7. ユーザーがコントロールに値を入力すると、次のようにスタイルが変更されます:

いくつかの便利なスタイルのヒント

ここでは、CSSを使ってフォームのスタイルを理解し、維持し、スケールするためのヒントとベスト・プラクティスを紹介します。

  • コントロール・クラス名の表記に従ってください。 クラス名を有益かつ可読にするために使用できるブロック要素修飾子(BEM)など、さまざまな命名規則があります。

  • 効果的に!important属性を使用してください。 この属性を使用すると、より高い特定性または優先度を持つスタイルを上書きできます。

  • アイコンやバックグラウンドには、SVG (Scalable Vector Graphics)イメージを使用します。 SVGイメージは、フォームが異なるデバイス上でレンダリングされるときの品質の低下を回避して、正確にスケールされます。

  • 「フロート、表示、フレックス」など、フォーム・レイアウトと動作を変更するプロパティは使用しないでください。

  • スタイリング・コントロールでは固定ディメンションを使用しないでください。 フォームのレイアウトはデバイスに基づいて変更され、その中のコンテンツは使用可能なスペースに調整されます。 入力テキスト・コントロールの幅が400ピクセルの固定値に設定されている場合、コントロールが電話で正しく表示されないことがあります。