基本的なHTMLタグ~その4 画像の挿入(幅、高さの指定、画像の回り込み)

画像はホームページを彩るのに必要不可欠です。文字だけのWebサイトではなんか味気ないですし、訪問者もすぐ帰ってしまうかもしれません。ここではHPに画像を挿入するためのHTMLタグを解説しています。

目次

(<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>)

画像を入れる

画像を入れるにはimgタグを使います。

imgタグで横幅や高さを指定しておくと大きな画像でも小さく載せることができます。

また、altタグはできるだけ入れたほうがいいですね。

特に目の不自由な人は音声ブラウザという声でホームページの内容を読んでいく専用のブラウザを使用しますので、画像だけ貼っても、目の不自由な人にはまったくわからないのです。

そこで、代替テキストを入れれば、目の不自由な人でも画像がどんなことを表しているのかが、わかるようになるのです。

※例(イメージです)

<img src=”URL” width=”150″ height=”156″ alt=”パソコンを教える男性”>

↓↓↓

パソコンを教える男性

画像にテキストを回り込ませる(<align=”位置”>)

こちらも<img src=”URL”>内に書くタグです。

画像を右または左に動かし、その横にテキストを回り込ませることができます。

ただ、こちらも現在非推奨タグですので、できるだけスタイルシートで編集してください。

※例(イメージです)

※今回の回り込みの例は、使用しているWordPressのテーマの関係でうまく表示できていません。本当は画像の横にキレイに回り込みますが、あくまでイメージとして捉えてください。

パソコンを教える男性

今日はパソコンスクールに行ってワードの使い方を習いました。

少し難しかったけど、なんとか出来るようになりました。

来週はエクセルの使い方を教えてもらいます。

<img src=”URL” alt=”パソコンを教える男性” width=”150″ height=”156″ align=”left”>

↓↓↓

パソコンを教える男性今日はパソコンスクールに行ってワードの使い方を習いました。

少し難しかったけど、なんとか出来るようになりました。

来週はエクセルの使い方を教えてもらいます。

また通常、回り込ませたテキストと画像の間を指定するために<vspace=”縦間隔” hspace=”横間隔”>を入れます。間隔の値はピクセルで調整します。

<img src=”URL” alt=”パソコンを教える男性” width=”150″ height=”156″ hspace=”10″ vspace=”10″ align=”left”>

↓↓↓

パソコンを教える男性   今日はパソコンスクールに行ってワードの使い方を習いました。

少し難しかったけど、なんとか出来るようになりました。

来週はエクセルの使い方を教えてもらいます。

よかったらシェアしてね!
目次