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

img

今回は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

副業始めてみませんか。

元ホストのフリーターが月に60万円稼げるようになった、
ネット物販ビジネスとは?

スキル・経験なくても、小資金で始められるネットビジネスが無料で学べます。

コメントを残す

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

ABOUTこの記事をかいた人

CHUYA MIURA

普段は物販系のシステムの開発サポートや、中小規模のネット物販事業を行っている方や企業様向けに業務効率化支援サポートなどしています。システム開発経験 楽天 ヤフオク Amazon ヤフーショッピング BUYMA メルカリ などの作業効率かツールやシステムを開発してきました。個人でも物販をやってみて、物販ビジネスのどの部分が作業的に大変なのかを経験をいかして、現在はディレクションやコンサルティングサービスをしています。 物販関係のシステムを作成したい方にはご好評いただいております。物販システムを開発したい方に向けて、各プラットフォームのツール開発経験のあるプログラマーさんの紹介や、システム仕様書のサポートなどもしていますので、ご興味のあるかたはお気軽にご相談ください。物販経験 ネット物販のシステムを希望されるクライアントさんの気持ちを理解するため、2013年に個人でも物販をはじめました。 ヤフオク Amazon 楽天 などに出品して、月商100-300万になりました。1日に150件近くの出荷も経験し、それらの経験を元に現在サイトを運営しています。このサイトでブログをかいてくれている しんくんに昨年初めに中国仕入れを教えたところ、副業としては十分な結果がでたことを受け、初心者向けに情報を公開しています。ご興味あるかたはこちらへ連絡ください。(ご連絡の際は、ご用件も一緒にご連絡ください。)メール:sales☆fieroj.com(☆をアットマークに変えてください) Chatwork: Chuya-Miura