- ベストアンサー
画像が表示されない？原因と解決方法を教えてください
- 現在、htmlを勉強してメモ帳を使いHPサイトを作っているのですが、1つの画像だけが表示されません。四角に×のものになってしまいます。
- HPのメニューバーのファイル→開く→～→のくだりでは表示されるのですが、ドキュメントの項目で表示される右側のレビュー(!?)だと「このコンピューターが差出人に識別されることを予防するため、画像がブロックされています。画像を表示するには、このアイテムを開いてください」と表示されます。
- 画像を別のものに変えたり、テキストを打ち直したりいろいろ足掻いてみましたが、結果は変わりませんでした。ソースコードを載せます。参考書は無く、ネットで調べて参考にしていますので間違いがあるかもしれません。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞現在、htmlを勉強してメモ帳を使いHPサイトを作っているのですが、 HTML(頭文字ですから必ず大文字です) HPサイトじゃ意味が通じません。ヒューレッドパッカード社(hp)のことじゃないと思いますが(^^)、利用する立場なら兎も角、製作立場になると「ウェブサイト」「ウェブページ」と正しく使わないと意味が通じなくなります。「ホームページに戻る」「HPに戻る( http://www8.hp.com/jp/ja/home.html )」じゃ困る。 ＞このコンピューターが差出人に識別されることを予防するため、画像がブロックされています。 ブラウザのトラッキング防止機能が効いているのでしょう。 画像へのパス指定を見直すこと。 複雑な説明になるので、説明はしません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>*****</TITLE> </HEAD> <BODY BGCOLOR="crimson"> <H1><font face="Beurk"size="7">*****</font></H1> <font face="HGP明朝L"size="4"></font><BR> <IMG SRC="sitd.gif"><BR> </BODY> </HTML> ・・・今から始めるには、これじゃあまりに酷すぎます。 1) 必ずDOCTYPEを書かなければなりません。 HTML4.01strictだけに絞って身につけましょう。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 まもなく勧告を迎えるHTML5は、HTML4.01strictの改訂で、HTML4.01の他のDTD、transitinal,framesetはありません。 2) <font face="Beurk"size="7"> ｆｏｎｔ要素は使えません。 HTML4.01strictにはない。transitinalでも非推奨。XHTML1.1以来廃止、HTML5にはない。 3) <font face="Beurk"size="7"> <IMG SRC="sitd.gif"> bodyに直接は書けません。 <body>樹構造が下記ですが・・ |-- <h1></h1> |-- <font>ダメ |-- <img>ダメ |-- <br>ダメ bodyにはブロック要素しか置けません。 4) <br>通常は使わないです。BRは【ひとつの段落でありながら強制改行が必要なとき】 HTML4.01では、住所の区切りなど HTML5では、詩の中の折り返しなど、それ自体がコンテンツの一部であるとき とされています。 日本語の場合は、段落の変わり目は行間ではなく字下げで示しますからサンプルのようにスタイルシートで指定します。 ・・・たった数行でこれだけ深刻なミスがあるという事は参考にされているページがとってもまずいという事です。 ＞更新するたびいくつかのファイル(メニュー等)もアップロードしないといけないのは、大変ではないですか？ 小規模なサイトでしたら、コピーペーストで書き換えて一括してFTPでアップロードします。 ・ファイルを開かなくても置換できる高機能なテキストエディタなら一括置換できます。 大規模になれば、includeという機能を使います。いわゆるＳＳＩ(Server Side Includes)今は考えないでよい。 ★最初に参考にすべきサイト・・HTML4.01の仕様書の翻訳メンバーの内田さんの書かれたもの・・ ⇒はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) ★参考にすべきページ ⇒HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ⇒1と2の間辺りからはじめるCSS講座( http://www6.plala.or.jp/go_west/beginner/css/ ) ★書いたらまずチェックする ⇒Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) 口うるさいくらいですが、逆にどこを直すべきかも教えてくれる。 [最低限のサンプル]HTML4.01strictです。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css"> <!-- body{ background-color:gray;/* bodyの背景gray */ } div.header,div.section,div.footer{/* header,section,footerの指定 */ width:80%;/* 幅はwindowの80% */ margin:0 auto;/* 上下0、左右自動 */ padding:5px; background-color:silver;/* 背景はシルバー */ } p{ margin:0;/* 日本語用に段落間のマージンを消し */ line-height:1.8em;/* 日本語は字が大きいので行間を広げて */ text-indent:1em;/* 段落で字下げ */ } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>質問</h2> ＿＿<p> ＿＿＿折角のサイト設立を目前に心が折れそうなので、どなたか解決方法を教えてください ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>回答</h2> ＿＿<p> ＿＿＿誰もが通ってきた道です。 ＿＿</p> ＿＿<p> ＿＿＿<strong>HTML4.01strictは、</strong>プレゼンテーションに関わる物が一切ないので、このように文書構造だけ記述すればよいので<strong>とっても楽です。</strong> ＿＿</p> ＿＿<p> ＿＿＿そのかわり、スタイルシートでプレゼンテーションを指定します。スタイルシートは、HTMLで行なうよりはるかに機能が豊富ですが、その分、覚えるのは大変です。しかし、いずれHTML5の時代が来ますが、そのときにはHTMLは文書構造だけ、スタイルシートはプレゼンテーションと完全に分かれますから、今のうちにHTML4.01strictで学んでおくと効率的です。 ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
回答ありがとうございます もう最初からダメダメでしたか…(笑)! 参考にしていたサイトはもう見るのをやめました 上記のサイトを参考にさせていただきます そして一から勉強し直そうかと思います 因みにチェックしてみたらマイナス310点でした 迅速かつ丁寧な回答、感謝します ありがとうございました さすがプロフェッショナルですね…!! 格好いいです。