チュートリアル記事

初級

5 分

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

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

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

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

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

始める前に

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

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

1

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

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

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

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

CSS

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

2

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

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

ソースコード 」をクリックして、42行目付近のセクションにスクロールダウンします。

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

注意: タグは終了タグが不要です。

HTML

3

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

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

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

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

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

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

alt="Jupiter's Great Red Spot"

4

別の画像を追加する

56行目付近のセクションを見つけます。

別の画像をコンテンツに追加するには、説明された手順を繰り返します。

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

Gale Crater

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

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


2022年3月8日

Dreamweaver でこれらのチュートリアルをお試しください

モダンでレスポンシブな web ページをデザイン