HTMLページに画像を表示する - imgタグの利用 - HTML
HTMLページに画像を表示するコードを紹介します。
概要
HTMLページに画像を表示する場合には、imgタグを利用します。
書式
<img src="画像のファイル名、または画像のURL" />
<img src="画像のファイル名、または画像のURL" alt="(テキストの説明)" />
実装例
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>画像を表示するデモ</h1>
<img src="picture.png" alt="メインイメージ"/>
</body>
</html>
画像
今回は以下の画像を用意します。HTMLファイルと同じディレクトリに配置します。
picture.png
解説
picture.png の画像をページに表示します。相対パスで記述しているため、HTMLファイルと同じディレクトリにある picture.png ファイルを表示します。
<img src="picture.png"/>
表示結果
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
サイズ指定
現在はスタイルシートで画像の表示幅を設定する場合が多いため、利用されるケースは低いですが、width,height属性を指定すると表示する画像の幅、高さを指定できます。
<img src="画像のファイル名、または画像のURL" width="(幅)" height="(高さ)" />
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>画像を表示するデモ</h1>
<img src="picture.png" width="240" alt="メインイメージ"/>
</body>
</html>
表示結果
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。画像のサイズを指定して表示できています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
