Webデザインでの画像の使用

CSSとHTMLを使用して簡単に画像を追加できることを理解したら、今度は自分のプロジェクトで体験してみましょう。自分のwebデザインで画像を扱う場合、画像に関する権利があること、または所有者からの許可を得ていることを確認してください。また、所有者の提示するクレジットの適切な表記についてのガイドラインに従うようにしてください。

画像はwebページのルック＆フィールを向上させ、追加のコンテキストを閲覧者に提供します。CSSまたはHTMLを使用して、画像をページに配置できます。

1つのバナー画像と2つの画像をコンテンツセクションに追加します。

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでhtml-images.htmlを開き、分割ビューでstyle.cssを表示します。

注意：Dreamweaverにwebページ全体を表示できない場合、webページ全体が収まるまでコードビューペインとライブビューペインの間の仕切りをドラッグしてください。

背景画像やヘッダー画像などの、スタイルや装飾に使用される画像を設定するには、CSSを使用します。

/* -- Step 1: Start Here -- */で始まるセクションを見つけて、#headerimg セレクターにbackground-image プロパティを追加します。

画像フォルダーにあるeuropa_header.jpgを指定して、「開く」をクリックします。高さが画像ボックスに合わせて設定されるまで、画像は表示されません。height:プロパティを追加して、値を500pxに設定します。

CSS

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

画像がコンテンツの一部である場合、またはアクセシビリティ（障害を持つユーザーの支援）のために使用されている場合は、HTMLの<img>タグを使用して画像を配置します。

「ソースコード」をクリックして、42行目付近のセクション<!--- Add second image here --->にスクロールダウンします。

<img src="を入力し、画像フォルダーのjupiter_body.jpgファイルを指定します。「開く」をクリックします。

見るとわかるように、画像は大きすぎて設定されているボックスに収まらないため、適切に表示されません。次に、画像が収まるようにサイズを変更します。

注意：<img>タグは終了タグが不要です。

HTML

<img src="images/jupiter_body.jpg" />

HTML画像はデフォルトでフルサイズで追加されます。widthとheightを使用して、画像のサイズを指定できます。

次のプロパティを<img>タグに追加します。

width="500px" height="500px"

alt属性は、画像がユーザーのブラウザーに読み込まれない場合や障害を持つユーザーがスクリーンリーダーで読み取る場合に、画像の簡単な説明を示します。

次のプロパティを<img>タグに追加します。

alt="Jupiter's Great Red Spot"

56行目付近のセクション<!--- Add third image here --->を見つけます。

別の画像をコンテンツに追加するには、説明された手順を繰り返します。<img src="を入力し、画像フォルダーのsunrise_body.jpgを指定します。「開く」をクリックします。

次のプロパティを<img>タグに追加します。

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

「プレビュー」をクリックし、「ブラウザーでプレビュー」の一覧からブラウザーを選択し、画像を確認します。

ファイルを保存してから、変更結果を確認してください。