アプリケーションの設計


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

スタイルシートのリソースを新規に作成するには
1 設計ペインで [共有リソース] を展開します。

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

3 [新規スタイルシートリソース] をクリックします。[参照] ダイアログボックスが開きます。拡張子が CSS のファイルのみ表示されます。

4 使用するカスケードスタイルシートを検索して、選択します。

5 [開く] をクリックして、スタイルシートのリソースの一覧に選択したスタイルシートを追加します。[スタイルシートリソースのプロパティ] インフォボックスが開き、スタイルシートの名前または他のプロパティを変更できます。

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

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

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

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

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

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

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

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

スタイルシートのリソースを編集するには
1 設計ペインで [共有リソース] を展開します。

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

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

4 次のいずれかを実行します。

スタイルシートのリソースを更新するには
共有リソースとしてコピーしたファイルを更新するには、スタイルシートのリソースを更新します。

1 設計ペインで [共有リソース] を展開します。

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

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

4 [更新] をクリックします。[開く] ダイアログボックスが表示されます。

5 CSS ファイルを選択してスタイルシートのリソースを更新し、[開く] をクリックします。スタイルシートのリソースが更新されます。

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


次のキーを使用して、表を読み取ります。
次のことに注意が必要です。
プロパティの一覧文書

<Body>

レイヤー

<DIV>

パラグラフ

<P>

リスト項目

<LI>

<TABLE>

セル

<TD>

図形

<IMG>

background-color[はい][はい]N/SN/S[はい][はい]N/A
background-imageN/SN/SN/AN/A
background-repeatN/SN/SN/AN/A
border-bottom-widthN/AN/A[はい][はい][はい][はい][はい]
border-color shorthandN/AN/A[はい][はい][はい][はい][はい]
border-left-widthN/AN/A[はい][はい][はい][はい][はい]
border-right-widthN/AN/A[はい][はい][はい][はい][はい]
border shorthandN/AN/A[はい][はい][はい][はい][はい]
border-style shorthandN/AN/A[はい][はい][はい][はい][はい]
border-top-widthN/AN/A[はい][はい][はい][はい][はい]
border-top-colorN/AN/A[はい][はい][はい][はい][はい]
border-top-styleN/AN/A[はい][はい][はい][はい][はい]
border-width shorthandN/AN/A[はい][はい][はい][はい][はい]
color[はい][はい][はい][はい][はい][はい][はい]
font-family[はい][はい][はい][はい][はい][はい][はい]
font-size[はい][はい][はい][はい][はい][はい][はい]
font-style[はい][はい][はい][はい][はい][はい][はい]
font-weight[はい][はい][はい][はい][はい][はい][はい]
heightN/A[はい]N/AN/AN/AN/AN/A
leftN/A[はい]N/AN/AN/AN/AN/A
margin-bottomN/AN/A[はい][はい][はい]N/A[はい]
margin-leftN/AN/A[はい][はい][はい]N/A[はい]
margin-rightN/AN/A[はい][はい][はい]N/A[はい]
margin shorthandN/AN/A[はい][はい][はい]N/A[はい]
margin-topN/AN/A[はい][はい][はい]N/A[はい]
padding-bottomN/AN/A[はい][はい][はい]N/A[はい]
padding-leftN/AN/A[はい][はい][はい]N/A[はい]
padding-rightN/AN/A[はい][はい][はい]N/A[はい]
padding shorthandN/AN/A[はい][はい][はい]N/A[はい]
padding-topN/AN/A[はい][はい][はい]N/A[はい]
positionN/A[はい]N/AN/AN/AN/AN/A
text-decoration[はい][はい][はい][はい][はい][はい][はい]
topN/A[はい]N/AN/AN/AN/AN/A
widthN/A[はい]N/AN/AN/AN/AN/A
z-indexN/A[はい]N/AN/AN/AN/AN/A

関連項目