4.13.11　HTMLパーツの記述例

(1)　HTMLパーツで外部CSSを使用する場合

［属性の設定］画面の［HTMLソース文字列］テキストボックスへの入力例（外部CSSファイルを作成する場合）を，次に示します。

• HTMLソース文字列の入力例

  <table class="sample">
    <caption class="sample">注文管理表</caption>
    <thead>
      <tr>
        <th class="sample">注文番号</th>
        <th class="sample">注文日</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sample">00001-20101010-00001</td>
        <td class="sample">2010/10/10</td>
      </tr>
      <tr>
        <td class="sample">00001-20101010-00002</td>
        <td class="sample">2010/10/10</td>
      </tr>
    </tbody>
    <tfoot />
  </table>

• 外部CSSファイルの作成例

  table.sample {
      border:1px solid #777777;
      border-collapse:collapse;
      border-spacing:0;
      background-color:#ffffff;
  }
  caption.sample {
      font-size:14px; font-weight:bold;
  }
  th.sample {
      border-right:1px solid #777777;
      border-bottom:1px solid #777777;
      background-color:#e3e5e7;
      padding:0.3em 1em;
      text-align:center;
  }
  td.sample {
      border-right:1px solid #777777;
      border-bottom:1px solid #777777;
      padding:0.3em 1em;
  }

• HTMLコンテンツの表示例

  

ページの先頭へ

(2)　HTMLパーツでパラメタを使用する場合（パラメタを{{param}}形式で埋め込むとき）

［属性の設定］画面の［HTMLソース文字列］テキストボックスへの入力例および変換例（パラメタ名を{{param}}形式で埋め込む場合）を，次に示します。

• ［パラメタ一覧］で定義しているパラメタ名の例

  パラメタ名	パラメタ値
  caption	表の説明1
  title	タイトル1
  detail1	内容1

• HTMLソース文字列の入力例

<table border="1">
  <caption>{{caption}}</caption>
  <tr>
    <td>タイトル</td>
    <td>{{title}}</td>
  </tr>
  <tr>
    <td>内容1</td>
    <td>{{ detail1 }}</td>
  </tr>
  <tr>
    <td>内容2</td>
    <td>{{ detail2 }}</td>
  </tr>
</table>

• HTMLソース文字列の変換例

<table border="1">
  <caption>表の説明1</caption>
  <tr>
    <td>タイトル</td>
    <td>タイトル1</td>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容1</td>
  </tr>
  <tr>
    <td>内容2</td>
    <td></td>
  </tr>
</table>

ページの先頭へ

(3)　HTMLパーツでパラメタを使用する場合（パラメタを{{{param}}}形式で埋め込むとき）

［属性の設定］画面の［HTMLソース文字列］テキストボックスへの入力例および変換例（パラメタ名を{{{param}}}形式で埋め込む場合）を，次に示します。

この例では，パラメタ値がファイルパスのため，パラメタ名を{{{param}}}形式で埋め込むことで，パラメタ値に含まれるHTML特殊記号（& < > " ' / ` =）をエスケープしないようにしています。

• ［パラメタ一覧］で定義しているパラメタ名の例

  パラメタ名	パラメタ値
  img_url	/ucnpuserstaticfiles/img1.png

• HTMLソース文字列の入力例

<img src="{{{img_url}}}" style="{{{img_style}}}" />

• HTMLソース文字列の変換例

<img src="/ucnpuserstaticfiles/img1.png" style="" />

ページの先頭へ