共有リソースとしてスタイルシートを作成する

このタスクについて

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

親トピック: ページの設計
関連資料:
ページの設計
フォームを設計する

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

手順

  1. アプリケーションナビゲータで [リソース] を展開します。
  2. リソースの一覧から [スタイルシート] を選択します。
  3. [新規スタイルシート] をクリックします。[スタイルシートリソースのプロパティ] インフォボックスが開き、スタイルシートの名前とスタイルシート保存先のアプリケーションを設定できます。

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

手順

  1. ページ、フォーム、またはサブフォームを開きます。
  2. スタイルシートを挿入する位置にカーソルを合わせます。HTML ヘッダーにスタイルシートを挿入するには、プログラムペインを開き、HTML Head Content イベントを選択してスクリプトエリアをクリックします。
  3. [作成] - [リソース] - [リソースの挿入] を選択します。[リソースの挿入] ダイアログボックスが表示されます。
  4. スタイルシートが含まれているデータベースを選択します。デフォルトでは、現在のデータベースが選択されています。
  5. リソースの種類から [スタイルシート] を選択します。
  6. [有効なリソース] セクションで、追加するスタイルシートのリソースをハイライト表示にします。
  7. [OK] をクリックします。
  8. オプション: 挿入したスタイルシートのリソースの名前を表示したり、他のスタイルシートのリソースに変更するには、[スタイルシート] - [スタイルシートのプロパティ] を選択します。スタイルシートのリソースの名前が記入された [スタイルシートのプロパティ] インフォボックスが表示されます。別のスタイルシートのリソースを選択するには、[フォルダの参照] をクリックします。

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

手順

  1. アプリケーションナビゲータで [リソース] を展開します。
  2. リソースの一覧から [スタイルシート] を選択します。
  3. スタイルシートのリソースを選択します。
  4. [プログラムを指定して開く] をクリックして、エディタを選択し、スタイルシートのリソースを開く。

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

このタスクについて

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

domino¥data¥domino¥js¥dojo¥ibm¥domino¥widget¥layout¥css¥domino-default.CSS

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

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

このタスクについて

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

BODY {Font-Family: Arial; Color: Blue}

次のキーを使用して、表を読み取ります。

[はい] は、プロパティがサポートされていることを示します。

[N/A] は、プロパティを利用できないことを示します。

[N/S] は、プロパティがサポートされていないことを示します。

次の点に注意してください。

  • スタイルシートのリソースのプロパティセットが要素のプロパティインフォボックスで設定したプロパティと競合する場合は、前者が優先されます。
  • 境界線上部の色と境界線の色は、要素の 4 隅すべてに適用されます。
  • 境界線上部のスタイルと境界線のスタイルは、要素の 4 隅すべてに適用されます。
  • イメージの場合、color、font-weight、font-style、font-size、font-family、text-decoration の各プロパティがイメージのキャプションに適用されます。
  • 可視のプロパティはほとんどサポートされていないため、表に一覧表示されません。値を非表示にしたり省略表示する場合は、<DIV> タグのみサポートされます。

プロパティの一覧

Document

<Body>

レイヤー

<DIV>

段落

<P>

リスト項目

<LI>

表

<TABLE>

セル

<TD>

図形

<IMG>

background-color

[はい]

[はい]

N/S

N/S

[はい]

[はい]

なし

background-image

    

N/S

N/S

なし

  

なし

background-repeat

    

N/S

N/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

なし

[はい]

なし

なし

なし

なし

N/A

left

なし

[はい]

なし

なし

なし

なし

なし

margin-bottom

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

margin-left

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

margin-right

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

margin shorthand

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

margin-top

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

padding-bottom

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

padding-left

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

padding-right

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

padding shorthand

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

padding-top

なし

なし

[はい]

[はい]

[はい]

なし

[はい]

position

なし

[はい]

なし

N/A

なし

なし

なし

text-decoration

[はい]

[はい]

[はい]

[はい]

[はい]

[はい]

[はい]

top

なし

[はい]

なし

なし

なし

なし

なし

width

なし

[はい]

なし

なし

なし

なし

なし

z-index

なし

[はい]

なし

なし

なし

なし

なし