内容 (What's Covered)

この文書では、Adobe Dreamweaver で CSS を利用してドキュメントを作成する方法について説明します。

A. CSS とは

CSS(Cascading Style Sheet:カスケーディングスタイルシート) とは、Web ページでのコンテンツの外観を制御するフォーマットルールの集合です。CSS スタイルを使用してページのフォーマットを設定し、コンテンツとプレゼンテーションを分離します。

ページのコンテンツ(HTML コード)は HTML ファイル自体に格納され、コードのプレゼンテーションを定義する CSS ルールは他のファイル(外部スタイルシート)または HTML ドキュメントの他の部分(通常は head セクション)に格納されます。コンテンツとプレゼンテーションを分離することにより、変更を加えたいときにすべてのページのすべてのプロパティを更新する必要がないので、共通の場所からのサイトの外観の維持が簡単に行えるようになります。

CSS ルールは次の場所に置くことができます。

  • 外部 CSS スタイルシート : 外部の CSS(.css)ファイル(HTML ファイルではありません)に保存されている CSS ルールの集まりです。このファイルは、ドキュメントの head セクションのリンクまたは @import ルールを使用して、Web サイト内のページにリンクされます。複数のページにリンクすることも可能です。
  • 内部(または、埋め込み)CSS スタイルシート : HTML ドキュメントの head 部分の style タグに記述される CSS ルールの集まりです。
  • インラインスタイル : HTML ドキュメント内の特定のタグインスタンス内で定義されます(インラインスタイルの使用はお勧めしません)。

B. CSS の作成と管理

Dreamweaver では、CSS を使用して、統一感のあるページを正確かつ柔軟に作成することができます。

CSS ルールは、外部 CSS スタイルシート(.css ファイル)として保存することも、内部 CSS スタイルシートやインラインスタイルで利用することが可能です。

B-1. CSS スタイルパネル

CSS の作成と管理は、CSS スタイルパネルで一括して行うことができます。

CSS スタイルパネルでは、現在選択されているページエレメントに影響する CSS ルールとプロパティのトラッキング(「現在」モード)や、ドキュメントに使用できるすべてのルールとプロパティのトラッキング(「すべて」モード)が可能です。パネルの最上部にある切り替えボタンを使用して、2 つのモードを切り替えます。また、「すべて」と「現在」のどちらのモードも、CSS スタイルパネルで CSS プロパティを修正することが可能です。

B-2. CSS スタイルの設定

  1. Dreamweaver を起動し、既存のドキュメントを開くか、新規作成します。

  2. CSS スタイルパネルが表示されていない場合は、ウィンドウ/CSS スタイル を選択して表示します。

  3. CSS スタイルパネルで、「新規 CSS ルール」ボタンをクリックします。

  4. 新規 CSS ルール ダイアログボックスで、作成する CSS ルールのセレクタータイプを指定します。

    • クラス : 任意の HTML エレメントに class 属性として適用できるカスタムスタイルを作成します。
    • ID : 特定の ID 属性を指定したタグに適用されるフォーマットを定義します。
    • タグ : 特定の HTML タグに設定されている初期設定のフォーマットを再定義します。
    • 複合 : 同時に複数のタグ、クラス、ID に影響を及ぼす複合ルールを定義します。
  5. セレクター名を入力します(セレクタータイプで「タグ」を選択した場合は、選択することも可能です)。

  6. ルールを定義する場所として次のいずれかを選択し、「OK」をクリックします。

    • 既にドキュメントに関連付けられているスタイルシートにルールを配置するには、そのスタイルシートを選択します。
    • 外部スタイルシートを作成するには、「新規スタイルシートファイル」を選択します。
    • 現在のドキュメントにスタイルを埋め込むには、「このドキュメントのみ」を選択します。
  7. CSS ルール定義 ダイアログボックスで、新しい CSS ルールに設定するスタイルのオプションを選択し、「OK」をクリックします。

    ※ まずカテゴリを選択し、各スタイルに値を設定します。また、スタイルは複数設定することができます。以下の例では背景色の設定をしています。

     

  8. CSS スタイルパネルおよびドキュメントのコードに設定した CSS が追加されます。

    CSS の編集や管理は CSS スタイルパネルで一括して行えます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー