要素の周囲のスペースを調整し、画像をレスポンシブにする

入門

このチュートリアルシリーズのパート5では、Dreamweaverを使って画像のサイズがブラウザーの幅に応じて変化するようにCSSで設定する方法について説明します。前のパートでは、最初はコードビューを、次にCSSデザイナーを使用して、Bayside Beatサイトのホームページのスタイル設定を始めました。CSSデザイナーを使用する利点は、ライブビューに結果がすぐに表示されることです。このパートでは、要素の周囲のスペースを調整し、画面の解像度に合わせて自動的にサイズが変わる画像を追加することにより、デザインが次第に形として見えるようになってきます。

パディングとマージンを使って水平と垂直のスペースを制御する

CSSには、要素の周囲の水平と垂直のスペースを制御するプロパティとして、paddingとmarginがあります。どちらを選んでも問題ないケースがあります。どちらも要素の周囲にスペースが追加されます。しかし、重要な違いがあります。マージンは、要素の幅と高さには含まれません（図1を参照）。これは、デフォルトのボックスモデルを使っている場合も、パート4で作成したスニペットでそのモデルを上書きしている場合も、同様です。

パディングとマージンが様々な機能に与える影響を、次の表にまとめました。

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

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

この2つの要素間の垂直距離は、両方のマージンを足したもの（つまり、50px）になると予想するのは自然なことです。しかし、実際にはそうなりません。隣接する上下のマージンは相殺つまり大きい値に包合されます。したがって、この2つの要素間の垂直距離は、両方のマージンのうち大きいもの（つまり、30px）になります（図3を参照）。

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

パート4で作成したスタイルルールでは、bodyとwrapper <div>の両方に上マージン0を設定しました。それでは、画面の上端に間隔が空いているのはなぜでしょうか？ これは、ブラウザーが、見出しを含む一部の要素に対してデフォルトのマージンを適用するからです。

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

ページの上端の間隔を削除し、見出しのスタイルを設定する

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

1. ライブビューでメインの<h1>見出しを選択し、CSSデザイナーのソースパネルでresponsive.cssを選択した状態にします。次のセレクターは#wrapperの後に入れる必要があるので、セレクターパネルで"#wrapper"を選択した状態にします。プラスボタンをクリックして、新しいセレクターを作成します。
   
2. 見出しが選択されているので、Dreamweaverからセレクターとして"#wrapper header h1"が提案されます。これは非常に限定的な子孫セレクターで、IDとしてwrapperを持つ要素の内側にネストした<header>要素の内側の<h1>要素を検索します。セレクターの限定度を下げるには、上向き矢印キーを1回押します。提案が"header h1"に変わります。これでもまだ限定度が高いので、上向き矢印キーをもう一度押して、提案を"h1"にします。これで、ページ内の任意の場所にある<h1>要素が対象になります。同じルールを<h2>要素にも適用するには、入力フィールドでh1の右側をクリックし、コンマとh2を入力します。セレクターは次のようになるはずです。
   
   h1, h2

   上向き矢印キーを使ってセレクターの限定度を下げる機能は、Dreamweaverがセレクターの名前を初めて提案した時にのみ機能します。必要であれば、セレクターをダブルクリックして編集フィールドを開き、グループセレクターを手動で入力することもできます。
   
   
3. プロパティペインの上部にあるアイコンをクリックし、新しいセレクターに対して次のテキストプロパティを設定します。

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

4. ライブビューで主見出しと"h1, h2"セレクターを選択した状態のまま、セレクターペインのプラスボタンをクリックし、上向き矢印キーを2回押して、h1のセレクターを作成します。アイコンをクリックして「レイアウト」セクションに移動し、次のプロパティを設定します（図4を参照）。
   

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

5. 「テキスト」セクションで、次のプロパティと値を設定します。

text-alignプロパティとtext-transformプロパティはアイコンを使って設定します（図5を参照）。各アイコンの意味を確認するには、マウスポインターを合わせてください。

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

6. <h2>見出しの1つを選択し、セレクターを作成します。上向き矢印キーを2回押してセレクターの限定度を下げ、h2セレクターを作成します。次のプロパティと値を設定します。

単位としてemを使うと、テキストや上マージンのサイズが、親要素のテキストに比例したサイズに変更されます。

wrapperの内側に水平方向のパディングを追加する

wrapper <div>内のテキストは、境界の端までいっぱいに表示されます。両端にゆとりを持たせるためには、左右にパディングを追加することができます。ただし、そうすると、ゴールデンゲートブリッジの画像を後で挿入した時に、画像がhero <div>の横幅いっぱいに表示されなくなります。そこで、"main, aside"というグループセレクターを作り、次のプロパティと値を設定します（図6を参照）。

変更を加えた後は、ファイル／すべての関連ファイルを保存を使って作業内容を忘れずに保存してください。

CCライブラリから画像を挿入し、キャプションを付ける

ページに画像を追加してページを飾ってみましょう。このセクションでは、CCライブラリから画像をダウンロードし、その画像にキャプションを付けてindex.htmlに挿入します。このとき、<figure>要素を使います。同時に、画像の形式を選択し、画像のサイズを変更します。

1. 基になるHTMLの様子を確認できるように、分割ビューを開きます。必要に応じて、関連ファイルツールバーで「ソースコード」をクリックします。その後、ライブビューで、"Riding the Cable Cars"という見出しの後にある2番目の段落を選択します。"The cable cars rely"という語句で始まる段落です。
   
   
2. 挿入パネルを開き、HTMLカテゴリーの「Figure」をクリックします（図7を参照）。

3. 配置を支援するダイアログで「後」に配置するように選択します。<figure>要素は、選択した段落の後に挿入されます。新しい要素では、内側に<figcaption>がネストしています。両方の要素にプレースホルダーテキストが入っています（図8を参照）。

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

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

6. 幅が3000pxを超えているので、この画像は大きすぎます。Wフィールドの値を400に変更します。デフォルトでは、W（幅）フィールドとH（高さ）フィールドの間にあるリンクアイコンが選択されているので、Hフィールドの値が自動的に266に変更されます。
   
   ダイアログボックスの値が図10と一致していることを確認してから、「OK」をクリックします。

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

8. <figure>要素のプレースホルダーテキストをクリックして編集モードに入り、そのテキストを選択し、Deleteキーを押して画像およびキャプションのプレースホルダーだけを残します。
   
   Dreamweaverによって、基になるHTMLの<img>タグからalt=""も削除される場合があります。その場合、出力パネル（ウィンドウ／結果／出力）に、alt属性に値を指定する必要があるという警告が表示されます。alt属性の目的は、目の不自由なユーザー向けのスクリーンリーダーなど、音声ブラウザーに対して代替テキストを提供することです。画像にキャプションが付いている場合や、純粋に装飾のための画像である場合、alt属性は不要であるため、この警告は無視して構いません。
   
   
9. キャプションのプレースホルダーテキストをダブルクリックし、"The cable car terminus near Union Square"に置き換えます。
   
   
10. index.htmlを保存します。

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

CCライブラリから画像をドラッグ＆ドロップする

index.html内のもう1つの画像は、heroというIDの<div>内にネストする必要があります。このセクションでは、CCライブラリパネルから直接ドラッグ＆ドロップすることで画像をページに挿入する方法を説明します。このテクニックは、初めての場合はマスターするのを難しく感じます。そのため、実際に操作してみる前に、この後の指示を読み通して概要を理解してください。

1. 分割ビューを閉じるために、ドキュメントウィンドウの上部にある「ライブ」をクリックします。その後、黒丸リストの直後の"Bayside Beat keeps"で始まる段落が見えるようにします。
   
   
2. DOMパネルで、ネストした子アイテムを持つ要素の大部分を折りたたみますが、図12のとおり、div #hero要素は展開した状態にしてください。こうすると、画像を正しい場所に配置しやすくなります。

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

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

5. ダイアログボックスが表示されますので、ローカルサイトでファイルを格納する場所と画像形式を指定します（前のセクションの図9と図10を参照）。
   
   画像形式をJPEGに変更し、widthとheightをそれぞれ1000と547に設定します。「OK」をクリックします。
   
   
6. ゴールデンゲートブリッジの画像が、黒丸付きリストと段落の間に挿入されたはずです。挿入した場所が間違っていても、心配ありません。後で、簡単に修正できます。
   
   画像が選択された状態で、ハンバーガーアイコンをクリックして、クイックプロパティインスペクターを表示します。
   
   
7. altフィールドに"The Golden Gate Bridge"と入力し、widthフィールドとheightフィールドにある値を削除します。この画像にはキャプションを付けないので、音声ブラウザー向けにalt属性が必要です。画像のサイズは画面の解像度に応じて自動的に変更されるので、サイズを設定する必要はありません。
   
   
8. DOMパネルで、img要素がdiv #heroとpの間にあり、pと同じレベルにインデントされていることを確認します（図15を参照）。

9. 画像の位置が間違っている場合は、DOMパネル上で画像をドラッグし、緑色の横線をdiv #heroとその後のpの間に移動します。その後、マウスボタンを放します。
   
   
10. index.htmlを保存します。

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

マウスを使わない操作がお好みの場合は、ゴールデンゲートブリッジの画像を、前のセクションと同じ方法で挿入することができます。まずhero <div>を選択し、コンテキストメニューから「リンクされていないアイテムを挿入」を使用します。配置アシストダイアログが表示されたら、「ネスト」を選択します。

画像をレスポンシブにする

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

1. ライブビューのスクラバーを左にドラッグして、ライブビューの幅を狭くします（図16を参照）。ライブビューの幅が1000pxより狭くなると、水平スクロールバーが表示され、ゴールデンゲートブリッジの右端が隠れます。

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

max-widthプロパティを100%に設定すると、画像が親要素（この場合は、hero <div>）の幅を超えないようになります。

4. ライブビューのスクラバーを左右にドラッグします。ゴールデンゲートブリッジの画像が、使用可能な水平スペースに合わせて自動的にサイズ変更されます（図17を参照）。

5. ライブビューでケーブルカーの画像を選択し、上向き矢印キーを1回押します。選択範囲がHTML階層で1つ上がり、親要素である<figure>要素が選択されます。
   
   
6. figureセレクターを作り、次のプロパティを設定します。

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

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

CSSフィルターを使用して画像のスタイルを設定する

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

1. ライブビューでケーブルカーの画像を選択し、imgエレメントディスプレイのプラスボタンをクリックします。入力フィールドに".grayscale"と入力し（先頭はドットです）、TabキーまたはEnter/Returnキーを押して、画像にクラスを割り当てます。
   
   表示されるポップアップでresponsive.cssが選択されていることを確認してから、ポップアップ以外の場所をクリックして、ポップアップを消します。
   
   
2. CSSデザイナーのセレクターパネルで、Dreamweaverによって作成された.grayscaleセレクターを選択し、プロパティペインの上部にある「セットを表示」チェックボックスを選択します。
   
   
3. 「プロパティの追加」フィールドと「値の追加」フィールドに、次のプロパティと値を設定します。

画像が白黒写真のように表示されます（図19を参照）。

4. セレクターペインで、.grayscaleセレクターを右クリックし、コンテキストメニューから「複製」を選択します。Dreamweaverによってスタイルルールのコピーが作成されます。このとき、新しいセレクターの名前は編集可能状態のままになります。次のように、名前の末尾に":hover"という擬似クラス名を追加します。
   
   .grayscale:hover
   
   擬似クラスについてさらに詳しくは、このチュートリアルシリーズのパート6で説明します。
   
   
5. プロパティペインで、各プロパティの値をダブルクリックし、値を「grayscale(0%)」に変更します。
   
   
6. ライブビューで画像にカーソルを合わせます。今度は画像がカラーになります。
   
   
7. 作業内容を保存するため、ファイル／すべての関連ファイルを保存を選択します。

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

段落に独自のスタイルを設定する

前のセクションでは、クラスを割り当てることによって、ケーブルカーの画像にhero画像とは異なるスタイルを設定しました。ただし、要素のスタイルを変えるためにいつもクラスを使用する必要はありません。ゴールデンゲートブリッジの画像と最初の<h2>見出しの間にある段落は、hero <div>の内側にネストしているため、子孫セレクター"#hero p" を作成すれば、他のすべての段落とは異なるスタイルを設定できます。

1. ライブビューで、ゴールデンゲートブリッジの画像のすぐ下にある段落を選択します。
   
   
2. 関連のあるスタイルルールはまとめて配置するとよいので、CSSデザイナーのセレクターペインで"#hero img"を選択してハイライトしてから、プラスボタンをクリックします。Dreamweaverからセレクターとして"#wrapper #hero p"が提案されます。上向き矢印キーを1回押して、提案を"#hero p"に変更します。
   
   
3. プロパティペインの右上にある「セットを表示」チェックボックスの選択を解除し、アイコンをクリックして「テキスト」セクションに移動します。
   
   
4. CCライブラリパネルにあるピンク色のスウォッチをクリックして16進数値#F68979をクリップボードにコピーし、その値をcolorプロパティの値として貼り付けます。hero <div>内の段落のみ、ピンク色に変わります。他のすべての段落はダークグレーのままです。
   
   
5. font-weightを600に設定します。
   
   
6. font-sizeの右側を1回クリックし、単位としてemを選択します。パート4で説明したとおり、Dreamweaverによって値はいつも0に設定されるため、いったんテキストが消えます。
   
   値を1.5emに設定する必要があります。これをおこなうには、次の2つの方法があります。
   
   
   • 入力フィールドに直接1.5と入力し、Enter/Returnキーを押して値を確定します。
     
   • マウスポインターを値のすぐ下に合わせてしばらく待つと、カーソルが双方向の矢印に変わります。その後、Ctrlキー（Windows）またはCmdキー（macOS）を押しながらマウスボタンを押し、マウスを右側に移動します。すると、値が0.1ずつ増えていき（図20を参照）、その効果をライブビューですぐに確認できます。増やしすぎた場合は、左側に戻します。値以外の場所をクリックして、値を確定します。このテクニックは、特定の値を設定するのではなく、マウスを左右に動かしてライブビューで結果を目で見ながら判断する場合に便利です。

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

7. テキストを大文字に変換するために、text-transformプロパティの大文字アイコンをクリックします（図21を参照）。

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

9. 下側のボーダーのタブを選択し、widthを3px、styleを「solid」に設定します。色を指定する必要はありません。ボーダーのデフォルト色は、現在の要素のテキストから継承されます。
   
   
10. この段落のスタイルの最終設定として、プロパティペインの上部にあるアイコンをクリックし、レイアウトプロパティに移動します。パディングのビジュアルツールに移動し、左と右の値を4%、下の値を20pxに設定します（図23を参照）。

11. テキストの上端とゴールデンゲートブリッジの画像の間隔が大きすぎます。マージンのビジュアルツールを使って、上マージンを10pxに設定し直します。

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

フッターのスタイルを設定する

ここまでの操作で、セレクターとスタイルルールの作成について十分に経験を積みました。最後に、フッターのスタイルを設定しましょう。コードビューを使って、スタイルシートの末尾にスタイルの定義を直接設定してみてください。コードは次のようになります。

完了したら、忘れずにファイルを保存します。ブラウザーでページを表示すると、図25のように見えるはずです。デザインが着々と向上してきました。

Bayside Beatサイトのスタイル設定が半分終了しました。