![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
先輩!HTMLで画像を表示させる方法を教えてください!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
了解!それじゃあHTMLで画像を表示させる時によく使われる<img>タグの使い方について解説するね!
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
<img>タグの使い方
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
<img>タグの基本的な書き方は以下のとおりだよ!
<img src="path/画像のファイル名" alt="代替テキスト">
代替テキストとは?
代替テキストとは、表示している画像がどのような画像なのかを記述する説明文のことを指します。代替テキストを設定する理由は以下のとおりです。
- ファイル名またはパス名のスペルが間違っている時に画像の代わりに表示される
- 検索エンジンにテキストを提供して利便性を図ることができる
- 画面リーダーを使いページを読む人に対しての配慮(アクセシビリティの向上)
パス・画像名が合っている時の表示
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
src属性に指定している画像までのパスとファイル名が合っている時の表示を確認してみましょう!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
ひまわり畑の画像が表示されています!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
これが正しい記述をしたimgタグの表示だよ!
パス・画像名が間違っている時の表示
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
続いて、src属性に指定している画像までのパスとファイル名が間違っている時の表示を確認してみましょう!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
画像ではなくテキストが表示されています。。
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
このテキストはalt属性に指定したものだよ!
このように画像が表示されない時は代わりにalt属性に指定されているテキストが表示されるよ!