HP作成時の確認について

私はメモ帳を使用してＨＰの構文を作成しています。

私のPCでは問題ない様に思えたのですが、全くアクセスした事のないPCでアクセスすると表示されない画像があります。

過去において、拡張子のjpgとJPGはHP上では区別されて別物になりますが、
PC内では同じに扱われるようでした。

毎回、ＨＰの画像表示の問題について苦労しています。
（私の問題ですが・・）

簡便に、ＨＰと同じように確認する方法はない物でしょうか？
PC内のキャッシュをクリアするだけで可能なのでしょうか？
（毎回クリアするのも面倒ですが・・）

アドバイスを頂けると助かります。

質問者からの補足コメント

• 

  有難う御座います
  私がついて行けない（＾＾）
  
  しかし、本当のド素人なんです。
  テキスト文で作成できると言う事で今に至っています。

  No.2の回答に寄せられた補足コメントです。 補足日時：2015/09/16 19:04

• 有難う御座います
  ブラウザを複数用意して確認する・・・
  ＩＥでは一度アクセスして開くと、jpgもJPGも問題なく開いてくれたように思います。
  これが、他のPCで問題になって・・・エクスプローラ上で確認しただけでは判らない状況になっています。
  ＨＰビルダーではこの問題が解消できると言う事でしょうか？
  できれば、自分のPC上で確認できて、メンテナンスできれば御の字です。
  （毎回NET接続して確認するのも・・大変ですよね）

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/09/16 19:10

No.12 ベストアンサー 回答者： jyromp 回答日時： 2015/09/18 07:57

NO11です。

忘れ物をしました。

http://www.forest.impress.co.jp/library/nav/genr …

上のサイトあたりで何か便利なものがあれば良いのですが、少なくともメモ帳をお使いになるよりは便利なエディタがそろっています。これ以外にも

http://www.vector.co.jp/

などにもたくさんのフリーソフトがあります。

窓の杜とベクターと、どちらが良いかということですが、昔、自分はベクターの方に自作ソフトをアップしていたことがあります。誰れでもアップできますので（笑）一方窓の杜の方はなかなか掲載してもらえません。以上参考になりますでしょうか？

この回答へのお礼

有難う御座います。
頂いた情報から探してみます。
確かにメモ帳で作成するのもどうかとは思っていましたが、
転用転用で何とかしのいできましたが、
jpgとJPGの記述間違いが時々ありますので、これに病んでいました。
自分では終わったと思っていたのに、ある時気が付いて・・・・見直しに手間がかかる。

今はvixを使用して作成する様にはしているのですが、
編集する時にうっかり間違いを起こしてしまうんです。

お礼日時：2015/09/18 17:02

No.11 回答者： jyromp 回答日時： 2015/09/18 07:43

>拡張子のjpgとJPGはHP上では区別されて別物になりますが、

>PC内では同じに扱われるようでした。

その通りですが、表現を言い換えますと、Windowsは大文字小文字を区別しませんが、UNIXは区別するということです。

具体的にはUNIXサーバー上はXXXX.jpgとXXXX.JPGは異なるファイルとして扱われます。この点デジカメや携帯などで撮った写真はしばしば拡張子が大文字のJPGになっていますので要注意です。

もっともUNIXローカルシステムにおいては拡張子は有っても無くても構いません。ファイルの中身（ヘッダー）を見に行きますので。NO１０さんが、拡張子は関係ない、といわれているのはそのことでしょう。しかしそれは今ご質問者さんが悩んでおられる疑問とは関係無い事であり、そのようなことを考えられない方が良いです。そんなこと考えると余計わけが分からなくなってくる（笑）

No.10 回答者： ORUKA1951 回答日時： 2015/09/17 20:33

拡張子はこの場合一切関係ありません。

Windowsで脳が犯されると誤解している人が多い。
　拡張子が何であれ、HTTP応答ヘッダが正しければ画像として表示されます。極端な話、拡張子が.htmlや.cgi.phpでも画像が表示されることもある。

★問題は、ファイル名を含めてパスが違うと言うだけです。
　×印の画像を右クリックしてコンテキストメニューから画像だけを表示を選択して見て御覧なさい。画像がないといわれる。

　ウェブ開発でしたら開発ツールの多いfirefoxをお使いだと思いますが、そのアドオンのfirebugなどを使うと分かりやすい。
Web 開発 :: Add-ons for Firefox( https://addons.mozilla.org/ja/firefox/extensions … )

＞簡便に、ＨＰと同じように確認する方法はない物でしょうか？
　きちんと動作確認するためには、apacheなどのローカルサーバーをインストールする必要があります。
　そうすると、ブラウザとテキストエディタと、ローカルサーバーHTTP経由( htt://locla.host/ )がスムーズにアクセスできるのですが・・

　なお、ウェブ開発となるとHPはないでしょう。意味が通じなくなる。
ホームページ - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )
　ましてやHPだとヒューレッドパッカード社の事ですし。

この回答へのお礼

有難う御座います。
失礼しました、ご指摘通りで、
HPは私の思い込みで、他の人には誤解を与えますね。

Web開発・・・そんな知識はありません、残念ながら（＾＾）
手段はあるとの説明ですが、私にはちょっと難しそうです。

お礼日時：2015/09/18 16:50

No.9 回答者： jyromp 回答日時： 2015/09/17 20:01

NO7です。

その画像ファイルの拡張子はJPGと大文字になっていないですか？大文字でも小文字でもWindowsは区別しない、つまり同じファイルとして扱われますが、インターネットサービスプロバイダのサーバーはUNIX系であることが多いです。UNIXでは大文字と小文字とは区別します。つまり別ファイルとして扱います。なのでこちら側（パソコン側）でJPGと大文字になっていたらHTMLのコーディングも大文字にする必要があります。

なお×印の件は、画像ファイルとのリンク切れ（そのような画像ファイルは無い）とサーバーが判断しているためだと思います。その×印を右クリックしてプロパティを調べることもできるはずです。

フリーのソフトでHTMLチェッカーを探せば良いのがあるかも知れませんが、慣れないと結構使い方は難しいかも知れません。一番良いのは最初に書きました通り、LinuxとApacheを導入する方法です。これは汎用性があり、例えばサーバー側のログファイルをチェックすることにより、間違いを発見したりすることもあります。

話しは元に戻って、UNIXでは大文字と小文字を区別するということですので、一度この辺りを再チェックして見られたらどうでしょうか？

この回答へのお礼

有難う御座います
>インターネットサービスプロバイダのサーバーはUNIX系であることが多いです。
これなんですね、windowsで問題ないと思っていても、サーバー側で認識してくれていない。
本人は、問題ないと・・・・で、別のＰＣで見ると表示されない。

これを、自分のＰＣでひょじ確認できると楽だと思っての質問でした。

お礼日時：2015/09/18 16:45

No.8 回答者： Ogre7077 回答日時： 2015/09/17 18:45

No.4 の続きです

可能性5
Webサーバーに転送する際に、ディレクトリ名やファイル名が自動変換されている
英字の大文字小文字や、機種依存文字の置き換えなど
解
FTPなどの転送ツールの設定を見直す
または
変換されても大丈夫なように、ディレクトリ名・ファイル名・拡張子などすべてを、
* 大文字ではなく小文字にする
* チルダ(~)とバックスラッシュまたは円記号(\)は危険なので使わない
* いわゆる全角文字は使わない
に統一する

可能性6
画像を単体表示してみて 404 以外のエラーになったならば、Webサーバー側の設定で、
画像に IP address による表示制限がかかっている。
画像に User-Agent による表示制限がかかっている。
画像に Referer による表示制限がかかっている。
画像に 特定の PC またはユーザーしか通れない認証制限がかかっている。
解
サーバー管理者に問い合わせる

この回答へのお礼

有難う御座います
頂いた回答の様な難しい事ではないと・・・・
（私のレベルを超えている（＾＾））

可能性５、６も今の私の問題とは違うようです。
前に頂いた回答にあったと思いますが、拡張子の問題だろうと思います。
これが、後から確認するのに手間取っており
自分のPCの範囲内で確認できないだろうかと・・・・
という単純な内容のつもりでした。

お礼日時：2015/09/17 19:06

No.7 回答者： jyromp 回答日時： 2015/09/17 17:55

NO6の続きです。

具体例：
<a href="/jp/service/index.html">
<img src="/common/images/menu1-01_off.jpg" alt="サービス概要" width="128" height="40" class="changeImage" />

上はあるホームページの中の一部です。現実は上のような使い方になります。 alt="サービス概要" width="128" height="40" class="changeImage" />の部分は属性の付加定義部分ですのでここでは省略しますと、
（１）<a href="/jp/service/index.html">
（２）<img src="/common/images/menu1-01_off.jpg" >

ということになります。（１）の方がindex.htmlへジャンプするためのリンクで、（２）の方が画像ファイルへのパスになります。この場合はcommonディレクトリの下のimagesディレクトリに、JPEG画像menu1-01_off.jpgが存在するということですね。

上の行の方にコーディング間違いがありますとジャンプしません（404エラー）。下の方がコーディング間違いですと画像が表示されません。

以上参考になりますでしょうか？ご質問の意味を取り違えていたら申し訳ないです。

この回答へのお礼

有難う御座います
私の説明不十分もありご面倒をおかけします。
まず、ご指摘頂いた件については参考にさせて頂きます。
（私に十分な知識がありませんので）

問題は、ＨＰに所々サムネールの表示が「×」表示になっている。
おそらく拡張子の問題だと思います。
他の画は問題ありませんので、自分の不注意だと・・・（＾＾）

しかし、これが自分のＰＣ内では問題なく表示されますので気が付かないんですね。
他のところで表示して初めて、問題があると・・・。

自分のＰＣ内で検証できると手間が省けるのですが。

お礼日時：2015/09/17 19:02

No.6 回答者： jyromp 回答日時： 2015/09/17 16:14

コメント頂きありがとうございました。

タグ打ちでホームページを作るのは、"作る"という楽しさがあって良いですね(マークアップ言語を使った、れっきとしたプログラミングです)。

ちょっと気になったのですが、
a href=リンク先のアドレス（URL）
IMG src＝画像ファイルのアドレス（URL）
と違いましたっけ？（忘れてしまっていました）

で、
（１）<a href="20130717/Col-des-grands-montets/s/20130717-112346-0.jpg">
（２）<IMG src="20130717/Col-des-grands-montets/ss/20130717-112346-0.jpg">
（便宜上改行）

（１）と（２）は　－－－/s/2013ーーー　と
ーーー/ss/2013ーーー
の違いだけですね。これは間違いないんでしょうか？つまり画像ファイルへのパスが間違っていないかということなのですが？

パソコンが2台以上あれば1台のOSをLinuxにしておけば便利なんですけれども、、、Linuxの方にApacheというWEBサーバーを導入するのですが、Linuxが初めてであれば最初はちょっと面倒かも知れないですね。サーバー側でダイレクトにファイルをいじくったり、CGIのテストをしたりいろいろ便利ですよ。通常のISPは備えつけのCGIしか使えませんのでいろいろ試すことが出来ませんが、自分のネットワークの中にWEBサーバーを持っていると簡単に出来てしまいます。

この回答へのお礼

有難う御座います
パスについては問題ありません。
ファイルは同じファイル名を使用していますが、
ｓフォルダー内の物は大き目の画で、SSフォルダー内は小さ目の画になっています。

Linuxはまるで判っていませんし・・・、PCにOSを２つインストールしないといけないし・・・難易度もありそうですね。

ＰＣ内で確認して、それをそのままアップできると良いのですが・・。

お礼日時：2015/09/17 18:56

No.5 回答者： usa3usa 回答日時： 2015/09/17 06:54

＞アドバイスを頂けると助かります。

私は、
　すべての画像の拡張子を小文字に統一する
というマイルールを作り実行しています。

No.4 回答者： Ogre7077 回答日時： 2015/09/16 13:25

可能性1

画像パスを、ローカル指定している
<img src="file:///c:/Users/Tarou/homepage/picture/gazou.jpg">
解
HTML からの相対指定にする
<img src="picture/gazou.jpg">


可能性2
サーバー配置したファイル名と大小文字が一致していない
<img src="Picture/Gazou.JPG">
解
大小を実際のファイル名に合わせる


可能性3
ファイル名やディレクトリ名に空白を含む
<img src="my picture/i love you.jpg">
解
空白は危険なのでファイル名になどに使わない
<img src="myPicture/i_love_you.jpg">


可能性4
画像が jpeg 2000 や webp などの、表示できるブラウザが限られる形式である
<img src="picture/gazou.webp">
解
(ほぼ)すべてのブラウザで表示できる jpeg / gif / png に変更する

この回答へのお礼

有難う御座います
可能性3もあり、過去には十分な時間を取られました。
可能性2も同様で、表示されているのでなかなか気が付きませんでした。

記述は下記の様な物です。
<TD><a href="20130717/Col-des-grands-montets/s/20130717-112346-0.jpg"><IMG src="20130717/Col-des-grands-montets/ss/20130717-112346-0.jpg"></a></td>

自分のＰＣ内で、メンテナンス出来ると良いのですが・・・やはり難しいのでしょうね。

お礼日時：2015/09/16 19:17

No.3 回答者： jyromp 回答日時： 2015/09/16 09:27

そうか、パソコンが1台だとNO1さんの言われるように複数のブラウザで確認するぐらいですか。

IE、Firefox、Chromeの3つぐらいは最低限必要ですね。