画像を表示する<img>要素の使い方。src属性やalt属性など。

Webページにおいて、画像の表示は大切です。テキストだけのページだと味気ない印象となってしまいますし、メリハリが無く読みづらくなってしまいます。しかし、画像があるだけで華やかなページとなり、サイト全体のイメージがアップします。

なので、画像を多用したWebページを作るのが望ましいですね。画像を表示させるには、img要素を使用します。そして、画像が表示されない環境の人のために、alt属性なども記述する必要があるので、覚えておくようにしましょう。

ここでは、img要素について解説をします。

 

画像を表示させるimg要素

img要素は、Webページに画像を挿入するときに使用します。<img>には終了タグが存在せず、意味などもありません。また、単体で使用することも無く、「src属性」や「alt属性」と一緒に使います。

「src属性」とは、画像ファイルの所在を示すものです。外部の画像を表示するときには、「http://」から始まるURLを記述します。また、同じサーバー内の画像の表示には、ドメインを省略して相対パスで記述することができます。

<img src=”img/image.gif”” alt=”サンプル画像”>

上記のようにマークアップすると、以下の表示となります。

img-sample

さらに、「alt属性」は、画像の説明文を記述するものです。コンピュータは画像の内容を判別することが出来ませんから、alt属性に説明を記述することで、画像の意味を伝えるわけですね。

 
また、何らかの原因で画像が表示されない場合には、alt属性に書かれた説明文が表示され、音声読み上げブラウザなどでは、altの文章が読み上げられます。なので、文字を画像化しているときには、その文字をalt属性に記述してください。

ただし、行頭のアイコンなど装飾のみの画像においては、alt属性は空欄にしておきます。無理にキーワードを詰め込むと、検索エンジンからスパム判定を受ける可能性がありますし、音声読み上げでも混乱してしまうリスクがあるからです。

 

画像の表示はWebサイト全体の印象を決めるものですから、適切に利用できるようにしてください。Webデザインの基礎となるので、覚えておきましょう。

サブコンテンツ

このページの先頭へ