そのため、ピクセルとパーセント値の寸法を組み合わせて使用する場合は特に、計算が困難になることがあります。パディングとボーダーは、要素のサイズに本来含まれる部分であると考えることができます。ページレイアウトをコントロールしやすくするために、多くのプロのwebデザイナーはスタイルシートの先頭に、要素の幅と高さにパディングとボーダーを含めるように定める2つの簡単なスタイルルールを追加します。このルールは非常に役立ちます。Dreamweaverのスニペットパネルでルールを保存しておけば、他のwebサイトのスタイルにも挿入できます。

1. コード内をクリックし、行2に空白行を作成して、/*幅と高さの計算を簡易化*/ と入力します。CSSでは/*と*/に挟まれた文字はコメントとして扱われるため、入力したテキストは単にコードの内容を表すリマインダーの役割を果たします。
   

2. 新しい行を作成し、html に続けて開き波括弧（{）を入力します。スタイルルールは、1つのセレクターに続けて波括弧で囲んだプロパティと値のペアを入力して構成します。最も単純なタイプのセレクターは、HTMLタグです。どのwebページでも最上位の要素は であるため、html はページ内のすべての要素に影響するCSSセレクターです。
   

3. 波括弧の直後でEnterキーまたはReturnキーを押します。波括弧のペアが作成されるとともに次の行へインデントされ、CSSプロパティのコードヒントがポップアップ表示されます。box と入力します。入力するにつれて、コードヒントがフィルタリングされ、すべての有効なプロパティから一致するテキスト（プロパティ名の途中の文字も含む）が検索されます（図4を参照）。

1. 必要なプロパティがbox-sizing であるとします。矢印キーまたはマウスを使用して、コードヒント内でそのプロパティを選択し、EnterキーまたはReturnキーを押します。プロパティ名が自動補完され、最後にコロン（:）とスペースが付加されます。コードヒントが再度ポップアップ表示されます。リストからborder-box を選択し、行の最後にセミコロン（;）を付加します。

2. 閉じ波括弧( } )の下に新しい行を作成し、以下のスタイルルールを作成します。

1. スニペットパネル（デザインワークスペースのファイルパネルにドッキングされている）を開き、CSS_Snippets フォルダーを選択します（図5を参照）。

1. コードビューで、作成したコメントと2つのスタイルルールを選択し、右クリックして、コンテキストメニューから「新規スニペットの作成 」を選択します（図6を参照）。

1. 「名前」フィールドにBox-sizing: border-box と入力します。「説明」に「幅と高さに、paddingとborderを含める」 と入力します。「スニペットの種類」で「ブロックの挿入 」ボタンを選択します。「プレビュータイプ 」はデフォルトの「コード 」のままにしておきます。パネルが図7のようになります。

スタイルシートにこのスニペットを組み込むと、全体の寸法に影響することなく、要素のパディングとボーダーを調整できます。

スニペットはCreative Cloudと同期できます。スニペットの使用方法 について詳しくは、オンラインドキュメントを参照してください。

ブラウザーはそれぞれに設定されたデフォルトのフォントで文字を表示します。CSS font-family プロパティを使用してフォントを選択できますが、通常、選択できるフォントはサイトを表示するために使用しているデバイスで使用可能なフォントに制限されます。ページとともにダウンロードしたwebフォントを使用すると、この制限が適用されません。Dreamweaver内からは、Adobeがホストする多数の無料webフォントにアクセスできます。最初に、Dreamweaver内でそれらのフォントを有効にする必要があります。

1. Source Sans Proというフォントを探しているとします。検索フィールドに名前の入力を開始すると、候補となるフォントに絞り込まれます。Source Sans Pro をクリックします。チェックマークは、フォントが選択されていることを示します（図9を参照）。

Edge Web Fontsが個人の設定フォルダーにインストールされ、Dreamweaverで作成するすべてのサイトで使用できるようになります。

コードヒントを使用すると、コードビューでスタイルルールをすばやく作成できる点については、既に説明しました。Dreamweaverにはさらに、CSSデザイナーというパネルがあり、これを使用すると、ライブビューで変更状態を確認しながらページのスタイルを設定できます。このセクションでは、CSSデザイナーを使用して、基本的なスタイルをresponsive.cssに追加し、それらのスタイルがindex.htmlへどう反映されるかを確認します。

パネルの境界をドラッグして広げるとCSSデザイナーのレイアウトを2カラム構成にすることができ、プロパティペインがデザインワークスペースの右側に表示されます。小型のモニターを使用する場合は、パネルグループの端をドラッグして縮めると、1カラムレイアウトに変更できます。

スタイルルールを新規作成するときには、通常、パネル上部にある「すべて 」ボタンが選択されている状態にしておきます。

各ペインの役割は次のとおりです。

1. 上部にある「レイアウト」セクションに、マージンプロパティを設定するためのビジュアルツールが表示されます。ここではこのツールは使用せず、「ショートハンドを設定 」をクリックして、編集可能なフィールドを開き、0 と入力します。EnterキーまたはReturnキーを押して、編集を確認します。
   
   デフォルトで設定されていたマージン（8px ）が削除されライブビューの表示内容がわずかに左上に移動することがわかります。
   
   プロパティペインのmargin プロパティが太字で表示され、このプロパティが設定されたことが示されます。また、ビジュアルツールで各サイドの値が0 に設定されています（図12を参照）。

1. プロパティペインの上部にあるテキストアイコン をクリックして、テキストプロパティのセクションに移動します。最初にリストされているcolor プロパティは、テキストのカラーを設定します。このプロジェクトのすべてのカラーは、パート1でインストールしたCCライブラリ内にあります。
   

2. color プロパティのカラーボックスをクリックし、カラーピッカーを開きます。
   

1. font-family の右側をクリックして、一般的に使用されるフォントスタックのメニューを開きます。既にインストールしてあるAdobe Edge Web Fontsを選択します。一番下にリストされているsource-sans-pro がこのフォントに該当します（図14を参照）。

1. font-style の値（normal）には問題はありませんが、font-weight の値（200）は本来はextra-lightの幅値です。
   
   200 をクリックして、フォントの太さを選択できるメニューを開き、normalの値である400 を選択します（図15を参照）。

1. font-size の横をクリックすると、フォントに適用できる単位とキーワードのメニューが開くため、em を選択します（図16を参照）。

1. プロパティペインの上部にある背景 アイコンをクリックして、背景プロパティに移動します。
   

2. 今回は、カラーピッカーを使用してbackground-color プロパティを設定する代わりに、CCライブラリパネルで薄青色のカラースウォッチをクリックします（図17を参照）。そうすると、16進表記のカラーがクリップボードにコピーされます。

1. プロパティパネルの右上にある「セットを表示 」チェックボックスをオンにして、ページ本文に設定したすべてのCSSプロパティを確認します（図18を参照）。

CSSデザイナーの各種セクションに共通しているプロパティを選択すると、CSSに対する理解を深めることができます。CSSについて既によくご存じの場合は、プロパティと値の設定方法のみを習得することができます。この操作は、プロパティペインの下部にある「その他 」セクションでおこないます。コードヒントを使えば、入力をスピーディーにおこなえます。それでは操作を試してみましょう。この操作を初めておこなう場合でも、以下の手順に従って確実に操作を実行できます。

これで、テキストが入力された白地の背景の領域がドキュメントの左右中央に表示されました。ドキュメントウィンドウの幅が1000pxより広い場合は、本文の薄青色の背景が両端に表示されます。ページの上部には不自然な隙間があり、テキストはwrapperの

ピクセルとは、コンピューターディスプレイを形成する小さなドットのことです。初期のwebでは、1px は1つのドットと同じサイズでした。技術が進歩するにつれ、ドットのサイズは徐々に小さくなりました。CSSはこの変化を予想していました。単位として使用されるピクセルは、デバイスの画面で使用される物理的なピクセルのサイズに依存しません。そのため、wrapper

サイトの外観は徐々に改善されてきましたが、まだ対処すべきことは数多くあります。次のステージでは、上下左右に生ずるスペースの問題を解決し、レスポンシブな画像でページを装飾します。