画像

画像を表示する
<img src="ファイル名とファイルまでのパス">
【例】<img src="images/1.jpg">

画像のサイズを変更する
<img src="ファイル名とファイルまでのパス" width="横のピクセル数または%" height="縦のピクセル数または%">
【例】<img src="images/1.jpg" width="100" height="50">
※サイズを指定しなくても画像は表示されますが、指定しておくことでブラウザの読み込みが早くなります。
なお、ここで小さく指定しても、見かけ上、小さく見えるだけで、画像が軽くなることはありません。

画像に枠をつける
<img src="ファイル名とファイルまでのパス" border="ピクセル数">
【例】<img src="images/1.jpg" border="1">
※画像にリンクを指定すると、通常は枠が表示されますが、border="0"に設定すれば枠は表示されません。

画像と文字の配置を指定する
<img src="ファイル名とファイルまでのパス" align="top"> ※文字を画像の上に揃える
<img src="ファイル名とファイルまでのパス" align="middle"> ※文字を画像の中央に揃える
<img src="ファイル名とファイルまでのパス" align="bottom"> ※文字を画像の下に揃える

画像に文字を回り込ませる
<img src="ファイル名とファイルまでのパス" align="left"> ※画像を文字の左に置く
<img src="ファイル名とファイルまでのパス" align="right"> ※画像を文字の右に置く

画像のまわりに余白をとる
<img src="ファイル名とファイルまでのパス" hspace="ピクセル数"> ※画像の左右の余白
<img src="ファイル名とファイルまでのパス" vspace="ピクセル数"> ※画像の上下の余白

画像に説明コメントを入れる
<img src="ファイル名とファイルまでのパス" alt="コメント">
【例】<img src="images/1.jpg" alt="イラスト">
※alt属性を指定しておくと、トラブルで画像が表示できない場合でも、画像に代わってコメントを表示できます。
また、画像と違ってテキストなので、検索エンジン対策にも有効です。

>> HTMLタグ一覧に戻る