画像を表示するためのimgタグ【HTML超入門12】
imgというのは、もちろんImageの略です。
名前の通り、画像を表示するタグです。
imgタグの書き方
<img>タグは、終了タグが無いので最初に<imgと書いて、表示したい画像の場所を示すための、src="http://◯◯〜"と続けて指定していけばいいだけです。
試しに、<p>タグの下に表示させているサンプルのコードを掲載しておきます。
<!DOCTYPE html> <html> <head> <title>たいとるタイトル</title> </head> <body> <h1>テキストてきすと</h1> <p>この文章はあくまでサンプルです。実はこういうのを書いているとすごく読んでくれる人もいるのですが、これを読んでもなんの意味もありません。<br/>というか、わざとだらだら書いているので非常に読みにくいかと思いますが、これは文章というか、文字数がどのくらい入るか測る為のものでありますので、これでいいのです。</p> <p>よくこんなに文章が出てきますが、本当に未読スルーをしてくださいね。<br/>そして、まさかのここで文字量調節です。</p> <img src="https://www.uesei.net/wp-content/uploads/2017/12/camp-papa_2.jpg" alt="うえせい焚き火" width="840" height="473" class="alignnone size-full wp-image-11750" /> </body> </html>
ボクが焚き火の前でくつろいでいる写真で、WordPressのimageフォルダに入っている画像です。
幅が840px、高さが473pxに指定してます。
また、画像が何らかの事情で読み込めなかったり、テキストを読み上げるブラウザで画像を説明するためのテキストとして「うえせい焚き火」としています。
[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい" type="rn"]あとはWordPressで使用しているclassが指定してありますが、これはWordPressを使っていない人は気にしなくてもいいですよ[/speech]
実際にブラウザで表示させてみた
<p> タグで書かれている文字が表示されているすぐ下に表示されていますね。
【まとめ】<img>タグは、画像の場所、サイズ、位置を指定するだけ
ホームページやブログに、文章だけでは読んでる方も疲れますよね。
とくに、紙の本と違って文字ばかりが並んでいると、非常に読みづらいです。
挿絵的に時々画像を入れるために、必須の<img>タグ。
- 画像の場所：src="◯◯"として設定してましす（サーバー上の画像が保存されている場所）
- サイズ：height widthとして設定しています（pxや%で指定をする）
- 代替テキスト：alt="◯◯"として設定してます（画像を説明する一文）
などをあわせて指定しますが、難しいものではないので、覚えましょうね。
では、また。最後まで読んでくれてテリマカシ。
▼HTML・CSS超入門 記事一覧
ホームページ制作・作成は大阪府堺市のWEB制作「合同会社うえせいや」
カテゴリー 「web/html-css」
見つかりません