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

注意

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

HTML5 のフォームはHTML5 機能を使用してレンダリングされ、レンダリングされたフォームのスタイル設定は CSS を使用しておこなわれます。 HTML5 フォームのデフォルトの外観は、PDFレンディションに似ています。 開発者は、カスタム CSS を使用して、HTML5 フォームのデフォルトの外観を変更できます。

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

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

pictures-002-small

フォームのスタイル設定

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

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

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

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

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

    HTML5 フォーム内の特定のコンポーネントに対して作成する CSS クラスについては、 スタイルの概要.

  3. プロファイルレンダラーにスタイルシートを含める

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

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

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

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

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

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

このページ