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ページにドラッグします。

ページのヘッダー領域にリンク・コードが挿入されます。次に例を示します。

<f:view>
     <af:document id="d1">
       <af:form id="f1">
         <af:commandButton text="commandButton 1" id="cb1"/>
         <af:calendar id="c1"/>
         <af:commandButton text="commandButton 2" id="cb2"/>
         <af:commandButton text="commandButton 3" id="cb3"/>
       </af:form>
       <link type="text/css" rel="stylesheet" href="css/test1.css"/>
       <link type="text/css" rel="stylesheet" href="css/new.css"/>
       <link type="text/css" rel="stylesheet" href="css/blaf.css"/>
     </af:document>    
   </f:view>


作成したファイルやプロジェクトに追加したファイルを使用して、CSSファイルをアプリケーション・ナビゲータから直接リンクすることもできます。詳細

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

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

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

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

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

ページのヘッダー領域にリンク・コードが挿入されます。次に例を示します。

   <f:view>
     <af:document id="d1">
       <af:form id="f1">
         <link type="text/css" rel="stylesheet" href="C:\test11x.css"/>
       </af:form>
     </af:document>    
   </f:view>

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

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

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


HTMLページの操作
Webページおよび設計ツールの操作
JSPページの操作
スクリプト言語の操作