• ベストアンサー

タグが正常に動作しません。

以前質問したFTPは諦めて、メモ帳でタグを使って ホームページを作りました。 参考にしたのは以下のサイトなのですが、 http://village.infoweb.ne.jp/~hometown/index.htm のサイト内の「画像を貼る(基本)」に書いてあった タグがうまく動作しません。 <img src=*****.gif alt=&&& width=115 height=80> というタグなのですが、*****の部分に画像のファイル名をいれます。 この方法を使うと、画像をアップローダーでアップロードしなくてすむようです。 実際に正しく(半角英数)で入力してみると、 自分のパソコンの中では見れるのですが、 インターネットに接続して誰からでも見られるようにすると×印がでてきてしまいます。 なぜでしょうか?お願いします。

  • himeD
  • お礼率55% (78/141)

質問者が選んだベストアンサー

  • ベストアンサー
  • nana_ko
  • ベストアンサー率19% (89/467)
回答No.4

もう回答出ちゃってますね^^; みなさんの言われているとおりです。 > この方法を使うと、画像をアップローダーでアップロードしなくてすむようです。 サイトのほうを確認させていただいたんですが、"アップしなくてもよい"なんてことは一言も書かれてません。 ホームページのデーターはサーバ上にアップすることでみなさんが見れるような仕組みになっています。 なので、ネット接続で見れずにローカル(自分のパソコン)で見れるのは当たり前なんです。 必要なデータは全てサーバ上にアップするようにしてくださいね。 それから、参考までに トップページが http://111.222.ne.jp/ というスペースを持っているとします。 a.gifと言う画像をindex.htmlに貼り付ける場合 <img src="a.gif" alt="画像の名前"> のように記述しますよね? 実際は <img src="http://111.222.ne.jp/a.gif" alt="画像の名前"> となっているんです。 理解していただけましたでしょうか?

himeD
質問者

お礼

はい、わかりました。 本当に恥ずかしいです。 私が早とちりをしてしまいました。 これからもっと勉強します。 ありがとうございました!

その他の回答 (4)

noname#4980
noname#4980
回答No.5

みなさん仰るとおり、指定の画像が、インターネットを介して見える場所に置いてないからですネ。ご自分のPCがネットに接続されていても、PC内のファイルを見せられるわけではないです。 また、<img>タグは、<img src="*****".gif alt="&&&" width=115 height=80> のように、SRC属性とALT属性の値は引用符で囲む必要がありますヨ。(たまたまここに書いたときに囲まなかっただけかな?)

himeD
質問者

お礼

引用符は必要だったんですね! それも知りませんでした。 無知で本当にすみません。 教えてくださってありがとうございました。

  • sancho
  • ベストアンサー率19% (20/103)
回答No.3

HTMLファイルと一緒に画像ファイルもアップロードしないと、画像を表示することはできません。 自分のパソコン上で見れるのは、パソコンに保存されている画像を参照しているからです。 HTMLファイルをアップロードした場合はアップロード先で画像を参照する事になるので、画像もアップロードする必要があります。

himeD
質問者

お礼

今考えてみれば皆様のおっしゃるとおりです。 稚拙な質問をして恥ずかしいです。 教えてくださってありがとうございました!

  • mrumesuke
  • ベストアンサー率45% (254/557)
回答No.2

>この方法を使うと、画像をアップローダーでアップロードしなくてすむようです。 間違いです。 アップロードしないから >自分のパソコンの中では見れるのですが、 >インターネットに接続して誰からでも見られるようにすると×印がでてきてしまいます。 という結果になります。 公開するものはすべてアップロードする必要があります。(もしくはあなたのPC自身を公開するか ←中~上級者向けですが)

himeD
質問者

お礼

アップロードは必要不可欠なんですね。 まだまだ勉強がたりません。精進します。 ありがとうございました!

  • agfa
  • ベストアンサー率38% (164/424)
回答No.1

****の部分に画像のファイル名を入れたとしても、そのファイルはあなたのPCの中にしかないわけですから見れるわけがありません。 FTP等でサーバー上に画像データーをアップロードして、その画像のある場所のアドレスを****に記述して初めて見ることができるのです。 以前の質問がどういったものかわかりませんが、根本的にいろんな部分で誤解があるようですので、いろいろ勉強してみてガンバッテクダサイ。

himeD
質問者

お礼

納得しました。 もう少ししっかりとHPについて勉強したいと思います。 ありがとうございました!

関連するQ&A

  • 一つのタグ内での要素の優先順位?ってあるのでしょうか?

    こんにちは。よろしくお願いします。 自分が作成していたWebシステムのページをアクセシビリティチェックツール~にかけ出てきたエラーのことでちょっと疑問に思い質問させていただきます。 ・一つのタグ内の要素の優先順位は、厳密に言うとあるのだろうか? ということなんですがー。。。 チェックにかけた項目は <img>タグです。 ・<img src ="img.gif" alt ="イメージ画像" width ="100" height ="100"> と ・<img src ="img.gif" width ="100" height ="100" alt ="イメージ画像"> と、の違いなのですが、上記タグではOKが出るのですが、下記タグでは、間違い!!と表示されるようです。 この場合、<img>タグ内の要素について、src→alt→width→heightという優先順位がついているのか、それとも、ただ単にそのアクセシビリティチェックツールのバグなのか。 タグ内要素の優先順位~についてご存知の方がいましたら、ご教授願えませんでしょうか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像を縦に並べたら隙間ができることについて

    画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • HTMLのタグ内をすべて大文字・小文字に変換

     Windowsのフリーソフトで、HTMLのタグだけに限定して大文字・小文字に変換できるソフトってありますか?  例えば、大文字に変換させたいなら、 <img src="image/image.gif" alt="イラストです。" width=100 height=100>  というタグを <IMG SRC="image/image.gif" ALT="イラストです。" WIDTH=100 HEIGHT=100>  というように変換させたいのです。URLなどは変換せずに、あくまでタグだけです。  作っているページが統一性無いため、全部統一させたいので……  そういった機能のついたソフトはないでしょうか。出来れば、レジストリをいじらないものがいいです。  よろしく、お願いします。

  • HTMLタグ

    画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦5列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006">&nbsp;&nbsp; <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/apareru.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします

  • ALT属性に見出しタグをつけると画像がズレます。

    見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • tableの作成方法について

    よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>

    • ベストアンサー
    • HTML
  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • 画像切り替え

    <div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。

専門家に質問してみよう