HTMLで画像の追加してみよう！使い方紹介と応用例

今回はHTMLに画像を追加する方法をみていきましょう。

画像を追加することで、サイトがより見やすくなります。

HTMLに画像を追加してみよう！

htmlに画像を追加するには以下の構文に従って記述していきます。

<img src=”追加したい画像のパス” width=”画像の横の長さ” height=”画像の縦の長さ” alt=”画像が表示されない場合の代替テキスト“>

表示結果

追加したい画像はどこ？(パス)

追加したい画像のパスとは、画像が保存されている場所を指定するという意味です。パスの指定の仕方には絶対パスと相対パスの2種類があります。ここでは相対パスを例に説明します。

作成しているhtmlファイルがある場所と同じフォルダ (folder1とします) 内に、追加したい画像 (sample.pngとします) がある場合は、以下のように記述します。

img src=”./sample.png”

1つ上のフォルダ内に追加したい画像がある場合、

img src=”../sample.png”

と記述し、1つ下のフォルダ (folder2とします) 内に追加したい画像がある場合、

img src=”./folder2/sample.png”

と記述します。

画像の横、縦の長さを指定する

htmlでは画像の横と縦の長さをピクセル値か%で指定することができます。通常はピクセル値で指定することが多いのでここではピクセル値を例にします。

例えば、横の長さが100ピクセル、縦の長さが75ピクセルの画像を追加したい場合は以下のように記述します。画像のピクセル値は、ペイントなどのソフトで開いて調べてください。

width=”100″ height=”75″

上記の画像を横も縦も半分に縮小したい場合は以下のように記述します。

width=”50″ height=”37.5″

画像が表示されない場合の代替テキスト

画像が表示できない場合に表示するテキストを記述します。以下のようにテキストを記述します。(見る人の環境によっては、通信状態がわるかったりいろんな条件で画像が表示されないときがあります。)

alt=”この画像は犬です。”

htmlの画像に指定できる、他の属性

上記で説明したほかにも、様々な属性を付与することができます。

画像に枠をつける

borderを記述することで画像の周りに枠をつけることができます。

画像の種類

ここでは例としてsample.pngという形式の画像を扱ってきました。

画像の種類として、広く使われているものに「png」「jpg」「gif」「bmp」等があります。ただし、「bmp」はサイズが大きいのでhtmlに使用するには不向きと言われています。ですので「png」「jpg」「gif」のいずれかの形式を使用するようにしましょう。

最後に

いかがでしたか？今回はhtmlに画像を追加する方法について説明してみました。

最近のウェブサイトやネットショップはたくさんの画像を表示しています。

上手に画像を追加して、みやすいhtmlを目指しましょう！