機能

パディング

マージン

背景

要素の背景は、パディングにも拡張されます

親要素の背景が透けて見えます

ボーダー

パディングはボーダーの内側

マージンはボーダーの外側

相殺

相殺されません

隣接するマージンと相殺されます

padding とmargin はどちらも要素の周囲の空白を増やしますが、margin は少し違う動作になります。

図2では、2つの要素が上下に並んでいます。最初の要素の下margin は20px で、2番目の要素の上マージンは30px です。

それに対して、パディングは相殺されません。この例で、下マージンと上マージンを同じ大きさのパディングで置き換えると、この2つの要素は50px 離れます。

パート4で作成したスタイルルールでは、bodyとwrapper

見出しのデフォルトの上マージンがwrapper

の0 という上マージンと結合されたことで、

見出しに設定される上マージンによってwrapperがページの上端から押し下げられます。マージンによって生ずる隙間では常に親要素の背景が透けて見えるので、本文の薄青色の背景色が表示されます。それに対して、パディングは相殺されません。また、要素の背景はパディングにも拡張されます。この特徴を使用して問題を解決しましょう。まずは、論より証拠です。

ページ上端の間隔に関する問題を解決するには、主見出しの上マージンを、同じ大きさのパディングに置き換える必要があります。同時に、他の見出しのスタイルを設定します。

見出しはメインの本文より濃いグレーになり、太字ではなくなります。

これにより、見出しの上下に、マージンではなくパディングによって間隔をあけることができました。背景として親要素(wrapper)に設定されている白色が用いられるため、上部に生じていた薄青色の帯を消すことができました。

これで、主見出しは、文字サイズが大きくなり、中央揃えになり、すべて大文字になります。

ページに画像を追加してページを飾ってみましょう。このセクションでは、CCライブラリから画像をダウンロードし、その画像にキャプションを付けてindex.htmlに挿入します。このとき、

1. 配置を支援するダイアログで「後」に配置するように選択します。

   要素は、選択した段落の後に挿入されます。新しい要素では、内側に

1. 要素を選択した状態のまま、CCライブラリパネルでcable_car1 というラベルの画像を右クリックします。コンテキストメニューから「リンクされていないアイテムを挿入 」を選択します。配置アシストダイアログが表示されるので、画像を挿入する位置を指定します。「ネスト 」をクリックして、

   要素の内側にネストします。
   

2. ダイアログボックスが表示されますので、サイト内でファイルを格納する場所、画像形式およびサイズを指定します。srcフィールドには、このチュートリアルシリーズのパート1でデフォルトの画像用フォルダーとして設定したimagesフォルダーに画像を保存することが自動的に提案されます。提案される画像の名前は、CCライブラリで使用されている名前をベースにしています。この2つは問題ありませんが、PNG 32形式で保存するとファイルが大きくなります。ダイアログボックスの右側にあるドロップダウンメニューを開き、「JPEG 」を選択します（図9を参照）。

こうすると、src フィールドのファイル名拡張子が.jpg に変更されます。

1. 画像は

   要素の内側に挿入され、Dreamweaverによって自動的に、基になるHTMLでwidth およびheight が設定されます。ここでは、この画像をレスポンシブなレイアウトとして作成するので、これらの値は削除する必要があります。
   
   画像を選択した状態のまま、エレメントディスプレイのハンバーガーアイコンをクリックしてクイックプロパティインスペクターを開き（図11を参照）、width フィールドとheight フィールドの値を削除してから、インスペクター以外の場所をクリックして、インスペクターを閉じます。

CCライブラリパネルのコンテキストメニューには、リンクされたアイテムにもリンクされていないアイテムにも、挿入およびダウンロードのオプションがあります。リンクされていないアイテムの場合は、自分のサイトに画像のローカルバージョンが作成されるだけです。それに対して、リンクされたアイテムの場合は、Creative Cloudのライブラリ内で画像が変更されると、ローカルバージョンの画像が自動的に更新されます。さらに詳しくは、Creative Cloudでのアセットの同期 を参照してください。

index.html内のもう1つの画像は、heroというIDの

1. CCライブラリパネルで、golden_gate というラベルの画像を選択し、ライブビューにドラッグし始めます。ページ上を移動すると、画像の挿入先を示す緑色の横線が表示されます。
   緑色の横線が黒丸付きリストと段落の間に合ったらドラッグを止めますが、まだマウスのボタンを放さない でください。数秒待つと、マウスポインターの右下に小さな アイコンが表示されます（図13を参照）。

1. マウスボタンを押したまま、マウスポインターをこのアイコンの上に移動すると、フローティングDOMパネルが表示されます。フローティングパネル上でドラッグを続けて、緑色の横線がdiv #hero 要素とその後のp の間に表示されるようにします（図14を参照）。適切な場所で、マウスボタンを放します。

1. ダイアログボックスが表示されますので、ローカルサイトでファイルを格納する場所と画像形式を指定します（前のセクションの図9と図10を参照）。
   
   画像形式をJPEG に変更し、width とheight をそれぞれ1000 と547 に設定します。「OK」をクリックします。
   

2. ゴールデンゲートブリッジの画像が、黒丸付きリストと段落の間に挿入されたはずです。挿入した場所が間違っていても、心配ありません。後で、簡単に修正できます。
   
   画像が選択された状態で、ハンバーガーアイコンをクリックして、クイックプロパティインスペクターを表示します。
   

3. alt フィールドに"The Golden Gate Bridge "と入力し、widthフィールドとheightフィールドにある値を削除します。この画像にはキャプションを付けないので、音声ブラウザー向けにalt属性が必要です。画像のサイズは画面の解像度に応じて自動的に変更されるので、サイズを設定する必要はありません。
   

4. DOMパネルで、img要素がdiv #hero とp の間にあり、p と同じレベルにインデントされていることを確認します（図15を参照）。

ライブビューとDOMパネルでのドラッグ＆ドロップは、webページ内のHTML要素やアセットを再編成するための強力な手段です。それで、このテクニックを自分で快適と感じられるまで練習することをおすすめします。

マウスを使わない操作がお好みの場合は、ゴールデンゲートブリッジの画像を、前のセクションと同じ方法で挿入することができます。まずhero

ゴールデンゲートブリッジの画像は横幅が1000pxで、サイト内のもう1つの画像は横幅が400pxに、それぞれリサンプルされています。HTMLからwidth 属性とheight 属性を削除したため、ブラウザーには画像の元々のサイズで表示されます。利用可能な画面スペースに対してレスポンシブな画像にするには、CSSで少しの工夫を施す必要があります。

1. ライブビューでゴールデンゲートブリッジの画像が選択された状態のまま、CSSデザイナーでresponsive.cssを選択して新しいセレクターを作成します。上向き矢印キーを1回押して、提案されるセレクターを"#hero img "に変えた後、Enter/Returnキーを押して変更を確定します。
   
   これにより、子孫セレクター（2つ以上のセレクターをスペースで区切ったもの）が作成されます。このセレクターは、heroというIDの要素の内側にある画像を対象にします。
   

2. 次のプロパティと値を設定します（どちらも「レイアウト」セクションにあります）。

max-width プロパティを100% に設定すると、画像が親要素（この場合は、hero

1. ライブビューでケーブルカーの画像を選択し、上向き矢印キーを1回押します。選択範囲がHTML階層で1つ上がり、親要素である

   要素が選択されます。
   

2. figure セレクターを作り、次のプロパティを設定します。

1. ライブビューを400pxより狭くしてみます。

   要素の大きさを示す青いガイドに注目します。width として指定した400pxよりも小さくなり、 常にmax-widthによって指定した92%が適用されていることがわかります。要素は水平方向で中央に配置されますが、幅が狭くなると、画像は右にはみ出していることがわかります（図18を参照）。

1. 要素にネストされている画像のスタイルを設定するには、子孫セレクター"figure img "を作成する必要があります。figure img セレクターを作成し、max-widthプロパティを100% に設定します。
   
   これにより、画像が親コンテナからはみ出すことがなくなります。ライブビューの幅が435px より広い場合、画像は元々のサイズである400px で表示され、水平方向で中央に配置されます。
   

2. 内のfigcaption 要素にセレクターを作成し、次のプロパティと値を設定します。

最新のほとんどのブラウザーは、対応状況に違いがあるものの、さまざまなCSSフィルターをサポートするようになりました。画像をグレースケールに変換し、マウスを合わせるとカラー版が表示される、というシンプルなスタイルを作成してみましょう。

ブラウザー間の互換性のため、-webkit-filter とfilter の両方を使用する必要があります。どちらのプロパティも認識しない以前のバージョンのブラウザーでは、このスタイルルールは無視され、画像はカラーで表示されます。

前のセクションでは、クラスを割り当てることによって、ケーブルカーの画像にhero画像とは異なるスタイルを設定しました。ただし、要素のスタイルを変えるためにいつもクラスを使用する必要はありません。ゴールデンゲートブリッジの画像と最初の

見出しの間にある段落は、hero

の内側にネストしているため、子孫セレクター"#hero p " を作成すれば、他のすべての段落とは異なるスタイルを設定できます。

Shiftキーを押しながらマウスを左右に動かすと、10単位で値が変化します。修飾キーを押さずにマウスを左右に動かすと、1単位で値が変化します。

1. プロパティ ペインの上部にある アイコンをクリックして、「ボーダー」セクションに移動します。border プロパティは、タブ付きパネルとしてグループ分けされています（図22を参照）。最初のタブで値を設定すると、要素の4つの辺すべてに同じボーダーを適用できます。その他のタブでは、top 、right 、bottom およびleft のボーダーを個別に設定できます。

1. 下側のボーダーのタブを選択し、widthを3px 、styleを「solid 」に設定します。色を指定する必要はありません。ボーダーのデフォルト色は、現在の要素のテキストから継承されます。
   

2. この段落のスタイルの最終設定として、プロパティ ペインの上部にある アイコンをクリックし、レイアウトプロパティに移動します。パディングのビジュアルツールに移動し、左と右の値を4% 、下の値を20px に設定します（図23を参照）。

これで、段落に独自のスタイルを設定できました（図24を参照）。