Webサイトを作成する上で、画像を表示した方が視覚的に分かりやすく、見栄えの良いサイトを作ることが出来ます。
本記事では、HTMLで画像を表示するために使用されるimgタグの使い方についてご紹介していきたいと思います。
目次
HTMLで画像を表示するimgタグの使い方
HTMLで画像を表示する際には<img>タグを使用します。
「img」は「image」の略称で、指定した画像をWebサイト上に表示することが可能です。
画像の指定方法
imgタグの画像指定には後述する属性の1つ、「src」属性を利用して設定します。
「src」属性はimgタグの必須属性となっており、必ず指定する必要があります。
<img src="画像のパス">
画像指定方法は相対パスが基本
src属性に指定する方法は相対パスを利用するのが一般的です。
また、Webサイト上から画像を取得したい場合、URLを指定することも可能です。
相対パス
<img src="sample.jpg">
上記サンプルでは、HTMLファイルと同階層にある「sample.jpg」の画像をWebサイト上に表示します。
例えばHTMLファイルと同階層にある「images」フォルダに格納された「sample.jpg」画像を表示する場合は下記となります。
<img src="images/sample.jpg">
Webサイト上から画像を取得(URL)
画像はコンピューターに保存された物だけでなく、Webサイトから取得することも可能です。
<img src="http://placehold.jp/150x50.png">
サンプルのように「http://~」のようなURLを入力することで、該当する画像ファイルをご自身で作成したWebサイトに表示することが可能です。
Webサイト上から画像を取得する際は、必ず利用規約や著作権などを考慮するようにしてください。
HTMLの画像(imgタグ)で使用可能な属性とは
HTMLの画像(imgタグ)で使用可能な属性を順番にご紹介していきたいと思います。
頻繁に利用される属性は下記の一覧です。
- src属性(必須)
- alt属性
- title属性
- width属性
- height属性
src属性
src属性では、上述したようにWebサイト上に表示したい画像ファイルのパスを、相対パスまたは絶対パスで指定します。
src属性は必須項目となっており、imgタグを使用する際には必ず指定する必要があります。
alt属性
alt属性は、画像がWebサイト上に表示されなかった場合、代わりに表示されるテキストを指定します。
音声認識時に読み上げられるのもalt属性に指定した値となります。
検索エンジンの画像判定にも利用される項目ですので、必須項目ではありませんが、設定しておくことを推奨します。
title属性
title属性は、画像にマウスカーソルを合わせた際にツールチップで表示されるテキストを指定することが可能です。
指定しなくても特に問題はありません。
width属性
表示する画像の横幅を設定することが可能です。
単位は「ピクセル」または「パーセント」で指定します。
単位を指定しない場合にはデフォルトで「ピクセル」が設定されます。
height属性
表示する画像の縦幅を設定することが可能です。
単位は「ピクセル」または「パーセント」で、デフォルト単位はwidth属性と同じです。
width属性とheight属性によるスタイル指定は、CSSでも実装可能です。
HTML5からはスタイルはCSSファイルとして別途記述する方法が推奨されていますので、後述するサンプルコードでご紹介したいと思います。
HTMLで画像を表示してみよう（サンプルコード)
では実際にHTMLで画像を表示するサンプルコードをHTMLファイル全体を掲載しながらご紹介していきたいと思います。
相対パスで画像ファイルを指定するサンプルコード
まずは最も基本となる相対パスで画像ファイルを指定するサンプルコードを確認していきます。
今回は「index.html」ファイルと同じ階層に「imgフォルダ」を配置し、その中に「sample1.jpg」ファイルを格納しています。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Sample</title> </head> <body> <img src="img/sample1.jpg" width="200" height="30%"> </body> </html>
サンプルコードをブラウザで確認すると、指定した画像が表示されていることがご確認頂けます。
今回はwidth属性に「200」と設定したことで横幅を「200px」、height属性に「30%」を設定して縦幅を決定しました。
デザインを外部CSSファイルで定義するサンプルコード
次に上記の縦幅・横幅の指定を外部CSSファイルで定義してみたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="img/sample1.jpg" class="picture"> </body> </html>
sample.css
.picture {
width: 200px;
height: 30%;
}
ブラウザで表示した結果は、width属性・height属性に設定した場合と同じ状態で表示されます。
Webサイト上から画像ファイルを取得するサンプルコード
次にWebサイト上から画像ファイルを取得して画面に表示してみたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Sample</title> </head> <body> <img src="http://placehold.jp/150x50.png"> </body> </html>
ブラウザで表示した結果、指定したWebサイトの画像を表示出来ていることをご確認頂けます。
指定したパスから画像が取得出来なかった場合のサンプルコード
指定したパスに画像ファイルが存在しなかった場合はどのように表示されるのかを確認しておきたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Sample</title> </head> <body> <img src="http://placeheld.jp/150x50.png" alt="画像が表示される予定の場所です。"> </body> </html>
src属性に設定したURLをわざと間違えて入力しています。
ブラウザで確認するとalt属性に指定したテキストが表示されていることをご確認頂けます。
さいごに：HTMLに画像を組み込んで見栄えの良いサイトを作成しよう
本記事では、HTMLで画像を表示するimgタグの使い方についてご紹介してきました。
今回ご紹介した内容で画像の表示方法自体はある程度把握出来ると思います。
ご自身のWebサイト作成時にうまく画像を取り入れて、ユーザーにとって分かりやすいサイト作成に取り組んでみてください。
対応している画像形式はブラウザにより異なります。
頻繁に利用される拡張子としては、「jpg」「png」が一般的です。
また静止画だけでなく「gif」画像を設定することも可能です。