HTMLの画像ファイルにリンクを貼る方法

このQ&Aのポイント
  • HTMlの画像ファイルにリンクを貼る方法を探しています。メモ帳でHTMLのタグを入力しても画像が表示されません。
  • ホームページ作成講座によると、画像ファイルをサーバに転送しておかないとタグでのリンクも表示されません。また、ファイル名の記述にも注意が必要です。
  • どなたかHTMLの画像ファイルにリンクを貼る方法を教えてください。
回答を見る
  • ベストアンサー

HTMLの画像ファイルにリンクを貼る方法?

HTMLの画像ファイルにリンクを貼る方法? 「メモ帳」にHTMLのタグを打ち込みIEに表示できるか試しています。画像がうまく出ません。 <image scr=”富士山.jpg”>と入力しました。 画像ファイルはマイドキュメントのマイピクチャーにある「富士山.jpg」です。X印が出て画面が出ません。他の太字/斜体文字/アンダーラインはOKです。ホームページのマニュアルにある「イメージファイルも同じ場所に置く・・」の意味がわかりません。何か一工夫必要なようです。どなたか教えて下さい。以上 >ホームページ「超初心者のためのホームページ作成講座」より ホームページは、いくつかのページを同じ場所(サイト)に置いています。イメージファイルも同じ場所に置いておきます。もし、イメージファイルをサーバに転送していないと、せっかくタグを使ってリンクを張っても表示されません。イメージファイルの名前を間違って記述した場合も、「サーバの中にはそんなファイルないよっ!」ということで、エラーになってしまいます。

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

□ フォルダをつくります。   HTMLをつくります。内容を記述します。   ここまでは出来ているようですね。 それでは、マイピクチャにある画像をコピーして、 そのフォルダ内に貼り付けてください。 次にその画像を「富士山」では無く、fuji に変更↓ 画像を右クリックで名前の変更(富士山は単なる例なのかな?) HTMLの <image scr=”富士山.jpg”> を 半角で <img src="fuji.jpg"> とします。 □ フォルダ内 |----  ○○.html |----  fuji.jpg フォルダ内は、上記の様に○○.htmlとfuji.jpgが同居する事になります。 それでは、○○.htmlを表示して F5 も押して下さい。 本来は、 <img src="fuji.jpg" width="幅" height="高さ" alt="富士山の写真"> のような属性も記述した方が良いでしょう。

tommy0313
質問者

お礼

有難うございました。参考になりました。

tommy0313
質問者

補足

 ご回答有難うございます。HTMLを学ぶ格好の材料となりました。もう少し質問を続けさせてください。 マニュアルにはフォルダの作成の記述は無く、メモ帳で作ったHTML言語を、保存時に「ファイル名をHTMLの拡張子にする」ことから始まりました。御説明により少しづつ判りかけてきました。 質問1:フォルダの中は「メモ帳で作ったHTML言語のファイル」は1つだけ可能ですか?それに「画像ファイルのJPGのファイル」の2種類でしょうか?別のメモ帳で「HTML言語のファイル」をもう一種類作って「HTMLの拡張子のファイル」が2つと「JPGの拡張子のファイル」で3種類では駄目ですね?試しましたが上手く行きませんでした。 質問2:拡張子.htmlで保存すると修正するときに出来ないので、用心の為、テキストファイルで別に保存しておく必要がありますか?それともIE上から修正可能ですか? 質問3:属性altとは、画像に関連する言語であればいいのですか? "富士山の写真”"富士山”などのファイル名の一部とか?   以上よろしくお願いいたします。新規質問のほうが良かったでしょうか? 以上

その他の回答 (4)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.5

NO.4の回答者です。 補足拝見済み。 ------------------- とりあえず、当初の目的だった画像は表示出来たのでしょうか? ------------------- NO.4 補足への回答: 質問1:回答1 >マニュアルにはフォルダの作成の記述は無く、 う~ん・・・ それを言うなら 「パソコンを買いましょう。電源を入れましょう」から説明しなければ・・・ フォルダを作らなくても 最低限パソコンの何処かのフォルダの中に入れる訳ですから、 わかりやすいように、任意の名前でウェブサイト専用のフォルダを作るだけ。  それ他、何が出来ないのか分かりませんが、 その入れ物、つまりフォルダが「サイト」「ルート」「ディレクトリ」になるから、 サブページも含め複数入れる事が出来る。(当然名前は各々) --------- ご自分の質問内容またはマニュアルを再読しましょう。 --------- >>ホームページ「超初心者のためのホームページ作成講座」より >ホームページは、いくつかのページを同じ場所(サイト)に置いています。イメージファイルも同じ場所に置いておきます。 --------- 「いくつかのページ」としっかり書いてありますよ。複数ファイルが置けるって事です。 もう少しツッコムと、サイトが大きくなると、 ファイルや画像がかなり多くなるので、 そのフォルダ(サイト・ルートディレクトリ)内に、 更にフォルダ(ディレクトリ)を作って整理すると管理がしやすい。 その替わり、画像のパスはディレクトリを指定しないと画像が表示されない。 質問2:回答2 別途テキスト保存は不要。 「右クリック」から「プログラムで開く」「メモ帳」 あとは修正して保存。 ブラウザから直で編集する方法もある。 質問3:回答3 altとは、代替テキスト(画像が表示されない時にテキストで説明)なので、 その画像の説明を簡潔に記せば良いでしょう。 「富士山」でも「富士山の写真」「雪景色の富士山」「mt.fuji」でも良いでしょう。 >新規質問のほうが良かったでしょうか? 数日経過した質問は誰も見ないでしょうし、 追加の質問は、方向性がブレる傾向かな・・・ 新規質問の方が新規で最上部に目立って表示されるので、多くの有識者や誰かが回答してくれる確率が高いでしょう。 ただ、わからない事など、まずは一度「検索」で調べてみましょう。 その結果、 ここまでは理解できるが、ここからが理解できないとか質問した方が回答者も回答し易いでしょう。

tommy0313
質問者

お礼

 この度は大変お世話になりました。御説明を頼りに試みた結果、画像の表示はうまく行きました。有難うございました。御報告が前後して申し訳ありません。何しろPCにはいつまでも初心者で、回答者の皆様には大変御迷惑をおかけしています。理解できないところは、再度の挑戦をさせてください。今後ともよろしくお願いもうしあげます。まずは御礼まで。

noname#140925
noname#140925
回答No.3

その書き方なら、そのhtmlファイルを置いてあるのと同じフォルダに画像のファイルを保存してください。

tommy0313
質問者

お礼

有難うございました。参考になりました。

tommy0313
質問者

補足

ご回答有難うございました。すみません。よく理解できないので、私が試したことをお知らせします。間違いを教えて下さい。 メモ帳に次の練習問題を打ち込みました。 涙は心の<b>汗</b>だ! 涙は女の<i>武器</i>よ。 涙はもう<u>枯れはてたよ。</u> <img src="富士山.jpg"> 上3つの太字/斜体字/アンダーラインは希望どうり表示されましたが、画像だけは表示されません。 「メモ帳で作成したHTMLファイルと同じフォルダに画像ファイルを置きましょう。」の意味は <img src="富士山.jpg">のことでしょうか?img src="富士山.jpg">を記載することが画像ファイルを置くことでしょうか?画像ファイルの保存方法を教えて下さい。画像はマイピクチャーにあります。超初心者です。御指導をよろしくお願いいたします。 以上

  • shu0308
  • ベストアンサー率34% (83/240)
回答No.2

例えば、フォルダ1というのがあり、そこに作成したindex.htmlなど、「.html」のものが全てはいっているとします。 画像を表示させるには、その画像を同じフォルダにコピーするかそのまま移動するかしなければいけません。 要するに、index.htmlと画像が一緒のフォルダに入っていなければ表示はできません。 そしてタグは、<img src="富士山.jpg">となります。 index.htmlがサーバにアップロードされてないとサイトすらも表示されないように、画像も同じようにアップロードしないと表示されません。

tommy0313
質問者

お礼

有難うございました。参考になりました。

tommy0313
質問者

補足

ご回答有難うございました。すみません。よく理解できないので、私が試したことをお知らせします。間違いを教えて下さい。 メモ帳に次の練習問題を打ち込みました。 涙は心の<b>汗</b>だ! 涙は女の<i>武器</i>よ。 涙はもう<u>枯れはてたよ。</u> <img src="富士山.jpg"> 上3つの太字/斜体字/アンダーラインは希望どうり表示されましたが、画像だけは表示されません。 「メモ帳で作成したHTMLファイルと同じフォルダに画像ファイルを置きましょう。」の意味は <img src="富士山.jpg">のことでしょうか?img src="富士山.jpg">を記載することが画像ファイルを置くことでしょうか?画像はマイピクチャーにあります。超初心者です。御指導をよろしくお願いいたします。 以上

  • edomin7777
  • ベストアンサー率40% (711/1750)
回答No.1

> ホームページのマニュアルにある「イメージファイルも同じ場所に置く・・」の意味がわかりません。 そのままです。 メモ帳で作成したHTMLファイルと同じフォルダに画像ファイルを置きましょう。 同じフォルダに無いときは、どこにファイルがあるのかを示してあげなければいけません。

tommy0313
質問者

お礼

有難うございました。参考になりました。

tommy0313
質問者

補足

ご回答有難うございました。すみません。よく理解できないので、私が試したことをお知らせします。間違いを教えて下さい。 メモ帳に次の練習問題を打ち込みました。 涙は心の<b>汗</b>だ! 涙は女の<i>武器</i>よ。 涙はもう<u>枯れはてたよ。</u> <img src="富士山.jpg"> 上3つの太字/斜体字/アンダーラインは希望どうり表示されましたが、画像だけは表示されません。 「メモ帳で作成したHTMLファイルと同じフォルダに画像ファイルを置きましょう。」の意味は <img src="富士山.jpg">のことでしょうか?img src="富士山.jpg">を記載することが画像ファイルを置くことでしょうか?画像はマイピクチャーにあります。超初心者です。御指導をよろしくお願いいたします。 以上

関連するQ&A

  • 画像リンクをHTMLタグを使用してする方法

    ある無料ホームページで、画像をはって、それにリンクをはり、その画像を押すと、そのサイトに行くようにしたいんですね。そこは画像をHTMLタグでのっけるんですけど、画像のHTMLはわかったんですが、どうしてもリンクの張り方がわかりません。 そのホームページのところにも質問をしたのですが、それはわからない。というか教えられないみたいなことをいわれてしましまして。 そういうのが乗っている本や、もしやり方がわかるかたは教えてください。

  • HTMLの画像のリンクの<タグ>について。わかる方、教えてください。

    HTMLの画像のリンクの<タグ>について。わかる方、教えてください。 HTMLの勉強をはじめたのですが。画像のリンクのタグのところで、つまずいています。 ↓学校でとったノートです。 ひとつひとつの記述の意味などを、どうか解説して教えてください。 <a href="../photo01.jpg"> <img border="0" src="../photo01.jpg" alt="グランドキャニオンの写真" title="グランドキャニオンへ旅行をした時の思い出の写真。  クリックしたら拡大します" width="100" /> もう、なにがなにやら・・・混乱してしまっているのですが、とくに../というのは、現在の場所からの相対的パスの記述のようなのですが。絶対的パスをするときの記述のしかたが、わからないのです。 教えてください。お願いします。m(_ _)m

  • 簡易HTMLとは何でしょうか

    XPユーザーです。 デジカメ画像を「縮小専用」で縮小する際、オプションで「簡易HTMLを出力する」をチェックしますと、縮小画像のほかに、○○.htmlというファイルが出てきます。ソースを見ますと、 <a href="../10.jpg"><img src="10.jpg" border="0"></a>というタグが画像の数だけ羅列しているだけで、<html>や <body>のタグがないのです。公開しているサイトにこのファイルを恐そるおそるリンクしてみると、ちゃんと画像が映っております。なにか、このままリンクを続けると、不都合がおこるでしょうか。よろしくお願いします。

  • 画像が表示できません

    ホームページをメモ帳にタグ打ちして作成しています。ホームページフォルダの中にトップページと「image」というフォルダを作り、その中に「hi.jpg」という画像を入れてあります。 その画像をトップページに表示させるのに<img src="image/hi.jpg">というタグを打ったのですが、画像が表示できず×マークになってしまいます。 他の文章やリンクはHTMLの本を見ながら、うまくいっているのですが、画像だけ四苦八苦しています。過去の質問を見てみるとタグの打ち間違い、余計なスペースが入ってしまっている、パスの間違いなどの原因があるようなので、それらに注意しながら見直しているのですがダメです。 何が間違っているのでしょうか? どなたか教えていただけますか?

  • HTML背景画像

    HTMLタグ内にbackground = "image.jpg"と記述すると画像が小さい場合 ページの下のほうできれます。 ウィンドウの大きさに合わせて大きくしたいです。 何か方法はないでしょうか。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • ホームページにPDFファイルをリンクさせる方法

    ホームページを公開していますが、今回エクセルで作成した文書をPDF化して、画像と同じ感覚で<img src="photo/excel-1.pdf">のHTMLタグでリンクしました。作成ソフトでは、うまくリンクしてAdobeReaderが起動、PDFファイルが表示されました。 ところが、Yahoo!のサーバーにUPして確かめたら「ページが見つかりません」のメッセージが出て表示されません。 解決策をどなたか教えて下さい。

  • 画像jpgをHTML化

    複数の画像を、一括でHTML化するフリーソフトなどありませんでしょうか。色々見た結果複数、1.jpg 2.jpg 3.jpgなどを一括で一つのHTMLにまとめて表示させるものはあったのですが、1.jpg 2.jpg 3.jpgをそれぞれ1.html 2.html 3.htmlという風に一括で変換できるソフトを探しています。またその際に1.htmlの内容はイメージのみが理想で、2.html等へのリンク等は無いほうがいいです。

  • HTML内にある画像リンクを調べたい

    仕事で、サーバ上にHTMLをアップしていますが、 何度も更新するうちに、使っているの使っていないのか 分からない画像データがたくさんアップしてしまっています。 サーバ内を整理するためにも、 今はリンクしていない画像を削除したいのですが、 そういうのが簡単に分かる方法はありませんか? 相対パス、絶対パスも使ってあります。 よろしくお願いします。

  • 画像にリンクをつけたのですが線を消したい

    たとえば、犬の画像が500×500pxであったとします。 <a href=犬の画像.jpg><img src=犬の画像.jpg width=100 height=100></a> こんなタグを書いたとします。 (実際には日本語使えませんが、わかりやすいように) これは要するに、100×100に縮小されている犬の画像をクリックすると500×500の画像へリンクするわけですが。 これを書くと、犬の画像のまわりに青色の線(クリックした場合は紫色の線)がついてしまうんです。 文字へのリンクでいうところのアンダーラインみたいなものです。 これを消したいのですがどうすればいいでしょうか? どうぞアドバイスよろしくお願い致します。

    • ベストアンサー
    • HTML
  • FLASH内にHTMLタグを表示させる方法について

    FLASHで作成するファイルの中に、HTMLタグを組み込むことは可能でしょうか? 調べたところ、jpg画像は外部からでも読み込めるということですが、 同じように、HTMLタグも読み込むことは出来ないのでしょうか? 組み込みたいタグは以下のようなものです。 <A HREF="URL" target="_blank">リンク先の名前</A> <img border="0" width="1" height="1" src="画像" alt=""> ご存知の方、よろしくお願いします。