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

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

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

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

フォームのスタイル設定

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

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

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

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

   1. フォルダーを右クリックして、メニューから「作成／ファイルを作成」を選択してください。

   2. 「ファイルを作成」ダイアログで、スタイルシートの名前を入力します。拡張子 .css を必ず使用してください (例： stylesheet.css)。

   3. ナビゲーションペインから、作成した CSS ファイルを開きます。

   4. スタイル設定するコンポーネントの CSS クラスを定義し、それらのクラスにスタイルを追加します。

   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. ファイルを保存します。

Business.Adobe.com リソース

Style System Personalized Experiences Document Generation Managed Cloud Digital Asset Management Content Management System