HTML STUDY
>
>

画像を表示する

ここでは画像をブラウザに表示するHTMLタグのimg要素について解説していきます。

img要素にはどこに画像があるのかパスを設定したり、画像が表示されなかった場合のためにどのような画像かテキストで説明する設定をしたりします。

画像ファイルのURLを設定する

img要素はsrc属性を使用して表示させたいファイルがどこにあるかパスを設定します。ここでは下の図のようなフォルダの中にHTMLファイルとimageフォルダがあり、そのimageフォルダの中に表示させたい画像hello.jpgがあるとします。

hello.jpg(200×175px)
ハローの画像

要素解説
<img>画像を表示
属性解説
src画像のURL
<img src="image/hello.jpg">

ブラウザ表示例

ハローの画像

画像が表示されない場合のテキストを設定する

alt属性は画像が表示されなかった場合に代わりに画像を説明するテキストを設定します。alt属性の値として説明を入力します。

属性解説
alt画像が表示されなかった場合のテキスト
<img src="間違ったURL.jpg" alt="ハローの画像">

ブラウザ表示例

画像が表示されない場合の例

画像の大きさを設定する

画像の大きさを設定するためにwidth属性で横幅、height属性で高さを設定していきます。値としてpx値、%を入力する方法があります。

属性解説
width画像の横幅
height画像の高さ
<p>
<img src="image/hello.jpg" width="200" height="175" 
alt="ハローの画像">
<img src="image/hello.jpg" width="100" height="87" 
alt="ハローの画像小">
<img src="image/hello.jpg" width="50" height="43" 
alt="ハローの画像さらに小">
</p>

ブラウザ表示例

ハローの画像 ハローの画像小 ハローの画像さらに小

HTML文字 関連記事