1. ［Guide］パレットの（［HTML］ボタン）をクリックします。
   （［HTML］ボタン）が選択されます。
   
2. ガイド領域の任意の場所をクリックします。
   HTMLパーツが配置されます。
   

   

3. HTMLパーツの任意の場所をダブルクリックします。
   ［属性の設定］画面が表示されます。
   
4. ソースコードを入力します。
   ［属性の設定］画面の各項目の詳細は，「(2)　［属性の設定］画面の項目」を参照してください。
   
5. ［更新］ボタンをクリックします。
   入力したソースコードがHTMLコンテンツとして表示されます。
   

   

［属性の設定］画面を次の図に示します。

図5-19　［属性の設定］画面（HTMLパーツから表示させた場合）

［属性の設定］画面の項目について説明します。

(a)　［HTMLソース文字列］テキストボックス

HTMLパーツに表示させるコンテンツのソースコードを入力します。デフォルトでは「HTML」が表示されます。

次の場合はエラーになります。

• 65,535文字を超える文字列を入力した場合
• ASCIIコードの0x00〜0x08，0x0B〜0x0C，0x0E〜0x1Fまたは0x7Fを含む文字列を入力した場合

注意事項

• HTML 4.01（厳密型）の文書型定義に従ってソースコードを入力してください。この文書型定義に基づいていない場合の動作は保証されません。
• ［属性の設定］画面ではタブを入力できません。タブを使用したい場合は，任意のテキストファイルなどに入力したソースコードをコピーして貼り付けてください。
• 入力内容はサニタイズされません。
• CSSを使用してフォントサイズを指定する場合は，128ピクセル以下を設定してください。128ピクセルより大きい数値を指定すると，Webブラウザの動作が著しく遅くなるおそれがあります。

(b)　［更新］ボタン

クリックすると，［属性の設定］画面で入力された内容がパーツに設定されて，［属性の設定］画面が閉じます。

(c)　［キャンセル］ボタン

クリックすると，［属性の設定］画面が閉じます。この場合，画面で入力した内容は設定されません。

使用できるHTMLタグと属性を次に示します。

表5-5　HTMLパーツで使用できるHTMLタグと属性

項番	HTMLタグ	属性
1	A	class，style，title，href，name，target（"_blank"だけ指定可）
2	BR	class，style，title
3	CAPTION	class，style，title
4	COL	class，style，title，span
5	COLGROUP	class，style，title，span
6	DIV	class，style，title
7	IMG	class，style，title，alt，src
8	INPUT	class，style，title，checked，disabled，maxlength，name，readonly，size，type（"text"，"checkbox"，"radio"，"hidden"を指定可），value
9	OPTGROUP	class，style，title，disabled，label
10	OPTION	class，style，title，disabled，label，selected，value
11	SELECT	class，style，title，disabled，name
12	SPAN	class，style，title
13	TABLE	class，style，title
14	TBODY	class，style，title
15	TD	class，style，title，colspan，rowspan
16	TEXTAREA	class，style，title，cols，disabled，name，readonly，rows
17	TFOOT	class，style，title
18	TH	class，style，title，colspan，rowspan
19	THEAD	class，style，title
20	TR	class，style，title

注

ここで示すHTMLタグ以外のHTMLタグを使用した場合の動作は保証されません。見映えなどの設定には，CSSを使用することを推奨します。

HTMLパーツでCSSを使用するには次の方法があります。

• ナビゲーション プラットフォームが提供するCSSを利用する。
• 各要素のstyle属性でスタイルを定義する。
• 外部CSSファイルを作成する。

これらの方法を組み合わせて使用した場合の表示は，CSSの仕様に準拠します。

(a)　ナビゲーション プラットフォームが提供するCSSのクラス名

ナビゲーション プラットフォームが提供するCSSを利用するには，各要素のclass属性で次のクラス名を指定してください。

表5-6　ナビゲーション プラットフォームが提供するCSSのクラス名

項番	クラス名	対応するタグと属性	対応するガイドパーツ
1	ucnp_text	<INPUT type="text" />	−
2		<TEXTAREA>	−
3	ucnp_text_readonly	<INPUT type="text" readonly/>	−
4		<TEXTAREA readonly>	−
5	ucnp_checkbox_radio	<INPUT type="checkbox" />	チェックボックス
6		<INPUT type="radio" />	−
7	ucnp_select	<SELECT>	−
8	ucnp_anchor	<A>	ハイパーリンク

（凡例）

−：対応するガイドパーツはありません。

注　固定テキストおよび画像は，class属性の指定は不要です。

(b)　ユーザがスタイルを定義する場合に使用できるCSSプロパティ

各要素のstyle属性でスタイルを定義する場合，および外部CSSファイルを作成する場合に使用できるCSSプロパティを次に示します。ここに示していないCSSプロパティを使用したときの動作は保証されません。

表5-7　使用できるCSSプロパティ

項番	分類	プロパティ	補足
1	色	color	−
2	背景	background	次のプロパティを設定できます。まとめて定義できます。 background-color background-image background-repeat background-attachment background-position
3	テキスト	text-align	−
4	フォント	font	次のプロパティを設定できます。まとめて定義できます。 font-family font-style font-weight font-size
5	視覚フォーマットモデル	width	−
6		min-width	−
7		max-width	−
8		height	−
9		min-height	−
10		max-height	−
11		line-height	−
12		vertical-align	−
13	視覚効果	overflow	−
14	ボックス・モデル	margin	次のプロパティを設定できます。まとめて定義できます。 margin-top margin-right margin-bottom margin-left
15		padding	次のプロパティを設定できます。まとめて定義できます。 padding-top padding-right padding-bottom padding-left
16		border-width	次のプロパティを設定できます。まとめて定義できます。 border-top-width border-right-width border-bottom-width border-left-width
17		border-color	次のプロパティを設定できます。まとめて定義できます。 border-top-color border-right-color border-bottom-color border-left-color
18		border-style	次のプロパティを設定できます。まとめて定義できます。 border-top-style border-right-style border-bottom-style border-left-style
19		border	次のプロパティを設定できます。まとめて定義できます。 border-top border-right border-bottom border-left
20	表	caption-side	−
21		table-layout	−
22		border-collapse	−
23		border-spacing	−
24		empty-cells	−

（凡例）

−：補足説明はありません。

(c)　外部CSSファイルの格納先

外部CSSファイルは，一つのシステムに一つだけ作成できます。

作成したCSSファイルは，Webサーバのコンテンツ格納先ディレクトリに格納します。ファイルパスは，Webサーバのコンテンツ格納先ディレクトリを基点として，ユーザプロパティファイル（ucnp_user.properties）のucnp.base.server.htmlpart.cssプロパティで指定したパスに格納してください。ucnp.base.server.htmlpart.cssプロパティの詳細は「7.4.4(14)　HTMLパーツで使用するCSSファイルのパス（ucnp.base.server.htmlpart.css）」を参照してください。

(d)　外部CSSファイルを作成する場合の注意事項

外部CSSファイルを作成する場合の注意事項を次に示します。

• クラスセレクタは，必ず「要素名.セレクタ名」の形式で定義してください。要素名，ピリオドおよびセレクタ名は省略できません。この形式で定義されていない場合の動作は保証しません。
  例えば「div.css_sample」と定義した場合，divタグのclass属性に「css_sample」と指定することで，定義したCSSを使用できます。
  
• クラスセレクタの接頭辞に次の文字列を使用しないでください。
  
  • ucnp
  • hptl
  • access
• HTMLパーツから外部CSSファイルへの参照は，自動で設定されます。ユーザが<LINK>タグを設定する必要はありません。

• 業務コンテンツに悪意のある第三者がアクセスできる状態だと，HTMLパーツを悪用してクロスサイトスクリプティングを起こすようなスクリプトが埋め込まれるおそれがあります。業務編集画面にアクセスするためのURLを不特定多数のユーザに教えないなど，不正なアクセスを防いでください。業務編集画面にアクセスするためのURLについては，「4.1　ナビゲーション プラットフォームの画面にアクセスするためのURL」を参照してください。
• HTMLパーツで大きな表やコンテンツを作成すると，処理対象のデータサイズが大きくなるため，ナビゲーション プラットフォームの動作が遅くなることがあります。
• 同じガイド領域内では，HTMLタグに指定するname属性を重複させないでください。

HTMLパーツの使用例を次に示します。

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

  <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コンテンツの表示例