意外と簡単！HTMLで画像表示の方法と表示されない時の9つの原因

公開日：2022/09/07　更新日：2022/09/15　

※本ページにはプロモーション(広告)が含まれています

HTMLでも簡単に画像表示ができることをご存知ですか。画像を表示することで、よりわかりやすく商品やサービス、サイトイメージを紹介することが可能です。画像表示にはimgタグを用い、難しい操作も必要ありません。

ここではHTMLの画像表示方法と表示されない場合の主な原因について紹介していきます。画像表示方法は簡単ですが、さまざまな原因が理由で上手く表示できない場合があります。

そんなときは考えられる９つの原因を見直し、再度アップロードを試みてみましょう。特に、最近になってHTMLに興味を持ち始めた方は参考にご覧ください。

[ad name=”adTop”]

１.HTMLで画像を表示させる方法

HTMLでも画像を表示させることが可能です。テキストだけの説明・紹介よりも、画像がある方が信憑性が増しますし、閲覧者も見やすくなります。imgタグを用いて画像表示をしますが、非常に簡単ですので、しっかりと確認していきましょう。

１.imgタグを用いる

HTMLで画像を表示させたい場合はimgタグを用います。imgとは「image（画像）」の略称のことです。imgタグを用いることで簡単に画像表示ができます。

今後はWebP対応が必須になるかも

現在多く使用されているJPGやPNGはファイル容量が大きいという問題があり、2010年頃からGoogle社手動でより軽量な画像ファイル形式としてWebPが開発されてきました。

多くのWebサイトでも導入が進められてきており、今後はimgタグだけでなくpictureタグを用いてWebP対応をすることが望ましいでしょう。

全てWebPにしてしまうと、対応していないSafari等で画像が表示されなくなってしまいますので、imgタグとの併用が必要です。

２.srcでどこに画像があるかを指定

imgタグで画像を表示する際は”src”属性を指定します。「＜img src=”beer1.jpg”＞」というように、値にはダブルクォーテーションで囲った画像のアドレスを入力します。「＜img src=”画像アドレス”＞」を覚えておきましょう。

画像ファイルの場所は「絶対パス」か「相対パス」で指定する

「src」の中には、画像が置いてあるサーバーの場所を示します。

この時、「https://~~~」と全てのパスを表記する方式を「絶対パス」、「img.png」などファイル名だけの表記や「./../img.png」など、現在のディレクトリを基準に画像ファイルのある場所を示す「相対パス」の二通りがあります。

おすすめは絶対パスですが、サイトのURLが変更する時など困るので、サイトのURLは定数で定義しておいて、定数を使ってドメイン部分を表現し、そこに連結して画像までのパスを示す方法が、運用上は最もスマートです。

本番環境と開発環境で分けている場合でも、定数部分のアドレスを変えればいいだけなので、手間がほとんどありません。

３.altは代替テキスト

「img src=”beer1” alt=”ビールの写真1”」というように、alt属性には画像の説明を入力します。画像説明は、目の不自由な方向けの読み上げ機能や一般的な音声機能などで読み上げてくれます。

「img src=”画像アドレス” alt=”画像説明”」と覚えておきましょう。

４.対応している画像の形式

対応している画像形式はGIF形式、JPEG形式、PNG形式です。それぞれ、特徴が異なっており向いている画像も違います。また、PNG形式は、古いブラウザでは対応していない場合があるため注意しましょう。

１.GIF

GIH（拡張子.gif）は、８bit：２５６色まで使用ができます。色数が少なめの画像に適しており、イラスト画像などに向いています。

２.JPEG

JPEG（拡張子.jpg）は、２４bit：約１６７７万色まで使用ができ、色数が多いため写真などの複雑な画像に向いています。

３.PNG

PNG（拡張子.png）は、２４bit：約１６７７万色まで使用でき、色数の少なめなイラスト画像や写真、どちらにも向いています。ただし、写真の場合はデータ量が大きくなってしまいます。

２.CSSで画像編集する

画像の表示はHTMLタグのみで簡単に行えます。しかし画像を表示させたら完成ではありません。表示させるだけではなく、画像のサイズや配置位置を適切に指定することが重要です。

本項目では画像に関連するCSSプロパティとその使い方をご紹介します。HTMLやCSSを扱う上で多用することになるものばかりなのでぜひ参考にしてみてください。

１.「width&height」サイズを変更

画像サイズの変更は「width」と「height」を用います。これらのプロパティをimg要素に対して設定することで自由に画像サイズを指定することができます。

img{
width:200px;
height:100px;
}

横幅200ピクセル、縦幅100ピクセルの画像が表示されたかと思います。このプロパティは画像以外にも利用することができる非常に汎用性の高いプロパティとなっています。

またCSSのサイズ指定にはいくつかの種類があります。上記では絶対値で指定するピクセルを例にご紹介しましたが、相対値基準で指定するものもあります。

px:サイズを絶対値で指定する

指定したサイズをそのまま表示させるものです。もっとも分かりやすいですね。

%:サイズを相対値で指定する「親要素基準」

親要素のサイズを基準にサイズを決めるものです。%で指定しておくことで親サイズに比例してサイズを自動調整するので使いやすい指定方法の一つです。

em:サイズを相対値で指定する「親要素基準」

効果は%と全く同じですが、記述方法に違いが一つあります。100%は1em相当となります。50%なら0.5em、150%なら1.5emと記述します。

rem:サイズを相対値で指定する「ルート要素基準」

ルート要素とはhtml要素のことを意味します。html要素を基準としてサイズを指定します。

２.「position」配置位置を変更

positionは配置基準を設定するプロパティです。自分の思い通りに配置場所を設定できるので利用することが多くなっています。

static:配置方法を指定しない（初期値）

配置方法を設定しないニュートラルな状態です。何も指定しなければこの値が初期値に設定されています。わざわざ記述する必要もありませんので使う機会はほとんどありません。

relative:相対位置で指定する

staticを指定した場合に表示される位置を基準として相対位置を指定します。

absolute:絶対位置で指定する

親要素にstatic以外の値を指定している場合は、親要素の左上が基準位置に。親要素にstatic以外の値を指定していない場合はhtml要素の左上が基準位置になります。

fixed:絶対位置から指定して固定する

fixedも絶対位置への配置となります。absoluteと違う点は画面をスクロールしても位置が固定されたままという点です。

３.「text-align:center」中央寄せ

HTMLの画像表示は何も設定しなければ左寄せで表示されます。これらの画像を中央寄せにしたい場合はCSSで指定するのが一般的な方法となります。

使えるプロパティはいくつかあるのですが、その中の一つに「text-align」というプロパティがあります。値に「center」を指定することで表示位置を中央に寄せることができます。

４.「background-image」CSSから画像設定もできる

画像を表示させる方法はHTMLタグを利用するのが一般的ですが、CSSから画像設定をすることもできます。使用するプロパティは「background-image」です。このプロパティをHTMLタグに指定すると背景画像を設定することができます。

background-img{
background-image:url(../img.jpg); //画像パスを指定
background-repeat: no-repeat; //リピートの有無を指定
}

CSSで表示させた方が良い画像

CSSで表示させるのに向いている画像は「背景画像」「アイコン画像」などが挙げられます。これらは文書としてなくても困らない画像ですから、altタグなどで代替テキストを用意する必要がありません。

CSS側で管理することでHTMLファイルをすっきりさせることにも繋がりますのでぜひ使い分けてみてください。

３.画像が表示されない場合に考えられる9つの原因

サーバにアップロードしたは良いものの、画像が表示されない場合があります。画像が表示されないのには必ず原因があり、その原因は意外にもちょっとしたミスであることが多いです。

ここでは 画像が表示されない場合に考えられる９つの原因について紹介しています。どれも基本的なことだからこそ、実際の場面で一つひとつ見直すようにしましょう。

１.回線の混雑

ありがちな原因ですがWEBサーバが混雑している場合は画像が表示されないことがあります。時間をおいて再度試してみましょう。もしくは、混雑が少ないであろう夜中や朝方などの時間に読み込んでみるといいでしょう。

２.セキュリティソフトによる干渉

Norton Personal FirewallやNorton Internet Securityなど、セキュリティソフトをインストールしている場合はセキュリティソフトが邪魔をして画像が正しく表示されない可能性もあります。

セキュリティソフトを使用している場合は、一旦、セキュリティをオフにして再度試してみましょう。

３.タグの入力ミス

画像表示に限らずですが、上手く反映されない場合はタグの記述を間違えているかもしれません。「＜img src=”画像アドレス”＞」で、書いたコードが間違っていないか再度確認をしましょう。

急いで作っているときや惰性で作業をしているときに起こりがちなミスです。

４.画像ファイルのパスの間違い

正しく画像が表示されない原因として画像ファイルのパスが間違っている可能性があります。「file://〜」と画像ファイルのパスがなっている場合は、インターネット上では見ることができません（自分のパソコンでのみ）。

画像ファイルへのパスは「相対パス」か「絶対パス」による記述が必要ですので確認するようにしましょう。「＜img src=”file://〜〜□□.gif” alt=””＞」などになっている場合は、ほぼ間違いです。

５.ファイル名が間違っている

ファイル名が間違っていて画像が表示されない可能性もあります。全角文字が含まれていないか？大文字と小文字を間違えていないか？スペースが余計に入っていないか？スペースが足りなくないか？拡張子が抜けていないか？など、もう１度確認しましょう。

ファイル名は１文字でも間違っていれば、上手く認識されず正しく画像が表示されません。また、ファイル名の先頭の文字が数字の場合は、サーバによっては拒否されることもあるため気をつけましょう。

６.画像ファイルの破損

画像ファイルが壊れている場合は、正しく表示されません。念のため、自分のブラウザで画像ファイルを開いてみましょう。

自分のブラウザで正しく表示されれば問題ありませんが開けない場合はファイルが壊れている可能性もあります。他のファイルを用意しましょう。

７.画像の保存形式の間違い

該当画像の保存形式が間違っている可能性もあります。一般的に多くのブラウザがサポートしている形式は「GIF形式」「JPG形式」「PNG形式」の３つです。

３つの形式以外もサポートしているものもありますが、念のため保存形式を確認してみましょう。

８.画像ファイルのアップロードが未完了

そもそも画像ファイルのアップロードが未完了な可能性もあります。もしくは、別のディレクトリにアップロードしている可能性もあります。

「”http://サイトURL/アップロードした画像のファイル名”」で画像が表示されるか確認をしましょう。

９.アスキーまたはテキストモードで転送している

アスキーモードもしくはテキストモードでの転送になっていませんか。画像ファイルはバイナリーモードで転送する必要があるためアスキーやテキストモードの場合は正しく表示されない仕組みになっています。

バイナリーモードになっていない場合は、FTPソフトをバイナリーモードに設定しましょう。

まとめ

HTMLでもimgタグを使って簡単に画像表示ができます。画像を載せることで、表現の幅が広がりますし、閲覧者に対してもテキストのみ以上により具体的な訴求ができるようになります。

画像は非常に簡単に表示はできますが、ちょっとしたミスなどが原因で上手く表示されないことも少なくありません。

ファイル名や画像形式の間違い、画像ファイルの破損、タグの入力ミス、セキュリティソフト、パスの間違いなど、画像が上手く表示されない場合は、ここで紹介した９つの原因について確認をしていきましょう。

きっと画像が正しく表示されるはずです。興味がある方は、早速、好きな画像を取り入れてみましょう！