HTML 画像

imageタグ

画像を表示したい場合<img>タグを使用します。src属性（srcはSourceの略）で画像を指定して表示します。

<img src="画像のURL(パス)" alt="画像名">

imageタグには終了タグが存在しない。

<img src="https://codinghaku.com/images/logo.jpg">

<img src="images/logo.jpg">

上が絶対パスを指定した書き方で、下が相対パスを指定した書き方です。どちらも同じ画像が表示されます。

HTMLファイルに画像を配置しても、画像表示されない場合があります。代替テキストを付属しておけば、画像を読み込めない時にもテキストが表示されます。

また、代替テキストの設定は、SEOの観点からも効果的です。ページに表示させる、何らかの意味を持った画像には、全て代替テキストを付属するようにしましょう。

画像の大きさは、以下のようにimageタグの中で指定できます。

 <img src="画像.jpg" alt="画像あり" width="271px" height="243px">

画像サイズの比率は維持される場合が多いので、widthだけを指定すれば結構です。

pxだけでなく、以下のように％で指定することも可能です。この場合も、画像サイズの比率は維持されます。

<img src="画像.jpg" width="70%">

CSSで画像の位置を好きな場所に配置することができます。詳細は後述します。