HTMLで画像を入れる方法

Webページを作る上で画像を挿入することが多々あると思います。文字だけのページではどんなにいい記事を書いたとしても文字ばかりでは読む気が無くなりますよね。

記事に関連するような画像を入れることでワンクッションが入り、再び文章を読もうという気になります。本記事では、HTMLで画像を入れる方法を解説します。

HTMLで画像を入れるにはimgタグを使う

HTMLで画像を入れるにはimgタグを使います。読み方は「イメージタグ」と呼ばれます。imgは画像の英語「image」の母音を抜いたものになります。よく、imageはimgで略されることがあるようにHTMLでもimgと書きます。

基本構文は以下の通りです。

<img src="image.png" alt="イメージです">

srcには入れたい画像のパスを入れましょう。上記の基本構文の場合、htmlファイルと同じフォルダにあるimage.pngという画像をページに表示させます。

altは画像上にマウスポイントを持っていた時に表示させれるキャプションです。

画像のサイズを指定する

画像のサイズを指定する方法はimgタグの中にwidth(幅）とheight(高さ）を指定します。構文は以下の通りです。

<img src="image.png" alt="イメージです" width="400" height="300">

数字はピクセルになります。そして、数字は"（ダブルクォーテーション）で囲いましょう。