コンピューターの画像ブロック

締切済

質問者：co0408
質問日時：2012/12/11 17:54
回答数：5件

参考本を見ながらHPを作っているのですが画像のアンプルを入れても
画像がアップされません。四角い枠の中に×のマークが出ます。

下記のコメントが出ます。
「このコンピューターが差出人に識別されることを予防するため、画像がブロックされています。
画像を表示するには、このアイテムを開いてください。』

ど素人が作っています。詳しく教えていただけると助かります。

ちなみにHTMLはこんな感じです。
<html>
<head>
<title>cokuriのアットホーム</title>
</head>
<body>
<body bgcolor="#c0c0c0">
<h1><font color="#2A7e55">cokuriのアットホーム</font></h1><br><br>
<font color="red"><font size="5">cokuriの部屋へようこそ！！</font></hont><br><br>
<img src="img/main.jpg><br><br>
<font color="blue">我が家の愛しいMダックスの３ワンコの日常です。<br>
心癒される写真がいっぱい！！<br>
可愛いワンコのグッズ＆ショップもご紹介していきます。<br>
楽しんでいって下さい。</font><br><br><br>
<hr waith="540">
<i>メッセージはこちらまで！！！</i>
</body>
</html>

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： too_bad
回答日時：2012/12/14 01:05

回答が出ているみたいですので、

回答については控えさせていただきます。
質問者様のサイトを書き直してみました。
以下からダウンロードしてご確認くださいませ。
サイトの幅は独断で800pxに設定し、センタリングしました。
また文書についてもセンタリングしました。
なお、サイトそのものが感染していないとは言い切れませんので、
ダウンロードされた際はウイルス対策ソフト等で
ウイルスチェックされるのをお忘れのないよう。

http://www27.atpages.jp/stepmaniasongs/sample.zip

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/12/13 15:10

＞参考書が古いとは思いもしませんでした。

　これは注意してください。何時買ったかではなく、いつの初版かがひとつの目安になるでしょう。
　また内容的には、絶対に買ってはならない本の特徴として
・HTMLは文書構造をマークアップするもの、プレゼンテーションはスタイルシートで指定するもの
　という根幹の部分に対する認識が示されていて、かつ詳しく説明してあるか？
　たとえば、先の解答で示したような<font><i>が使われていたり、bgcolor=""とかの属性が示されていたら、ゴミです。
　また、「行間を空けるときは<br><br>を続けるとか」「行間を広くするときは<p>、狭いときは<br>」、「H1は文字を大きくするときに使用する」も間違い。またtableを使って配置を指定する方法が掲載しているものもダメです。

　はじめは区別できないと思いますから、ちょっと重いですが
HTML 4.01 仕様書(邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　に目を通されるのが良いでしょう。W3Cの数ある仕様書の中で利用しやすさ、わかりやすさでは秀逸です。
・全体を通しで読んでおく
・必要なことを要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )や属性索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )からたどる
　など、様々な利用形態が想定されています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )のDepr(廃止予定--Deprecated)の項目にD、DTDの項目に、F(Frameset DTD)やL(Loose DTD)と書かれているものは使かわない。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/12/12 15:11

もしHTMLが正確にコピーされているなら、要素の値はきちんと""で括りましょう。

<img src="" width="" height="" alt="">
なお、その参考本はとっても古いもののようです。
bgcolor="#c0c0c0"　bgcolorは非推奨です。
<font color="#2A7e55"> font要素は非推奨です。
<br><br> <br>はひとつの段落内で強制的に改行するとき意外使いません。
　　　　　　行間を調整するために使ったり複数連続して使うべきではありません。
<font color="red"><font size="5">　FONTは非推奨です。
<img src="img/main.jpg> 必ず表示サイズを書き、代替テキストが必要です。
<hr waith="540">　綴りが違いますが、hrのwidth属性は非推奨です。
<i>メッセージはこちらまで！！！</i>　i要素の非推奨です。

　とすべてについて問題がありすぎです。
★HTML4.01(1999年勧告)以来、文書構造とプレゼンテーションは分けることが推奨されています。
　「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　その仕様がHTML4.01strictになります。
　まもなく勧告になるHTML5では、上記に示したマークアップはすべて禁止になります。HTML5が気兼ねなく使えるには、まだ数年以上かかると思いますから、それまでにHTML4.01strictを徹底的に学びましょう。(HTML5はHTML4.01strictの改訂版です)
　HTML4.01strictを学んでおけば、[HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )]で補習出来ます。
　仕様書をブックマークして一通り読んだ後、索引などで調べると良いでしょう。

★　とりあえず、今の参考書は破棄して忘れてください。・・

★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　で書いたHTMLをチェックしては指摘されたところを直すのが早道です。

★最初に「はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )」を履修してください。上記HTML4.01の仕様書の翻訳者のサイトです。

★下記にサンプルを上げておきます。HTML5の考え方を取り入れたHTML4.01です。
　タブは＿に置換してあるので戻してください。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★文字コードはShift_JISです。

[スタイルシート]HTMLのある場所にstyleSheetというフォルダーを作成して下記ファイルをsample.cssと言う名前で保存する。
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
body{background-color:#c0c0c0;}
p{margin:0;text-indent:1em;}
div.header,div.section,div.footer{width:70%;margin:0 auto;background-color:white;padding:15px;}
div.header h1{color:#2A7e55;}
div.header p{color:red;}
div.header div.abstract p{color:blue;}
p.image{text-align:center;}

[HTML]下記サンプルをsample.htmlと言う名前で保存
<!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>cokuriのウェブサイト</title>
＿<meta http-equiv="Content-Script-Type" content="text/javascript">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
</head>
<body>
＿<div class="header">
＿＿<h1>cokuriのウェブサイト</h1>
＿＿<p>cokuriの部屋へようこそ！！</p>
＿＿<div class="abstract">
＿＿＿<p>
＿＿＿＿我が家の愛しいMダックスの３ワンコの日常です。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿心癒される写真がいっぱい！！
＿＿＿</p>
＿＿＿<p>
＿＿＿＿可愛いワンコのグッズ＆ショップもご紹介していきます。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿楽しんでいって下さい。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>section Title</h2>
＿＿<p>
＿＿＿<img src="./img/main.jpg" width="640" height="240" alt="風景">
＿＿</p>
＿</div>
＿<div class="footer">
＿＿<dl class="document-version">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-12-12</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-12-12 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© cokuri 2012 - 2014 All Rights Reserved </address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。参考書が古いとは思いもしませんでした。
２，３日前にかったばかりなのに・・・。
早速、やってみたいと思います。

通報する

お礼日時：2012/12/13 09:53

No.2

回答者： ermomurder
回答日時：2012/12/12 14:08

おそらくWindows7のプレビューウィンドウで見ているのだと思います。

それだと画像は見られないはずですので、ブラウザでHTMLを表示してください。

なおそのHTMLですと、IMGタグのSRC要素の引用符が閉じてないので、それを直さないとブラウザによっては表示されないかもしれません。
他にもいくつか間違いがあるのでそれらも影響するかもしれません。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

通報する

お礼日時：2012/12/13 09:56

No.1

回答者： ixkaito
回答日時：2012/12/12 13:48

とりあえず<img src="img/main.jpg>のjpgの後ろに「"」が抜けています。

それをつけてからもう一度試してみてください。

また、<font>は非推奨タグなので、もう使うのはやめましょう。
<h1><font color="#2A7e55">cokuriのアットホーム</font></h1>の場合、
<h1 style="color:#2a7e55;">cokuriのアットホーム</h1>のようにしましょう。