アプリケーションの設計

共有リソースとしてスタイルシートを作成する
カスケードスタイルシート (CSS) を使用すると、ヘッダー、リンク、テキスト、フォント、スタイル、色、余白などページレイアウトのさまざまな要素を制御できます。カスケードスタイルシート (CSS) に対応するローカルのファイルシステムを参照して、スタイルシートを共有リソースとしてページ、フォーム、またはサブフォームに挿入できます。

スタイルシートのリソースを新規に作成するには

1. アプリケーションナビゲータで [リソース] を展開します。

2. リソースの一覧から [スタイルシート] を選択します。

3. [新規スタイルシート] をクリックします。[スタイルシートリソースのプロパティ] インフォボックスが開き、スタイルシートの名前およびスタイルシート保存先のアプリケーションを設定できます。

スタイルシートのリソースをページ、フォーム、またはサブフォームに挿入するには

1. ページ、フォーム、またはサブフォームを開きます。

2. スタイルシートを挿入する位置にカーソルを合わせます。HTML ヘッダーにスタイルシートを挿入するには、プログラムペインを開き、HTML Head Content イベントを選択してスクリプトエリアをクリックします。

3. [作成] - [リソース] - [リソースの挿入] を選択します。[リソースの挿入] ダイアログボックスが表示されます。

4. スタイルシートが含まれているデータベースを選択します。デフォルトでは、現在のデータベースが選択されています。

5. リソースの種類から [スタイルシート] を選択します。

6. [有効なリソース] セクションで、追加するスタイルシートのリソースをハイライト表示にします。

7. [OK] をクリックします。

8. (省略可能) 挿入したスタイルシートのリソースの名前を表示したり、他のスタイルシートのリソースに変更するには、[スタイルシート] - [スタイルシートのプロパティ] を選択します。スタイルシートのリソースの名前が記入された [スタイルシートのプロパティ] インフォボックスが表示されます。別のスタイルシートのリソースを選択するには、[フォルダの参照] をクリックします。

スタイルシートのリソースを編集するには

1. アプリケーションナビゲータで [リソース] を展開します。

2. リソースの一覧から [スタイルシート] を選択します。

3. スタイルシートのリソースを選択します。

4. [プログラムを指定して開く] をクリックして、エディタを選択し、スタイルシートのリソースを開く。

JavaScript コントロールのスタイルを定義する

JavaScript コントロールのデフォルトのスタイルは、以下に示す Lotus Domino サーバー上のカスケードスタイルシート (CSS) によって定義されます。


この「\data\domino\js\dojo」は、Lotus Domino データディレクトリ配下の Dojo ディレクトリを示しています。このファイルを変更する場合は、十分に注意してください。

サポートされている CSS プロパティの一覧

次の表は、IBM(R) Lotus Domino Designer(R) がサポートしているカスケードスタイルシートのプロパティを示したものです。HTML タグは、IBM(R) Lotus Notes(R) に自動的にマップされます。たとえば、次のタグは、Lotus Notes に自動的にマップされます。


次のキーを使用して、表を読み取ります。
次の点に注意してください。
プロパティの一覧文書
<Body>		レイヤー
<DIV>		パラグラフ
<P>		リスト項目
<LI>		表
<TABLE>		セル
<TD>		図形
<IMG>
background-color[はい][はい]N/SN/S[はい][はい]なし
background-imageN/SN/Sなしなし
background-repeatN/SN/Sなしなし
border-bottom-widthなしなし[はい][はい][はい][はい][はい]
border-color shorthandなしなし[はい][はい][はい][はい][はい]
border-left-widthなしなし[はい][はい][はい][はい][はい]
border-right-widthなしなし[はい][はい][はい][はい][はい]
border shorthandなしなし[はい][はい][はい][はい][はい]
border-style shorthandなしなし[はい][はい][はい][はい][はい]
border-top-widthなしなし[はい][はい][はい][はい][はい]
border-top-colorなしなし[はい][はい][はい][はい][はい]
border-top-styleなしなし[はい][はい][はい][はい][はい]
border-width shorthandなしなし[はい][はい][はい][はい][はい]
color[はい][はい][はい][はい][はい][はい][はい]
font-family[はい][はい][はい][はい][はい][はい][はい]
font-size[はい][はい][はい][はい][はい][はい][はい]
font-style[はい][はい][はい][はい][はい][はい][はい]
font-weight[はい][はい][はい][はい][はい][はい][はい]
heightなし[はい]なしなしなしなしなし
leftなし[はい]なしなしなしなしなし
margin-bottomなしなし[はい][はい][はい]なし[はい]
margin-leftなしなし[はい][はい][はい]なし[はい]
margin-rightなしなし[はい][はい][はい]なし[はい]
margin shorthandなしなし[はい][はい][はい]なし[はい]
margin-topなしなし[はい][はい][はい]なし[はい]
padding-bottomなしなし[はい][はい][はい]なし[はい]
padding-leftなしなし[はい][はい][はい]なし[はい]
padding-rightなしなし[はい][はい][はい]なし[はい]
padding shorthandなしなし[はい][はい][はい]なし[はい]
padding-topなしなし[はい][はい][はい]なし[はい]
positionなし[はい]なしなしなしなしなし
text-decoration[はい][はい][はい][はい][はい][はい][はい]
topなし[はい]なしなしなしなしなし
widthなし[はい]なしなしなしなしなし
z-indexなし[はい]なしなしなしなしなし

関連項目