4.13.11 HTMLパーツの記述例
HTMLパーツの記述例を次に示します。
- メモ
-
データストアプラグイン,または開発者が開発した入出力プラグインを使用すると,ソースコードを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="" />