初級編8

 画像表示徹底解説
   何故か画像が出ない時の特別講座。


ここまで来ても上手く画像表示が出来ないって方へ、もう一歩詳しく解説致します。 上手く進んでいる生徒さんも復習の積りで読んでおいて下さい。 この先でトラブル発生した際に、役に立つことでしょうから。
さてさて、画像表示の書式( IMG SRC="画像名.拡張子" )は理解されていますか。スペル間違いには十分注意しましょう。 繰り返しますが、タグの大文字小文字は問題ありませんので。但し、画像名と拡張子は大文字小文字にケアしておいて下さい。後々、ホームページを 公開する際にサーバーによっては大文字と小文字で別物と判定する場合があります。この点は中級編以降で解説しますね。

書式(タグ)は正しいのに画像が表示されない場合は、壊れたマス目が表示されたり、画像が割れたイメージになります。こんな感じで。

ちゃんとタグを書いているのに、何故なんだっ!とお怒りになる前に冷静にチェックしましょう。
まず、上記の通りスペルチェックです。タグのスペルも大事ですが、画像名や拡張子もスペルチェックしましょう。 画像の拡張子は.jpg.gif.pngなどがあります。 私もチェック漏れして、うっかりと間違えていたりします。

さて、ここからです。それでも画像が表示されない時に疑われるのは 画像の置き場所 です。 ここまでの画像表示書式は下記の通りですね。

<img src="MSM.jpg">
これはHTML文と画像データが同じフォルダ( myHP )に入っていることが前提です。 もし仮に、画像フォルダ(pictという名前のフォルダ)を作っていて、その中にある画像データを表示させる場合は下記のようになります。

<img src="pict/MSM.jpg">
このフォルダというものはディレクトリーという概念に通じます。ディレクトリの解説は次に回すとして、 ここではデスクトップの myHP というフォルダにHTML文と画像データが一緒に入っているかどうかのチェックです。

デスクトップを見て、こんなフォルダが出来ていますか。
※ゴミ箱は関係ないのですが、デスクトップの意味を理解戴く為に表示させています。

さてさて、このmyHPフォルダを開けてみましょう。そうすると、HTML文と画像データが見つかる筈です。


もし、abc.htmlというHTML文は見つかるけれど、MSM.jpgが見えない場合は画像データの取り込みミスか、もしくは置き場所の問題です。 このフォルダの中にHTML文(abc.html)と画像データ(MSM.jpg)が並んで見えるように画像データを移動させて下さい。 これで解決する場合が最も多いようです。

ここまでチェックしても上手く行かない場合は、いよいよ画像データが怪しいということになります。怪しいとは、拡張子とデータ形式が不一致ということです。 これは少々面倒な話です。画像データとして問題ないものを取り込んでお使いいただくしかないのですが、向上心旺盛なる生徒さんには 「IrfanView32」 を紹介しましょう。
インストールや基本操作は下記のページから進んで下さい。
●IrfanView32のページ●
面倒かもしれませんが、IrfanView32は高機能なフリーウェア(無料)ですので、インストールしておいて決して損はありません。

インストールしたIrfanview32で、表示させたい画像を開いてみましょう。拡張子の間違いはこれで確認出来ます。次のような画面が出たら、 拡張子の間違いです。


問題が発見されたので、喜んで「はい」を押しましょう。正しい拡張子に設定してくれます。
画像が展開されたら、何も加工せずに「名前を付けて保存する」に進みます。 そうすると下記のような画面が出ますので、myHPフォルダの中に拡張子.gif(.GIF)で保存されるように設定します。これでOKです。 勿論ですが、拡張子が変わったらHTML文の方に書いたデータ名も修正しましょうね。


HTMLのようなテキスト文書は拡張子を名前の変更で対応して問題ありませんが、画像データの場合に名前の変更で拡張子を修正することは 不可なのです。画像の拡張子は画像加工ソフトで変更するということを覚えておいて下さい。

さてさて、これで問題解決した筈です。もう一度、チェック事項を列挙致します。
  1. 最初にHTML文のタグのスペルが正確に書かれているかどうか
  2. HTML文と画像データが同じフォルダに入っているかどうか
  3. HTML文で指定した画像名と実際の画像データ名が一致しているかどうか
  4. 画像データの拡張子が正しいのかどうかを画像ソフトでチェックする
それでも、どうしても画像表示出来ない場合は、HTML文と画像データをメールに添付してお送り下さい。こちらでチェック致しますので。

質問メール  SCHOOL TOP