【HTML/CSS】コードが正しいのに画像が表示されない時は拡張子の表示設定を見直す!

画像が表示されないのは拡張子がおかしいから

スポンサーリンク


HTMLとCSSを用いてウェブサイトを制作をする時に、
コードには間違いがないのに画像が表示されない!
という困ったトラブルに遭遇したので、原因と解決方法をまとめておきます。

※HTMLとCSSに限らず、ファイルパスをあれこれするときに動作がおかしい場合、使える可能性があります。

コードは間違っていないのにいくら再読込しても画像が表示されない

先日、ウェブサイト制作中に、正しいコードのはずなのになぜか画像が表示されない事態に遭遇しました。

HTMLでは画像を表示させたい時、
<img src=”(画像のURL)” />
と書きます。

今回書いたソースも当然、以下のように書きました。

  • HTML上では「top.jpg」と記述
    index.htmlと同じ場所にあるimagesフォルダに対して<img src=”images/top.jpg” />と指定
  • 画像ファイルも名前は「top.jpg」になっている

なのに、いくらブラウザ上で読み込んでも画像が表示されません。

なにこれ?どういうこと??

と思ってよくよく調べてみると、
画像のファイル名が「top.jpg.jpg」っていうトンチンカンなものになっていたようです。

PC側の設定が、ファイル名に拡張子を表示しない状態だったのに、
うっかり手動で拡張子をつけてしまい、

[ファイル名.jpg].jpg

という珍妙なファイルが出来上がってしまったというミスです。

これでは、そもそもパス名が間違っているので、いくら再読込しても画像は表示されません。

では解決方法はというと、

  • PC側でファイル名+拡張子で表示する設定にする
  • 不要になったファイル名の「.jpg」を消す

これだけ。

ね、簡単でしょ?

PC側で拡張子を表示する設定にする方法

筆者の使っているWindows7でのやり方は以下の通りです。

Windows7フォルダのオプション

win7:コンピュータ→整理→フォルダと検索オプション

Windows7拡張子を表示させる

→表示タブ→「登録されている拡張子は表示しない」のチェックをはずす

Windows10ではもっと簡単にできるようです。

Win10:エクスプローラー→表示タブ
→「ファイル名に拡張子」にチェックを入れる

参考:Windows10 – ファイルの拡張子を表示/非表示にする

コードが合っていても画像ファイル側が間違っていると表示されない

今回のトラブルで、
いくらコードを正確に書いても、
画像ファイル側がおかしな設定になっていると、
ウェブページできちんと表示されないということを学びました。

ファイル拡張子だけでなく、

  • カラーモードの指定(Web用の場合はRGB)
  • ファイル名は英数のみにする(日本語が混ざるとダメな場合がある)

のようなミスもよくやりがちなので、
HTMLのコードは合っているのに画像が表示されなくて悩んでいる人は一度確認してみてください!

◆この記事を読んだ人にオススメ!

WordPressブログの表が変?スマホではみ出る時の対処法と解説!CSSにこのコードを入れるだけ!

デザインが苦手な人がゼロからレイアウトの基礎を学ぶのに最適な本ベスト3冊

『その痛みやモヤモヤは 「気象病」が原因だった』低気圧による症状に効く一冊

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でフォローしよう!

スポンサーリンク


校倉

投稿者プロフィール

「戦国らいふ」は校倉が管理しているブログです。
ブログと管理人についての詳細はこちら。
連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な相談等には対応しておりません

この著者の最新の記事

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。

 スポンサーリンク


おすすめ記事

  1. グラフィックボード選び方
    先日、初めてパソコンのグラフィックボード(ビデオカード)を交換しました。 購入にあたってパーツショ…
  2. 伊藤ハム通好み「ミミガー」
    沖縄料理の一つで、コリコリとした食感が特徴の「ミミガー」(豚の耳)。 物産展や沖縄料理屋でしか…
  3. AC電源交換
    プレイしているオンラインゲームの推奨環境が上がったことをきっかけに、先日グラフィックボードを変えよう…
  4. 性別欄
    性別違和感を抱える人にとってやっかいな、各種書類や会員カードの「性別欄」。 できればなくなってほし…
  5. イラスト模写
    アニメ・漫画絵にとどまらず、絵を描く、イラストを描くことを趣味にしている人はとても多いと思います。 …
  6. FF14暗黒騎士
    ファイナルファンタジー14初の拡張版、蒼天のイシュガルドで追加になったジョブ、暗黒騎士。 巷では難…
  7. 世界の辺境とハードボイルド室町時代
    『喧嘩両成敗の誕生』でも中世日本のトンデモ実態を紹介してくれていた、清水克行先生の新刊『世界の辺境と…
  8. FF14PVPヒーラー
    ファイナルファンタジー14はコントローラー(ゲームパッド)で遊んでいる方も多く、味方を瞬時にターゲッ…
  9. アマゾン 荷物届かない
    数日前にアマゾンで注文したBluetoothの機器とUSBの充電器が、 配達予定日になっても届かな…
  10. 性別違和感やXジェンダーが嫌な言葉で悩んだ時に使える思考の変え方
    最近はLGBT研修、なんて言葉も聞かれるようになってきたものの、まだまだ日本ではセクシュアルマイノリ…
 スポンサーリンク


記事を書いている人

校倉

ゲーム・創作活動・歴史などが好き。

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な人生相談等には対応しておりません

ページ上部へ戻る