HTMLとCSSを使用してwebデザインに画像を配置する方法を説明します。
work-with-html-images_1408x792

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

images-web-design-step1

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

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

始める前に

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

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

images-web-design-step0

CSSを使用してヘッダー画像を追加する

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

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

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

images-web-design-step2a

CSS

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

images-web-design-step2b

HTMLを使用して画像を追加する

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

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

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

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

注意:<img>タグは自己終了するため、/>の前に配置するだけで構いません。

images-web-design-step3a

HTML

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

images-web-design-step3b

width、height、およびaltプロパティを設定する

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

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

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

 

images-web-design-step4

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

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

alt="Jupiter's Great Red Spot"

images-web-design-step4b

別の画像を追加する

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

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

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

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

images-web-design-step5

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

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

images-web-design-step6
11/25/2019
このページは役に立ちましたか。