第6章

CSSエディタ

この章では、Novell exteNd Directorの開発環境で提供されている、CSSファイルを操作するための機能について説明します。 この章のトピックは次のとおりです。

• CSSについて

• 開発環境でのCSS

• CSSファイルの作成と表示

• CSSエディタの使用

• ［CSSスタイルマネージャ］ダイアログボックスの使用

CSSについて

CSS (Cascading Style Sheets)は、Webドキュメント(HTML、XHTML、およびXMLファイルなど)にスタイル(フォント、色、およびスペースなど)を適用するためのメカニズムです。 ドキュメントに適用するスタイルを指定するには、「スタイルシート」を定義します。 スタイルシートは、ドキュメントに埋め込むことも、「CSSファイル」として別個に保存してドキュメントに添付することもできます。 CSSファイルには、1つのスタイルシートを複数のドキュメントで再利用できるという利点があります。

    CSSの標準の詳細については、www.w3.org/Style/CSSを参照してください。

スタイルシートの内容   スタイルシートは、ドキュメントの特定の部分とそれらに適用されるスタイルを識別する「ルール」で構成されます。 一般的なルールは、次のとおりです。

  .glossaryitem {font-weight: bold; color: slategray;}

このルールの意味は次のとおりです。

• .glossaryitemは、ドキュメント内のエンティティのクラスを指定する「セレクタ」を表します。このルールは、該当するエンティティにのみ適用されます。 CSSには複数のセレクタがあり、スタイルを適用する対象を柔軟に選ぶことができます。

• font-weightは、設定するスタイルの「プロパティ」を表します。 CSSにはさまざまなプロパティがあり、スタイルの各側面を制御できます。

• boldは、プロパティに設定する「値」を表します。

ドキュメント内の特定のエンティティに対して、スタイルシート内の複数のルールを適用することができます。 この場合、適用するルールで定義されているスタイルは、「カスケード」されて、エンティティの複数のプロパティに影響を与えます。

スタイルシートのサンプル   次のスタイルシートでは、複数のルールが定義されています。これらのルールでは、スタイルを設定する対象や方法を指定するために、さまざまなセレクタやプロパティが使用されています。

  body {margin-top: 0pt;}
  
  h1 
    {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 0pt;
    margin-bottom: 9pt;
    padding-top: 0pt;
    padding-bottom: 0pt;
    }
  
  p, ol, ul, dl, dt, dd, table, td, th, select, input 
    {
    font-size: 8pt;
    font-family: verdana, arial, helvetica, sans-serif;
    }  
  
  p.tablepara 
    {
    padding-top: 0pt;
    padding-bottom: 0pt;
    margin-top: 1pt;
    margin-bottom: 1pt;
    }
  
  .glossaryitem {font-weight: bold; color: slategray;}
  
  #title 
    {
    position: absolute;
    top: 25px;
    left: 4px;
    width: 208px;
    visibility: visible
    }

開発環境でのCSS

exteNd Directorの開発環境では、CSSを操作するために次のツールが提供されています。

• CSS (スタイルシート)ファイルを作成するための「CSSファイルウィザード」

• CSSファイルを確認および編集するための「CSSエディタ」

• CSSのスタイル設定が必要な場合に他のexteNd Directorツールからアクセスできるダイアログボックス「CSSスタイルマネージャ」

CSSファイルの作成と表示

新しいCSSファイルを作成することも、既存のファイルを使用することもできます。

新規CSSファイルを作成する

1. ［ファイル］>［新規］>［ファイル］の順に選択します。

2. ［ポートレット］タブで［CSSファイル］を選択します。

3. 空白のCSSファイルを作成するには、［ウィザードを使用する］をオフにして、［OK］をクリックします。 空のCSSファイルが作成され、CSSエディタに表示されます。

   CSSファイルウィザードを使用するには、［ウィザードを使用する］をオンにして、［OK］をクリックします。 CSSファイルウィザードが表示されます。 次の手順に従って、ウィザードで作業を進めます。

4. CSSファイルの「名前」を指定します。

5. スタイルシートの機能を指定するために、どの「ウィザードページ」を表示するかを選択します。

   • テンプレート

   • ボキャブラリ

   • 基本的な外観

   • ボタンの外観

   • リンクの外観

   • 見出しの外観

   ウィザードページを選択することで、現時点で指定するスタイルシートの機能だけに注意を向けることができます(他の機能も後でCSSエディタを使用して指定できます)。

6. ［次へ］をクリックします。

7. CSSファイルの「場所」を指定し、［次へ］をクリックします。

8. 選択したページがウィザードによって順番に表示されます。 各ページに入力して、［次へ］をクリックします。

9. 最後のページの入力を終えたら、［完了］をクリックします。

   CSSエディタが表示され、新規CSSファイルが開かれます。

CSSファイルを開く

1. ［ファイル］>［開く］の順に選択します。

2. ［開く］ダイアログボックスでCSSファイルを選択し、［開く］をクリックします。

   ファイル拡張子は.CSSである必要があります。 選択したファイルがCSSエディタで開かれ、メニューバーに［CSSエディタ］メニューが表示されます。

CSSエディタの使用

CSSエディタでは、CSSファイルを操作する2つのビューが提供されています。

• ［CSSビュー］タブでは、スタイルシートをグラフィカルな方法で開発および確認できます。次のことができます。

  • スタイルシートの「ルール」のリストの操作

  • ルールの「セレクタ」の指定

  • ルールの「プロパティ」の設定

• ［ソースビュー］タブでは、CSSコードを直接確認したり編集したりする場合に使用できるソースエディタが表示されます。 ソースビューは、XMLエディタのソースビューと同じ標準テキスト編集機能を提供します(詳細については、を参照してください。)。

次に、CSSエディタのCSSビューを使用して簡単なスタイルシートを開発する例を示します。

［CSSスタイルマネージャ］ダイアログボックスの使用

CSSスタイルマネージャは、XMLファイルやXHTMLファイルの編集中など、CSSのスタイル設定が必要な場合に他のexteNd Directorツールからアクセスできるダイアログボックスです。 このダイアログボックスでは、次の操作を行うことができます。

• 新規または既存のスタイルシートの「添付」

• スタイルシートの「切り離し」

• スタイルシートの「編集」(ダイアログボックス内で行うか、またはCSSエディタを開いて行います)

Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved.  more ...