カスタム検索

Webページに画像を配置

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

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

うずまき

ディレクトリを作成し、そのディレクトリに左の画像を右クリックしてダウンロードして保存(名前を付けて保存)してください。画像ファイルの名前は「uzu.gif」としてください。

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

このimagesディレクトリの中に「uzu.gif」というファイル名で画像ファイルを保存してください。

<img>タグ

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

image.html
<html>
    <head>
        <title>うずまき</title>
    </head>
    <body>
        <h1>うずまき</h1>
        <img src="images/uzu.gif"></img>
    </body>
</html>

終了タグの省略形

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

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

<img src="images/uzu.gif" />

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

alt属性

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

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

image_alt.html
<html>
    <head>
        <title>うずまき</title>
    </head>
    <body>
        <h1>うずまき</h1>
        <img src="images/uzu.gif" alt="うずまきの画像" />
    </body>
</html>

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

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

まとめ
  • <img>で画像を配置
  • src属性で画像ファイルへのパスを指定
  • <xxx />は終了タグの省略形を表す
  • alt属性に画像の説明文を記述
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡