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

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

Webページのスタイルを制御するには、カスケード・スタイルシートをアップロードして参照します。

カスケード・スタイルシートについて
カスケード・スタイルシート(CSS)によって、開発者は、構造を変更せずにWebページのスタイルを制御できます。
ページ・テンプレートのアップロードされたカスケード・スタイルシートの参照
ページ・テンプレートのヘッダー・セクション内でアップロードされたカスケード・スタイルシートを参照できます。

11.4.1 カスケード・スタイルシートについて

カスケード・スタイルシート(CSS)によって、開発者は、構造を変更せずにWebページのスタイルを制御できます。

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

ヒント:

アプリケーションでユニバーサル・テーマ - 42を使用する場合、テーマ・スタイルを利用し、テーマ・ローラーでアプリケーションの外観を更新することもできます。「テーマ・スタイルの使用」および「テーマ・ローラー」ダイアログの使用」を参照してください。

カスケード・スタイルシートのアップロードについて

ワークスペース内の特定のアプリケーションで使用するために、またはすべてのアプリケーションで使用するために、ファイル(CSSファイルを含む)をアップロードできます。詳細は、「静的アプリケーション・ファイルの管理」および「静的アプリケーション・ファイルの管理」を参照してください。

親トピック: カスタム・カスケード・スタイルシートの使用

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

アップロードされたカスケード・スタイルシートは、ページ・テンプレートのヘッダー・セクション内で参照できます。

ヘッダー・セクションを使用して、HTMLドキュメントの<HEAD>セクションを構成するHTMLを入力します。

アップロードされたカスケード・スタイルシートを参照するには:

テーマ・ページにナビゲートします。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. 「共有コンポーネント」をクリックします。
4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
テーマ・ページが表示されます。
テーマを選択します。
「タスク」リストで、「テンプレートの表示」をクリックします。
編集するページ・テンプレートの名前を選択します。
「ヘッダー」セクション内の<link>タグを使用して、適切なスタイルシートを参照します。
特定のアプリケーションに関連付けられたアップロード済ファイルを参照するには、置換文字列#APP_FILES#を使用します。たとえば:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#APP_FILES#sample2.css" type="text/css">
</head>
...
```
特定のワークスペースに関連付けられたアップロード済ファイルを参照するには、置換文字列#WORKSPACE_FILES#を使用します。たとえば:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#WORKSPACE_FILES#sample3.css" type="text/css">
</head>
...
```