5.4.7 HTMLパーツを配置する

ユーザが入力したソースコードをHTMLコンテンツとしてガイド領域に表示できます。ガイド領域に表を表示したいときなどにお使いください。

ここでは,HTMLパーツを配置する手順,および[属性の設定]画面について説明します。

<この項の構成>
(1) 手順
(2) [属性の設定]画面の項目
(3) 使用できるHTMLタグ
(4) CSSの使用方法
(5) HTMLパーツ使用時の注意事項
(6) HTMLパーツの使用例

(1) 手順

  1. [Guide]パレットの[図データ]([HTML]ボタン)をクリックします。
    [図データ]([HTML]ボタン)が選択されます。
  2. ガイド領域の任意の場所をクリックします。
    HTMLパーツが配置されます。

    [図データ]

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

    [図データ]

(2) [属性の設定]画面の項目

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

図5-19 [属性の設定]画面(HTMLパーツから表示させた場合)

[図データ]

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

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

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

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

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

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

(c) [キャンセル]ボタン

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

(3) 使用できるHTMLタグ

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

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

項番HTMLタグ属性
1Aclass,style,title,href,name,target("_blank"だけ指定可)
2BRclass,style,title
3CAPTIONclass,style,title
4COLclass,style,title,span
5COLGROUPclass,style,title,span
6DIVclass,style,title
7IMGclass,style,title,alt,src
8INPUTclass,style,title,checked,disabled,maxlength,name,readonly,size,type("text","checkbox","radio","hidden"を指定可),value
9OPTGROUPclass,style,title,disabled,label
10OPTIONclass,style,title,disabled,label,selected,value
11SELECTclass,style,title,disabled,name
12SPANclass,style,title
13TABLEclass,style,title
14TBODYclass,style,title
15TDclass,style,title,colspan,rowspan
16TEXTAREAclass,style,title,cols,disabled,name,readonly,rows
17TFOOTclass,style,title
18THclass,style,title,colspan,rowspan
19THEADclass,style,title
20TRclass,style,title
ここで示すHTMLタグ以外のHTMLタグを使用した場合の動作は保証されません。見映えなどの設定には,CSSを使用することを推奨します。

(4) CSSの使用方法

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

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

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

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

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

項番クラス名対応するタグと属性対応するガイドパーツ
1ucnp_text<INPUT type="text" />
2<TEXTAREA>
3ucnp_text_readonly<INPUT type="text" readonly/>
4<TEXTAREA readonly>
5ucnp_checkbox_radio<INPUT type="checkbox" />チェックボックス
6<INPUT type="radio" />
7ucnp_select<SELECT>
8ucnp_anchor<A>ハイパーリンク
(凡例)
-:対応するガイドパーツはありません。

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


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

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

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

項番分類プロパティ補足
1color
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
6min-width
7max-width
8height
9min-height
10max-height
11line-height
12vertical-align
13視覚効果overflow
14ボックス・モデルmargin次のプロパティを設定できます。まとめて定義できます。
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
15padding次のプロパティを設定できます。まとめて定義できます。
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
16border-width次のプロパティを設定できます。まとめて定義できます。
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
17border-color次のプロパティを設定できます。まとめて定義できます。
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
18border-style次のプロパティを設定できます。まとめて定義できます。
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
19border次のプロパティを設定できます。まとめて定義できます。
  • border-top
  • border-right
  • border-bottom
  • border-left
20caption-side
21table-layout
22border-collapse
23border-spacing
24empty-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ファイルを作成する場合の注意事項を次に示します。

(5) HTMLパーツ使用時の注意事項

(6) HTMLパーツの使用例

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