ユーザが入力したソースコードをHTMLコンテンツとしてガイド領域に表示できます。ガイド領域に表を表示したいときなどにお使いください。
ここでは,HTMLパーツを配置する手順,および[属性の設定]画面について説明します。
[属性の設定]画面を次の図に示します。
図5-19 [属性の設定]画面(HTMLパーツから表示させた場合)
[属性の設定]画面の項目について説明します。
HTMLパーツに表示させるコンテンツのソースコードを入力します。デフォルトでは「HTML」が表示されます。
次の場合はエラーになります。
クリックすると,[属性の設定]画面で入力された内容がパーツに設定されて,[属性の設定]画面が閉じます。
クリックすると,[属性の設定]画面が閉じます。この場合,画面で入力した内容は設定されません。
使用できる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パーツでCSSを使用するには次の方法があります。
これらの方法を組み合わせて使用した場合の表示は,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属性の指定は不要です。
各要素のstyle属性でスタイルを定義する場合,および外部CSSファイルを作成する場合に使用できるCSSプロパティを次に示します。ここに示していないCSSプロパティを使用したときの動作は保証されません。
表5-7 使用できるCSSプロパティ
項番 | 分類 | プロパティ | 補足 |
---|---|---|---|
1 | 色 | color | - |
2 | 背景 | background | 次のプロパティを設定できます。まとめて定義できます。
|
3 | テキスト | text-align | - |
4 | フォント | font | 次のプロパティを設定できます。まとめて定義できます。
|
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 | 次のプロパティを設定できます。まとめて定義できます。
|
15 | padding | 次のプロパティを設定できます。まとめて定義できます。
| |
16 | border-width | 次のプロパティを設定できます。まとめて定義できます。
| |
17 | border-color | 次のプロパティを設定できます。まとめて定義できます。
| |
18 | border-style | 次のプロパティを設定できます。まとめて定義できます。
| |
19 | border | 次のプロパティを設定できます。まとめて定義できます。
| |
20 | 表 | caption-side | - |
21 | table-layout | - | |
22 | border-collapse | - | |
23 | border-spacing | - | |
24 | empty-cells | - |
外部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)」を参照してください。
外部CSSファイルを作成する場合の注意事項を次に示します。
HTMLパーツの使用例を次に示します。
<table class="sample"> |
table.sample { |