HTMLとCSSを使用して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 に設定します。
#headerImg {
...
background-image:url(images/europa_header.jpg);
height:500px;
}
画像がコンテンツの一部である場合、またはアクセシビリティ(障害を持つユーザーの支援)のために使用されている場合は、HTMLの タグを使用して画像を配置します。
「ソースコード 」をクリックして、42行目付近のセクションにスクロールダウンします。
見るとわかるように、画像は大きすぎて設定されているボックスに収まらないため、適切に表示されません。次に、画像が収まるようにサイズを変更します。
注意: タグは終了タグが不要です。
HTML画像はデフォルトでフルサイズで追加されます。width とheight を使用して、画像のサイズを指定できます。
次のプロパティを タグに追加します。
width="500px" height="500px"
alt 属性は、画像がユーザーのブラウザーに読み込まれない場合や障害を持つユーザーがスクリーンリーダーで読み取る場合に、画像の簡単な説明を示します。
次のプロパティを タグに追加します。
alt="Jupiter's Great Red Spot"
56行目付近のセクションを見つけます。
別の画像をコンテンツに追加するには、説明された手順を繰り返します。
次のプロパティを タグに追加します。
「プレビュー」をクリックし、「ブラウザーでプレビュー 」の一覧からブラウザーを選択し、画像を確認します。
ファイルを保存してから、変更結果を確認してください。