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

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

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

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

27

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”

と記述します。

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

22

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

ピクセル値とは、画像の大きさの単位です

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

width=”100″ height=”75″

23

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

width=”50″ height=”37.5″

23

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

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

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

この画像は犬です。

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

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

画像に枠をつける

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

26

画像の種類

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

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

最後に

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

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

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

 

CTA

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

ネットショップNAVI管理人

2013年3月 ・物販を始める

5月 ・プロに教わるも赤字で二ヶ月でやめてしまう​

8月 ・自分で物販をやるが五ヶ月間赤字が続く​

12月 ・試行錯誤を繰り返し、10万円を稼げるようになる​

2014年1月 ・物販の生徒さん第一号ができる​

2月 ・生徒さん第一号の稼ぎはプラマイゼロ​ (生徒さん第一号は、現在毎月25万円ほど稼いでいる)

6月 ・15万円を稼げるようになる​  

7月 ・生徒さんが五人に増える​  
 
12月 ・20万円を稼げるようになる​

2015年1月 ・レベルを高めるため、物販の会社に就職​
   
12月 ・スキルを身に付け退社し、再び物販に力を入れる​

2016年10月 ・純利益66万円を稼ぐ

2017年10月 ・純利益74万円を稼ぐ