CSS デザイナーは、CSS ファイル、ルール、設定済みプロパティおよびメディアクエリーを「視覚的に」作成できる総合パネルです。ここでは、CSS ファイルを新規作成し、CSS デザイナーパネルを使用して、CSSを記述していく方法を案内します。

注意:

CSS に関する詳細については、[Creative Cloud 入門] CSS の概要を参照してください。

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

  1. Dreamweaver でサイト内の既存のページを開くか、または新規作成します。

    注意:

    サイトの定義について、詳しくは「[Creative Cloud 入門] サイトの定義について(Dreamweaver CC)」を参照してください。

  2. CSS デザイナーパネルを表示します。表示されていない場合は、ウインドウ/CSS デザイナーを選択します。

  3. CSS デザイナーパネルのソースセクションにあるをクリックして、「新規 CSS ファイルを作成」を選択します。

  4. 新規 CSS ファイルを作成 ダイアログボックスが表示されたら、「参照」ボタンをクリックします。

  5. スタイルシートファイルを別名で保存 ダイアログボックスが表示されたら、「保存する場所」を選択し、「ファイル名」を入力したら「保存」ボタンをクリックします。

  6. 新規 CSS ファイルを作成 ダイアログボックス が再び表示されたら、「OK」をクリックします。

  7. CSS デザイナーパネルにCSSファイルが追加され、ソースコードのhead内にリンクが生成されました。

メディアクエリーの定義

CSS デザイナーパネルでメディアクエリーを定義することができます。メディアクエリーとは、認識した端末によって CSS ファイルを指定でき、ブラウザーによってメディアクエリーを確認して Web ページの表示に反映されます。メディアクエリーについて、詳しくは「メディアクエリーの作成」を参照してください。

セレクターの追加

CSS の命令を適用させる、HTMLの属性(タグ)や要素のことを選択(セレクト)した部分をセレクターといいます。

セレクターセクションにあるをクリックして、セレクターを入力し、Enter キーを押せば追加します。

プロパティの追加

CSS の具体的な命令内容をプロパティといいます。

CSS デザイナーには「レイアウト」、「テキスト」、「ボーダー」、「背景」、「その他」の5つのプロパティカテゴリーがあります。カテゴリーを選択するとプロパティ候補が命令内容を視覚的に分かりやすく、表示します。

ここでは例として body セレクターに背景のプロパティ(命令)を指定します。

  1. セレクターを選択します。

  2. 「レイアウト」、「テキスト」、「ボーダー」、「背景」、「その他」のカテゴリーから目的のものを選択します。

    ※ここでは例として「背景」を選択します。

  3. プロパティを選択して、値を入力、または選択します。

    ※ここでは例として、「background-color: #EEFDD0; 」を設定します。

  4. Enter キーを押し、値を決定すれば、CSS が記述されます。

    以上で、手順は完了です。

記述したCSSは太文字表示するので、どのセレクターになんのプロパティが記述されているか一目で分かり、後々の変更による編集も効率的に行うことができます。

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

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