記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【HTML】画像表示させる方法+表示できない場合の原因と対策(初心者向け)

【HTML】「画像の表示方法」「画像の位置・大きさ」「表示されない場合の対処方」を初心者のかた向けに解説。
画像表示の基礎知識の解説はもちろんの事、すぐに実践的に使えるようになる為、各方法をサンプルコード付きで解説。
実際に手を動かして学ぶことができますので、初心者の方も安心して使用する事ができます。

カテゴリ: HTML/CSS

こんにちは!
WEBサイト制作をはじめたけど、「画像ってどうやって表示するんだろう・・」
色々試してみたけど「上手く表示されない・・」
画像表示はできたけど、「思うような位置・大きさにできない・・」
そのように困っている、初心者WEB制作者のかたも多いのではないでしょうか?
画像表示できる事で制作の幅は大きく広がります。
今回は初心者の方向けに「画像の表示方法」「画像の位置・大きさ」「表示されない場合の対処方」などを具体的に解説していきます。

画像の表示

imgタグ・src属性

さっそく、画像を表示してみたいと思います。 画像の表示は<img>タグ、src属性を使用します。

サンプルコード表示結果↓

画像の表示

HTMLサンプルコード

※解説
<img src =”画像URL”>を記載し写真を表示します。
imgタグ:HTMLで画像を表示するには、<img>タグを使います。
src属性:srcのあとに表示したい画像URLを記述します。
ここまでが基本的な画像の表示方法です。

alt属性

alt属性は写真の説明を指定します。
追加しコード内に記入してみます。

サンプルコード表示結果↓

画像の表示

HTMLサンプルコード

※解説
alt属性には、画像の説明を記述します。
通常ブラウザには表示されませんが、alt属性を記入する理由として
1.検索エンジンにコンテンツの内容を伝える事ができる
2.不具合で画像が表示されない場合にalt属性の値がブラウザに表示される
3.音声読み上げの機能を使用した際の、読み上げテキストとして役立つ
 などがあげられます。alt属性はなるべく記入しましょう。

title属性

title属性は、画像に対して補足説明をつけたい時に使用します。
下記のようにtitle属性を追加しコード内に記入してみます。

サンプルコード表示結果↓

画像の表示

HTMLサンプルコード

※解説
title属性は、画像に対して補足説明をつけたい時に使用します。
補足がなければ、無理につける必要はありません。

width、height属性

画像の幅、高さを指定する事ができます。
下記の様に、width,heightを指定したコードを追加して記入してみましょう。

サンプルコード表示結果↓

画像の表示

HTMLサンプルコード

※解説
width,heightを指定し、画像サイズの変更をする事ができました。
今回はピクセルでの指定でしたが、パーセントでも指定する事が可能です。
お好みのサイズに合わせて変更してみて下さい。

絶対パス相対パス

画像を表示する上で「絶対パスと相対パス」はとても大切な概念になってきます。
そもそもパスとはファイルまでの道筋を言います。
目的のファイルがどこのフォルダに保存されているかを示す道順の様なものです。

絶対パス

絶対パスは常に同じスタート地点から、常に同じ経路になります。

画像ファイルがある、webサーバーのURLアドレスが“http://sample”だった場合
絶対パスの指定方法は、srcの後にファイルのURLアドレス(“http://sample”)を記述します。

相対パス

相対パスは、現在地から目的地までの相対的な経路を表ます。
HTMLファイルがある所を起点とし、画像ファイルまでの場所を記述します。

HTMLファイルがある所を起点とし、画像までのパスを記述し画像を表示させます。
絶対パスと相対パスの使いわけは、画像ファイルが同じwebサーバー上にあれば「相対パス」同じサーバー上になければ「絶対パス」と考えてみて下さい。
「絶対パス」「相対パス」の概念は少しむずかしく感じてしまいますが、WEB制作では避けて通れない概念となります。もっと詳しく知りたい方は下記を参考にしてみて下さい。

https://techacademy.jp/magazine/5801

画像の保存形式

パソコンで画像データを扱う際、ファイル名の後ろに「.jpg(.jpeg)」「.png」「.gif」などが記されています。
これらは拡張子と呼ばれており、そのファイルがどんな形式のデータであるかを表ています。
その他にも画像拡張子は存在していますが今回は代表的な、上記3点を解説していきます。

jpg(.jpeg)

jpg(.jpeg)形式は写真に適したファイル形式です。
拡張子の「.jpg」、「.jpeg」の2種類ありますが、同じ画像ファイル形式です。
デメリットとしては、圧縮画像での保存となるため、画質が少し悪くなってしまい、一度保存してしまうと元の画質には戻ることができません。

png

png形式とはwebでの画像形式です。
透明や半透明の画像を作成できる機能があります。
デメリットとしては、RGB(画面表示用の色の設定)のみの対応となっており、CMYK(印刷用の色の設定)に対応していないため、印刷するとパソコンで表示されていた色と変わってしまいます。

gif

gif形式とは、アニメーション、イラスト、ロゴマークなど、境界がはっきりしているイメージの保存に向いています。透明や半透明の画像も作成できます。
デメリットとしては、データ容量が比較的少なく、表示色は最大256色のためグラデーションが綺麗に表現しにくいです。

上記3点が代表的な画像ファイル形式です。
それぞれにメリット・デメリットがあるため、用途を明確にし選択して下さい。
もっと詳しく知りたい方は下記を参考にしてみて下さい。

https://sole-color-blog.com/blog/103/

画像の配置

画像を中央寄せ、右寄せにする。

サンプルコード表示結果

HTMLサンプルコード

※解説
スタイルシートでそれぞれの画像を真ん中、右寄せに指定します。
各写真にスタイルシート、「text-align:center;」「text-align:right;」を指定し画像の位置を移動させています。

写真を横並びに表示する

方法は3点あります。
①imgタグを続けて記載する②float: leftを指定する③display: flex指定する
順番に解説していきます。

①imgタグを続けて記載する サンプルコード表示結果

HTMLサンプルコード

※解説
<img>タグを連続で記載すると、並んで表示する事ができます。

②float: leftを指定する サンプルコード表示結果

HTMLサンプルコード

※解説
スタイルシートでfloat: leftプロパティを指定し、画像を横並びにします。


③display: flex指定する サンプルコード表示結果

HTMLサンプルコード

※解説
スタイルシートでdisplasy: flexを指定し、写真を横並びにします。

画像をピクセル単位で指定位置に表示する

サンプルコード表示結果

HTMLサンプルコード

※解説
スタイルシートで、「position:absolute;」 を指定し画像の位置指定します。

画像と文字を重ねる

サンプルコード表示結果

サンプルコード

styleサンプルコード

※解説
スタイルシートで、「position:relative;」「position:absolute;」 を指定し画像・文字の位置を指定し、文字を重ね合わせます。

cssでの画像表示

CSSからも画像表示させる事ができます。
CSSのbackground-imageを指定します。

background-image

background-imageとは背景に画像を指定するプロパティです。
サンプルコード表示結果

CSSでbody内に写真が表示↓

HTMLサンプルコード

Styleサンプルコード

※解説
「backgroun-image」を使い背景画像を表示すことができています。
「background-repeat: no-repeat」画像を繰り返し表示させないプロパティです。

画像が表示できない注意点

画像が表示できない主な原因は5点あります。

原因1.画像ファイルのパスが違う
画像が表示できない原因で1番多いのがパスの違いによるもです。
絶対パスなのか、相対パスなのか、相対パスであればルートはあっているのか?
一度パスを確認してみて下さい。

原因2.ファイル名が間違っている
imgタグのsrc属性内に記述した、ファイル名が間違っていると画像は表示されません、また半角英数字以外の文字が混ざっていても、正常に表示されない事があります、日本語文字は避けましょう。

原因3.タグの入力ミス,
ファイル名などスペルミスを確認して下さい。
1文字でもスペルミスがあると正しく表示されません。

原因4.画像ファイルの破損
画像ファイルが破損していると、正常に表示する事ができません。
念のため、画像を再度アップロードし確認してください。

原因5.webサーバーの混雑
全ての設定が上手く行われており、画像ファイルにも問題がない場合は、サーバーの外部要因によって画像が読み込まれないケースがあります。
少し時間をおく、もしくは時間帯を変えてアクセスしてみて下さい。
これで表示されればwebサーバーの混雑が原因と判断できます。

まとめ

簡単にポイントをまとめます。
今回は画像の表示の仕方・表示できない場合の注意点について解説してきました。

1.画像を表示する基本は、imgタグsrc属性を使用。
<img src =”画像ファイル名”>をHTMLファイルに記載します。

2.画像表示ができない主な原因

原因は主に5つありました。
1.画像ファイルのパスが違う
2.ファイル名が間違っている
3.タグの入力ミス
4.画像ファイルの破損
5.webサーバーの混雑

よりよいwebサイトを作成するためには、画像表示は欠かす事ができません。
今回の記事を参考に、webサイトを作成してみて下さい!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。