初めまして。このサイトで”Macでホームページを作る”というのをみて、ホームページ作りに挑んでおります。なんとかテキストは打ち込めるようになったのですが、どうしても画像(.jpg)がホームページ上に反映されません。使っているOSは、Mac10.4.11.テキストはTextEditやCotEditorでファイルを作り、それをSafariでプロバイダー上のホームページにアップロードしております。
タグなどはきちんといれているつもりです。アップロードした.jpgファイル画像は、ホームページ上では?マーク付きで表示され、画像が映りません。どなたか、ご教授頂ける方御指南頂ければ幸いです。

このQ&Aに関連する最新のQ&A

A 回答 (7件)

>サイトを開いた時にも正しく画像がみえるようになりました。


そのアドレスをsrc=""のところに入れてください
あと、a href="" のところにもいれてください。
画像をクリックしたときa hrefのアドレスにジャンプします。


<a href="クリックしたときにジャンプしたいhttp://からabc.jpgまでのアドレス全部">
<img src="http://からabc.jpgなどの画像のアドレス全部" border="0">
</a>

(↑絶対アドレス)

http://masaboo.cside.com/new_html1/ht_67.htm
ここのが絶対・相対がわかりやすいとおもいます。

http://www.tagindex.com/html_tag/img/index.html
タグの説明が載ってます。

http://www.htmq.com/html/a.shtml

http://www.tagindex.com/html_tag/img/img.html
    • good
    • 0

> 良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね?



そうです。相対パスで記述したほうが、「賢い」方法だということを、いいたかったのです。

> 私、初めてのコンピューターからマックしか触った事がな>く、"Directly"という概念にあまり通じておりません。

フォルダ=ディレクトリ(Directory)です。むしろ難しく考えないで、シンプルに理解すべきところです。

> マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと

No.3で、FTPクライアントソフトで、アップロードしてはどうかとアドバイスしたのは、その点です。じゃまなものを含まずにアップロードするので、そういう心配がなくなります。

どうしても相対パスの記述で失敗するなら、ウェブサーバの管理者に問い合わせてください。セキュリティ上の、なんらかの制限があるのかもしれません。もっとも、そんな制限をしているサーバなら、さっさと解約して、ほかを探すべきですが。
    • good
    • 0
この回答へのお礼

最初からやり直してみました。そして妙な結果が出ました。実は、2つのサーバー(有料の物と無料の物)を借りて同時に似たようなサイトを作ってみています。そして、有料サーバーの方では、”画像の名前.jpg”のタグだけでサイト上に画像が正しく表示出来るようになりました。(http://oryza.chicappa.jp/)画像名の中の大文字と小文字を一部混同していたのが原因かも知れません。

ただ、無料サイトの方(http://oryzadesign.web.fc2.com/)ではどうしても画像の名前.jpgでは、正しく画像が出て来ません。絶対パスを使ったURLで同ファイルを指定した時のみ画像がサイト上に現れます。タグの編集ソフトがとても使いやすいサーバーなのですが、、、。

きちんとしたウェブサイトを立ち上げたいと思っていますので、引き続きこの点も含めてトライして行きます。初めてのサイト作りに入ってまだ、3日目なので、ちょっと頑張って勉強して行きます。

お礼日時:2009/05/21 03:03

> この解決法で良いのでしょうか?



解決していますが、「いい」解決法ではありません。
HTMLにおけるファイルパス(ファイルの住所)の記述には、絶対パスと、相対パスという、2種類の方法があります。
絶対パスは、ボリューム(ディスク)先頭から、ディレクトリ(フォルダ)を順に並べていくもの。「/myhobby/fishing/herabuna.html」。このようにボリューム先頭(ルート)を「/」にして、スラッシュで、ディレクトリ名を区切って、記述します。絶対パスにドメインを付けたものが、いわゆるURLです。「http://www.homepage.com/myhobby/fishing/herabuna …」。こうなります。絶対パスの利点は、記述したHTMLファイルを、どこに移動しても、かならず参照したファイルを指定できる点です。
相対パスは、記述するHTMLファイルの位置を、起点としたパスです。記述するHTMLファイル、hogehoge.htmlと、同じディレクトリにあるimage.jpgは、「image.jpg」と記述するだけで、パスとなります。ひとつ下のディレクトリ「images」に、image.jpgがあるなら、「images/image.jpg」となります。ひとつ上のディレクトリに、image.jpgがある場合、ピリオドを使って、「../image.jpg」と記述します。相対パスの利点は、相対的な位置関係が変わらなければ、どこに移動しても、パスを変更しなくてもいい点です。

以上、ファイルパスに関する、基本的な説明をしましたが、心当たりは見つかりませんでしたか?
    • good
    • 0
この回答へのお礼

harawo様
御提言有り難うございます。私、初めてのコンピューターからマックしか触った事がなく、"Directly"という概念にあまり通じておりません。今、アップしているサイトでも"Directly"の指示が会ったりするのですが、良く理解出来ないまま、取りあえず、マテリアルをサーバーにアップロードしてなんか、切り貼りをしている状態です。頂いた2つの返答をもう一度、最初からやり直してみます。

良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね?また。その為には、この画像がhtmlに置ける絶対パスの概念にし従って順を追って配置されていれば良いという事ですよね?ちなみにこの画像とは、マック版Adobe Illustratorで書いたデッサンをjpgフォーマットで保存した物です。マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと、、。当初はそんないつものトラブルなのかと思っていたのですが。

もう一度、やり直してみます。何処がいけないのか良くわからないのではあるのですが、、、。

お礼日時:2009/05/21 00:45

画像タグは以下で


<img src="xx.jpg" width="204" height="43" border="0">
アップロードするファイル名は『xx.jpg』に成ります。
TextEditで作成している時は単純にサファリへドラックして確認してます。
    • good
    • 0

直接の回答ではありませんが、じぶんでバグ(不具合)を発見するための、スピーディな方法を書きます。

いちいちサーバにアップロードせずにすむぶん、修正作業を時間短縮できます。

ホームフォルダの「サイト(Sites)」フォルダを開きます。すでにファイルが存在しますが、すべて削除します。あなたが作成したウェブコンテンツをそこに移動します。
システム環境設定>共有で、「Web 共有」にチェックを入れて、開始します。
Safariなどのウェブブラウザを起動し、「http://127.0.0.1/~(user name)/」と入力し、続けて開きたいHTML書類のファイル名を入力してリターンキーを押します。(http://localhost/~……でも可)

> それをSafariでプロバイダー上のホームページにアップロードしております。

お使いのプロバイダが、FTPによるアップロードを許可しているなら、ウェブブラウザではなく、FTPクライアントソフトを使って、アップロードしてみてください。
Cyberduck(http://mac.egoism.jp/nu/item/760
定番のFTPクライアントソフトです。

基本中の基本ですが、ファイル名、フォルダ名には、かならず半角英数字のみ使用してください。(ハイフン(-)、アンダーバー(_)は使用可)
    • good
    • 0
この回答へのお礼

harawo様

御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。

お礼日時:2009/05/20 20:31

サーバーにアップロードされたページにアクセスして、Safariのウインドウから「構成ファイル一覧」を開いてjpgファイルのアドレスを確認してimgsrcタグに入れて下さい。



Safariのキャッシュに残っている画像を追加する前のデータ=が表示されている可能性もありますので、メニューバーのSafariから「キャッシュを空にする」を実行して、(キャッシュからでなくサーバー直のデーターを)表示してみてください。
    • good
    • 0
この回答へのお礼

DAV様

御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。

お礼日時:2009/05/20 20:33

jpgファイル画像のみは、表示されますか?



表示されるのなら
http://okwave.jp/qa2034053.html
を参考にアドレスをコピーして
img src="ここにいれる"
    • good
    • 0
この回答へのお礼

neorg様

御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。

お礼日時:2009/05/20 20:34

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qマックの期間限定商品について

マックで、期間限定の商品が、通常販売されるというような事ってないんですか?私は、前発売されていた、サーモンマックムニエル風(こんな感じ)に、はまってしまって、その時期はマックにいったら絶対これをたのんでいました。私はマックのバーガーの中で、これが一番のお気に入りなんですけど、限定商品が、通常販売になるという事はないんですか?

Aベストアンサー

確か、以前マック内で無料配布している「マックジョイ」に
そのことが掲載されていたような気がします。

期間限定商品及び地域限定商品で、人気の高かったものは、
レギュラーメニューに加える旨、書いてありましたよ。
(khojiさんの言う通り、チキンタツタはその良い例です)

ちなみに、今、福岡では「スープ3種(ミネストローネ・
チキンクリーム・ブロッコリークリーム)」が発売されてて、
セットと一緒に注文すると、150円で購入出来ます。
これの発売初日には、動向を探るため、ある駅前の店舗で
試飲及び社員のアンケート調査が行われていました。
もちろんそんなのは非公開ですよ!
正規社員の女性が、店舗内で食べてる顧客を無作為に選び、
声をかけて行うのです。

だから、もし32eriさんの想いが強ければ、
直接マックのHPで言うか、大型店の店長さんか社員へ
意見をぶつけるのが効果あり、と思います。
あくまでも売上が良かったメニューでないと
厳しいとは思いますが、、、。

余談ですが、サーモンマックの時起用した某タレントは、
大体1年以上前から決まっていたそうです。
それはマックのアジア全体会議が1年に1回ぐらいあって、
その時に、次回の会議までの分をまとめて決めるんだそう。
某タレントはアジア全体のお墨付きってことだったん
でしょうね。

「地域限定の謎」については、参考URLで見れますよ!

参考URL:http://www.geocities.co.jp/SilkRoad-Ocean/5203/zatsugaku/z061.htm

確か、以前マック内で無料配布している「マックジョイ」に
そのことが掲載されていたような気がします。

期間限定商品及び地域限定商品で、人気の高かったものは、
レギュラーメニューに加える旨、書いてありましたよ。
(khojiさんの言う通り、チキンタツタはその良い例です)

ちなみに、今、福岡では「スープ3種(ミネストローネ・
チキンクリーム・ブロッコリークリーム)」が発売されてて、
セットと一緒に注文すると、150円で購入出来ます。
これの発売初日には、動向を探るため、ある駅前の店舗で
...続きを読む

Qホームページアップで文字化け....

ホームページ作成初心者です。
golive5.0でホームページ作成しています。
作成段階では、正常に表示されるのですが、
アップロードすると漢字・ひらがなが全て文字化けしてしまい、困っています。
英数字や画像は問題なく表示されます。
この問題点を解決するにはどうすればよいでしょうか?
説明本等を読んでも解決できません...
基本的な質問で申し訳ありませんが、教えてください!!

Aベストアンサー

こんにちは!

x-sjis のせいかも知れません。

以前は x-sjis となっていましたが、現在では Shift_JIS に変更されています。

GL日本語「x-sjis」「x-euc-jp」「ISO-2022-jp」
日本語「EUC」

のチェックをはずして
日本語「shiftJIS」にチェックが入れられるようになるか試してみてください。
日本語「macOS」のことはちょっと判りません・・。

無理なようでしたらソースを開いて、

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

に書き換えて見てください。(これをコピペして)

Qあなたの好きなマックの期間限定メニュー

今年も月見バーガーの季節がやってきました!
ということでさっそく今日頂きました。毎年変わらぬ美味しさです。

みなさんの好きなマックの期間限定メニューは何ですか?教えてください。

それと、復活してほしいメニューがあればそれも教えてください。
私は去年のBigAmericaの時に出たアイダホバーガーが忘れられません…。

Aベストアンサー

NO4です。

チキンスナックを調べました。

99年、年末に期間限定で発売された

ゆくトリくるトリ

と、ダジャレのネーミングの商品でした。

Q従来のホームページを別のMacで作った(iWeb)ホームページに変更したい

全くの初心者なのでうまく説明できるかわかりませんが…

仕事場のMacで作ったHP(アップ済み)を、自宅のMacで作ったHP(アップまだ)と取り替えたいのですが… (総取り替え)
いずれもiWebで作成してます。
iDeskとやらでなんとかならないかと思いきや、全くわからず…

Mobile meに登録で、2台とも同じアカウントで対応してます。

*総取り替えと言っても、従来のHPも残しておけたら残しておきたいとも思っております。(アップせずに)

よくわからないかもしれませんが、ご理解して頂けた範囲で
よろしくお願いします!!

Aベストアンサー

MobileMeの1アカウントで、2サイトを運用することはできませんが、ひとつ方法があります。
iWebは、iDiskに「Web」というフォルダを作って、そこにウェブコンテンツをアップロードして、公開しますが、MobileMe以前の.Mac時代のサイトの公開方法は、「Sites」フォルダにウェブコンテンツをアップロードして公開するものでした。
Webフォルダにアップロードすると、「http://web.me.com/(UserName)/」というURLになりますが、Sitesフォルダにアップロードすると、「http://homepage.mac.com/(UserName)/」(http://homepage.me.com/~でも可)がURLになります。
.Mac時代のサイト公開方法と互換を保つために、実質2サイトを1アカウント運用することが可能となっています。

Qマックの期間限定メニュー

ラスベガスバーガーが一月下旬開始とあるのですが
具体的にいつから販売なのか解るかたいませんか?

Aベストアンサー

1月27日からのようですよ^^
(自分は名古屋です。全国一律かどうかは分かりません^^;)

QMac ホームページアップロード

Macでホームページを作成したのはいいのですが、どうやってネットにアップロードするのか分かりません。
誰かアップロードできる場所とアップロードの方法を教えてください

Aベストアンサー

自分は、cyberduckというソフトを使って、アップロードしています。
下記サイトに説明しているサイトがありますよ~。
参考になさって下さい。

http://www.affrc.go.jp/NSS/man/ss/mac-ftp-cyberduck.html

サーバ、ユーザー名、パスワード を、プロバイダからもらっている書類で確認してください。それさえ設定すれば、
drag&dropで簡単にアップロードできます。

参考URL:http://www.affrc.go.jp/NSS/man/ss/mac-ftp-cyberduck.html

Qスタバの抹茶ホワイトチョコレートのカスタマイズ

先日から開始された、スターバックスの期間限定ドリンク:抹茶ホワイトチョコレートについて質問です。

この抹茶ホワイトチョコレート、抹茶抜きでを注文することってできますか?
そうすると、ホワイトココアになるのでしょうか?

Aベストアンサー

抹茶ホワイトチョコレートは抹茶のパウダーを溶かすために半分は牛乳ではなくお湯です。(牛乳ではパウダーが溶けない)

ですので抹茶抜きにすると半分お湯で薄められたホワイトココアが出来上がります。

「オールミルクでおねがいします」というとお湯無しで全てミルクで作ってくれますが

この場合、抹茶ホワイトチョコレートの抹茶パウダーを抜くとホワイトココアが出来上がります。(厳密には一番上にかかっているトッピングが少し違う)

ちなみに普通の抹茶ホワイトチョコレートや抹茶ティーラテをオールミルクにするのはオススメしません。パウダーがほとんど溶けなくて沈殿してしまうので汗

QiMAC OS9で無料レンタルホームページにアップロードができません。

iMAC OS9でpagemill3.0を使ってます。レンタルのファイルにアップロードできません。どうすればよいでしょうか??

Aベストアンサー

Pagemillのアップデート機能を使わず、「Transmit」や「Fetch」といったFTPクライアントソフトを使ってみてはいかがでしょうか?

但し、無料のホームページスペースの中にはFTPが不可の処もあります。
この場合はPagemillでもFTPソフトでもアップロードできません。
webブラウザ上で操作する管理ページがあると思いますのでそちらを御利用下さい。

参考URLには「Transmit」サポートを載せておきます。

参考URL:http://www.act2.co.jp/x_act2main/x_PRD/x_PANIC/transmit/index.html

QマックのCMの女の子

結構前に放送されたマックシェイク抹茶なでしこ、のCMの女の子の名前が知りたいのですが、どなたかわかる方いますでしょうか。

よろしければ、ご回答お願いいたします。

Aベストアンサー

戸田紘子さんだそうです。

http://www2s.biglobe.ne.jp/~mochida/cgi-bin/cmgirl.cgi?page=100&bl=0

QMacでのホームページレイアウトいついて

先日ホームページを作成したところ、Macではページレイアウトがくずれるとの報告がありました。MacでもFirefoxなどでは問題なくページ表示をできるみたいなのですかが、Safariでは文字化けなどが発生するようです。これは回避する方法などはなるのでしょうか?

すべてのブラウザに最適化したホームページを作成することは難しいのでしょうか?

Aベストアンサー

難しいですけど、完璧に近い形で実現しているサイトも沢山ありますよ。
safariで文字化けするという事ですから、エンコードの問題だと思います。
今あなたのサイトがどういうものか分からないので具体的には回答しづらいですが、htmlの最初の方を見直してみてはいかがでしょうか。
いわゆる
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↑こういうやつです。


人気Q&Aランキング