WebページへのCSSファイルのリンク

コンポーネント・パレット、アプリケーション・ナビゲータまたはWindowsファイル・システムから外部Cascading Style Sheetファイルをドラッグ・アンド・ドロップして、HTMLページまたはJSPページにリンクできます。リンク・コードがWebページのヘッダー領域に自動的に挿入され、構造ウィンドウの表示にCSSファイルが追加されます。

コンポーネント・パレットでは、JDeveloper付属のCSSファイル(blaf.cssOracle.cssJDeveloper.css)、またはコンポーネント・パレット内を右クリックして「コンポーネントの追加」を選択し、「Cascading Style Sheetの追加」ダイアログを起動することによって追加したファイルをリンクできます。

CSSファイルをコンポーネント・パレットからHTMLページまたはJSPページにリンクするには、次のようにします。

  1. ビジュアル・エディタで、CSSファイルのリンク先となるWebページを開きます。
  2. メイン・メニューから「表示」 次の選択 「コンポーネント・パレット」を選択します。
  3. コンポーネント・パレットで、ドロップダウン・リスト・ボックスからCSSリストを選択します。
  4. 目的のCSSファイルをWebページにドラッグします。

    <link rel="stylesheet" type="text/css" href="css/ filename.css" media="screen"/>のようなリンク・コードがWebページのヘッダー領域に挿入されます。

作成したファイルやプロジェクトに追加したファイルを使用して、CSSファイルをアプリケーション・ナビゲータから直接リンクすることもできます。プロジェクトへの既存CSSファイルの追加の詳細は、「既存のプロジェクトへの既存のファイルの追加方法」を参照してください。

CSSファイルをアプリケーション・ナビゲータからHTMLページまたはJSPページにリンクするには、次のようにします。

  1. ビジュアル・エディタで、CSSファイルのリンク先となるWebページを開きます。
  2. 「アプリケーション・ナビゲータ」から、プロジェクト内の目的のCSSファイルを選択します。CSSファイルは「ViewController」 次の選択 「Webコンテンツ」 次の選択 「CSS」にあります。
  3. CSSファイルをWebページにドラッグします。

    <link rel="stylesheet" type="text/css" href="css/ filename.css" media="screen"/>のようなリンク・コードがWebページのヘッダー領域に挿入されます。

Windowsオペレーティング環境では、デスクトップまたはエクスプローラ・ファイル・システムからCSSファイルをリンクできます。

Windows環境でCSSファイルをリンクするには、次のようにします。

  1. ビジュアル・エディタで、CSSファイルのリンク先となるWebページを開きます。
  2. CSSファイルをデスクトップまたはエクスプローラ・ファイル・システムからWebページにドラッグします。

    <link rel="stylesheet" type="text/css" href="css/ filename.css" media="screen"/>のようなリンク・コードがWebページのヘッダー領域に挿入されます。

    注意: サポートされているWindows環境の詳細は、<jdev_install>¥jdev¥install.htmlにある「JDeveloperのインストレーション・ガイド」を参照してください。

複数のCSSファイルのリンク

複数のCSSファイルをHTMLページまたはJSPページに追加できます。カスケード順序は最後に挿入されたCSSファイルに基づきます。複数のCSSファイルのカスケード順序を変更する場合は、次のいずれかを行います。


Cascading Style Sheetの作成
CSSセレクタのプロパティと値の設定または変更
コード・インサイトを使用したCSSファイルの編集

JDeveloperでのCSSサポートについて