画像を表示するためのimgタグ【HTML超入門12】

imgたタグの使い方

imgというのは、もちろんImageの略です。

名前の通り、画像を表示するタグです。

 

sponsored link

imgタグの書き方

<img>タグは、終了タグが無いので最初に<imgと書いて、表示したい画像の場所を示すための、src=”http://◯◯〜”と続けて指定していけばいいだけです。

試しに、<p>タグの下に表示させているサンプルのコードを掲載しておきます。

ボクが焚き火の前でくつろいでいる写真で、WordPressのimageフォルダに入っている画像です。

幅が840px、高さが473pxに指定してます。

また、画像が何らかの事情で読み込めなかったり、テキストを読み上げるブラウザで画像を説明するためのテキストとして「うえせい焚き火」としています。

uesei.png
うえせい

あとはWordPressで使用しているclassが指定してありますが、これはWordPressを使っていない人は気にしなくてもいいですよ

 

実際にブラウザで表示させてみた

imgタグのサンプル表示

<p> タグで書かれている文字が表示されているすぐ下に表示されていますね。

 

【まとめ】<img>タグは、画像の場所、サイズ、位置を指定するだけ

結局うえせいはこう思う
ホームページやブログに、文章だけでは読んでる方も疲れますよね。

とくに、紙の本と違って文字ばかりが並んでいると、非常に読みづらいです。

挿絵的に時々画像を入れるために、必須の<img>タグ。

  • 画像の場所:src=”◯◯”として設定してましす(サーバー上の画像が保存されている場所)
  • サイズ:height widthとして設定しています(pxや%で指定をする)
  • 代替テキスト:alt=”◯◯”として設定してます(画像を説明する一文)

などをあわせて指定しますが、難しいものではないので、覚えましょうね。

では、また。最後まで読んでくれてテリマカシ。

▼HTML・CSS超入門 記事一覧

sponsored link

   
うえせい写真
SNSフォロー

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

 

sponsored link

LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加