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

検索
Experience Manager 6.3 Forms マニュアル
対象アプリケーション: Experience Manager 6.3 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

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

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

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

 

Pictures-002-small

フォームのスタイル設定

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

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