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

HTML5 フォームは HTML5 機能の使用によりレンダリングされ、レンダリングされるフォームのスタイル設定は CSS の使用によって実行されます。HTML5 フォームのデフォルトの外観は、その PDF レンダリングに似ています。開発者はカスタム CSS を使用して、HTML5 フォームのデフォルトの外観を変更できます。

この記事では、HTML5フォームのスタイルを変更するための詳細手順を説明します。スタイルの概要記事には、HTML5フォームの様々なスタイル設定に関する詳細が記載されています。 この記事に記載されている手順を実行する前に、「スタイルの概要」記事を必ずお読みください。

次の 2 つの画像はデフォルトのスタイルとカスタマイズされたスタイルの違いを示しています。

フォームのスタイル設定

1. カスタムスタイルを追加するプロファイルの選択

   URLでCRX DEインターフェイスにアクセスします。https://<server>:<port>/crx/de​を作成し、プロファイルを作成するか、既存のプロファイルを選択します。 プロファイルの作成方法について詳しくは、新しいプロファイルの作成を参照してください

2. HTML5 フォームのスタイル設定用の CSS スタイルシートの作成

   プロファイルレンダラーを作成したフォルダーに移動し、CSS スタイルシートファイルを作成します。次の手順に従います。

   1. フォルダーを右クリックして、メニューから​作成／ファイルを作成​を選択します。

   HTML5 フォームにある特定のコンポーネントに対してどの CSS クラスを作成するかについて詳しくは、「スタイルの概要」を参照してください。

3. Profile Renderer にスタイルシートを追加する

   CRX DE でプロファイルレンダラーページ（jsp ファイル）を開き、CSS ファイルを XFA クライアントライブラリのすぐ下にあるページに含めます。次の手順を実行して、CSS ファイルをプロファイルに含めます。

   1. レンダラーページで次の行を検索します。

      <cq:includeClientLib categories="xfaforms.profile" />

   2. 次の行を上記の行の下に挿入して、スタイルシートを含めます。

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>

   3. ファイルを保存します。