13.3 カスタム・カスケード・スタイルシートの使用

カスケード・スタイルシート(CSS)によって、構造を変更せずにWebページのスタイルを制御できます。CSSを適切に使用すると、カラー、余白、フォントなどの視覚属性がHTMLドキュメントの構造から切り離されます。Oracle Application Expressのテーマには、独自のCSSを参照するテンプレートを含めることができます。特定のテーマの各CSSで定義されたスタイル・ルールによって、レポートおよびリージョンの表示も指定されます。

内容は次のとおりです。

カスケード・スタイルシートのアップロード
ページ・テンプレートのアップロードされたカスケード・スタイルシートの参照

13.3.1 カスケード・スタイルシートのアップロード

カスケード・スタイルシートをワークスペースにアップロードするには、カスケード・スタイルシート・リポジトリを使用します。アップロードされたカスケード・スタイルシート(CSS)は、ワークスペースに作成されたすべてのアプリケーションで使用できます。カスケード・スタイルシートは、ファイル・システムに書き込まれるため、HTMLソース・コードで参照できます。

カスケード・スタイルシートをアップロードするには、次のステップを実行します。

「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「共有コンポーネント」をクリックします。

共有コンポーネント・ページが表示されます。
「ファイル」で、「カスケード・スタイルシート」を選択します。

カスケード・スタイルシート・ページが表示されます。
「レポートの表示」アイコンをクリックします。「カスケード・スタイルシート・ページについて」を参照してください。

レポートが表示されます。
CSSをアップロードするには、「作成」をクリックして、画面に表示されるステップに従います。
既存のCSSを編集するには、CSSの名前を選択します。
既存のCSSをダウンロードするには、「ダウンロード」アイコンをクリックします。

13.3.1.1 カスケード・スタイルシート・ページについて

CSSを CSSリポジトリにアップロードした後、検索バーで選択して、ページの表示方法を制御します。使用可能なコントロールは次のとおりです。

「検索」アイコン: 虫めがねに似ています。このアイコンをクリックして、検索を特定の列のみに絞ります。すべての列を検索するには、「すべての列」を選択します。
テキスト領域: 大/小文字を区別しない検索基準(ワイルドカード文字は暗黙的に定義される)を入力し、「実行」をクリックします。
「実行」ボタン: 検索を実行したり、フィルタを適用します。
アイコンの表示: 各カスケード・スタイルシートを大きいアイコンとして表示します。
レポートの表示: 各カスケード・スタイルシートをレポート内の1行として表示します。
アクション・メニュー: アクション・メニューを表示します。このメニューを使用して、レポート・ビューをカスタマイズします。「「アクション」メニューについて」を参照してください。

13.3.2 ページ・テンプレートのアップロードされたカスケード・スタイルシートの参照

ページ・テンプレートのヘッダー・セクション内でアップロードされたカスケード・スタイルシートを参照できます。ヘッダー・セクションを使用して、HTMLドキュメントの<HEAD>セクションを構成するHTMLを入力します。

アップロードされたカスケード・スタイルシートを参照するには、次のステップを実行します。

「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「共有コンポーネント」をクリックします。
「ユーザー・インタフェース」で、「テーマ」を選択します。

テーマ・ページが表示されます。
「タスク」リストで、「テンプレートの表示」をクリックします。
編集するページ・テンプレートの名前を選択します。
「ヘッダー」セクション内の<link>タグを使用して、適切なスタイルシートを参照します。

特定のアプリケーションに関連付けられたアップロード済ファイルを参照するには、置換文字列#APP_IMAGES#を使用します。次に例を示します。
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#APP_IMAGES#sample2.css" type="text/css">
</head>
...
```
特定のワークスペースに関連付けられたアップロード済ファイルを参照するには、置換文字列#WORKSPACE_IMAGES#を使用します。次に例を示します。
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#sample3.css" type="text/css">
</head>
...
```