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

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

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

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

pictures-002-small

フォームのスタイル設定

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

    URLでCRXDEインターフェイスにアクセスします。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. ファイルを保存します。

このページ