Webページに画像を配置

Webページには画像も配置できます。画像を配置する前に、画像そのものを用意しなければなりませんが、ここでは、下の画像をお使いください。

通常、画像ファイルは、管理しやすくするためにディレクトリを作成してそのディレクトリの中に保存します。画像ファイルを保存しておくディレクトリの名前には「images」や「pics」という名前がよく使用されます。

通常、画像ファイルは、ディレクトリを作成し、その中に保存しておくようにします。ディレクトリの名前には「images」や「pics」といった名前がよく使用されます。ここでは「images」というディレクトリ名にしました。 このimagesディレクトリの中に「uzu.gif」というファイル名で画像ファイルを保存してください。

<img>タグ

画像を配置するには、<img>タグを使用します。src属性で画像ファイルのパスを指定します。

image.html

終了タグの省略形

画像を配置する場合、開始タグの<img>と終了タグ</img>タグの間には何も記述することがありません。このような場合、終了タグを記述する手間を省くために、終了タグの省略形が用意されています。

上の例の場合、<img>タグの行は次のようになります。

開始タグの「>」の直前にスペースで区切って、「/」（スラッシュ）を記述します。

alt属性

ブラウザの中には、画像を表示できないものもあります。また、画像を表示しないように、ブラウザが設定されている場合もありますし、目の不自由な人も世の中にはいます。

<img>タグには、画像の説明文を記述するためのalt属性を指定することができます。

image_alt.html

画像を表示できない／表示しないように設定されたブラウザでは、画像のかわりにalt属性で指定された値が表示されます。ブラウザの中には、画像にマウスポインタを合わせると、alt属性の値がポップアップ等で表示されるものもあります。

<img>タグにはalt属性を指定しておくようにしましょう。

まとめ

他サイトへのリンク

ページの先頭

テーブル（表）