ホームページ作成講座画像の説明文を入れる

画像の説明文

最初に、画像の説明を記述する属性をもう一度見ておきましょう。

alt="画像の説明"

alt属性で、画像の説明を記述します。alt属性は絶対付ける必要があります。

title="画像の説明"

画像の上にマウスカーソルが乗ると、説明文がポップアップ表示されます。

alt属性は必ず付けるということでした。title属性はそうではありません。必要と思える時だけ記述します。

alt属性の値は、画像が何かの拍子で読み込まれなかった時に表示されます。

title属性に記述した説明文は、画像にマウスカーソルを乗せた時にポップアップ表示されます。 alt属性の場合はそうなりません。もっとも、古いブラウザでは表示されることがあります。

説明文が表示されるサンプル

では、説明文が表示されるサンプルを見てみることにしましょう。

前のページでlesson1.htmlを作りました。 それを同じ場所にコピー＆貼り付けして、「lesson2.html」というファイル名にしてください。

そして、bodyにあるimgタグの画像パスを、以下のように書き替えてわざと間違ったパスにします。 また、title属性を入れたimgタグも一つ書き足します。

<img src="../imge/apple.jpg" width="128" height="128" alt="リンゴ128px">
<img src="../imge/apple.jpg" width="64" height="64" alt="リンゴ64px">
<img src="../imge/apple.jpg" width="50%" alt="リンゴ 幅50%">

<img src="../img/apple.jpg" title="リンゴ" width="128" alt="リンゴ128px">

ブラウザで表示すると、下のようになります。

上記サンプルでは、画像パスが違うので画像が読み込まれません。それで、画像の説明文が表示されていると思います。

また、title属性を記述した画像にマウスカーソルを当てると、「リンゴ」という説明文がポップアップ表示されます。 スマートフォンの方は残念ながら見れないのですが。。。