締切済み

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

2012/12/11 17:54

参考本を見ながら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> よろしくお願いいたします。

co0408
お礼率60% (3/5)

HTML
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

みんなの回答

too_bad
ベストアンサー率53% (70/130)

2012/12/14 01:05 回答No.5

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

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/12/13 15:10 回答No.4

＞参考書が古いとは思いもしませんでした。　これは注意してください。何時買ったかではなく、いつの初版かがひとつの目安になるでしょう。　また内容的には、絶対に買ってはならない本の特徴として・HTMLは文書構造をマークアップするもの、プレゼンテーションはスタイルシートで指定するもの　という根幹の部分に対する認識が示されていて、かつ詳しく説明してあるか？　たとえば、先の解答で示したような<font><i>が使われていたり、bgcolor=""とかの属性が示されていたら、ゴミです。　また、「行間を空けるときは<br><br>を続けるとか」「行間を広くするときは<p>、狭いときは<br>」、「H1は文字を大きくするときに使用する」も間違い。またtableを使って配置を指定する方法が掲載しているものもダメです。　はじめは区別できないと思いますから、ちょっと重いですが HTML 4.01 仕様書(邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc ) 　に目を通されるのが良いでしょう。W3Cの数ある仕様書の中で利用しやすさ、わかりやすさでは秀逸です。・全体を通しで読んでおく・必要なことを要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )や属性索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/attributes.html )からたどる　など、様々な利用形態が想定されています。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )］より　要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )のDepr(廃止予定--Deprecated)の項目にD、DTDの項目に、F(Frameset DTD)やL(Loose DTD)と書かれているものは使かわない。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/12/12 15:11 回答No.3

もし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-html401j/conform.html#h-4.1 )」　その仕様がHTML4.01strictになります。　まもなく勧告になるHTML5では、上記に示したマークアップはすべて禁止になります。HTML5が気兼ねなく使えるには、まだ数年以上かかると思いますから、それまでにHTML4.01strictを徹底的に学びましょう。(HTML5はHTML4.01strictの改訂版です) 　HTML4.01strictを学んでおけば、[HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )]で補習出来ます。　仕様書をブックマークして一通り読んだ後、索引などで調べると良いでしょう。 ★　とりあえず、今の参考書は破棄して忘れてください。・・ ★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>

質問者

お礼 2012/12/13 09:53

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

ermomurder
ベストアンサー率50% (1/2)

2012/12/12 14:08 回答No.2

おそらくWindows7のプレビューウィンドウで見ているのだと思います。それだと画像は見られないはずですので、ブラウザでHTMLを表示してください。なおそのHTMLですと、IMGタグのSRC要素の引用符が閉じてないので、それを直さないとブラウザによっては表示されないかもしれません。他にもいくつか間違いがあるのでそれらも影響するかもしれません。

質問者

お礼 2012/12/13 09:56

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

ixkaito
ベストアンサー率69% (18/26)

2012/12/12 13:48 回答No.1

とりあえず<img src="img/main.jpg>のjpgの後ろに「"」が抜けています。それをつけてからもう一度試してみてください。また、<font>は非推奨タグなので、もう使うのはやめましょう。 <h1><font color="#2A7e55">cokuriのアットホーム</font></h1>の場合、 <h1 style="color:#2a7e55;">cokuriのアットホーム</h1>のようにしましょう。

質問者

お礼 2012/12/13 09:55

気づきませんでした。早速やってみます。

関連するQ&A

ｈｔｍｌ言語で背景画像を中央寄せしたい <body background="画像url"
HTMLにてＨＰを作成しようとしています、以下について教えて頂けますか？やりたい事背景画像を上中央に固定させ、その画像の上から文章を記載していきたい。無い知恵を絞って色々やって見ましたが背景画像が繰り返し表示されてしまします、背景画像１枚の表示でそれを上中央に表示させたいのですがどのような言語を使えば良いでしょうか？ <html> <head> <title> ※タイトル※ </title> </head> <body> <body background="画像のURL"　bgproperties="fixed"> <basefont color="#0000ff" size="3"> <br><br><br> <h3 align="center"> <font size="7"> <b> <font color="#ff0000"><font face="フォント名"> ※ここに文章を入れます※ </font> </b> </h3> </body> </html>
- ベストアンサー
- HTML
ｈｔｍｌ言語中央寄せしたい <body background="画像url"について
HTMLにてＨＰを作成しようとしています、以下について教えて頂けますか？やりたい事背景画像を上中央に固定させ、その画像の上から文章を記載していきたい。無い知恵を絞って色々やって見ましたが背景画像が繰り返し表示されてしまします、１枚の表示で上中央に表示させたいのですがどのような言語を使えば良いでしょうか？ <html> <head> <title> ※タイトル※ </title> </head> <body> <body background="画像のURL"　bgproperties="fixed"> <basefont color="#0000ff" size="3"> <br><br><br> <h3 align="center"> <font size="7"> <b> <font color="#ff0000"><font face="フォント名"> ※ここに文章を入れます※ </font> </b> </h3> </body> </html>
- ベストアンサー
- SE・インフラ・Webエンジニア
タイトルタグを打ち込んでもブックマークにタイトルがでません
タイトルタグを打ち込んでもブックマークにタイトルがでません <HTML> <HEAD><TITLE>在りし日</TITLE></HEAD> <body> <CENTER> <br> <br> <FONT SIZE=3><FONT COLOR="#cc0000"> 在りし日 </FONT></FONT> <br> <br> <img src="abc.jpg"><br> <br> <br> <font size=3><font color="#000000"> 初めてのホームページ制作にチャレンジ中です。 <br></font></font> <A HREF="abc.html">next</A> </CENTER></BODY></HTML> 以上のように打ち込んでいます
- ベストアンサー
- HTML
先日テーブルの質問をした者です。
先日テーブルの中に画像を入れたいと相談した初心者です。何とか形になりましたが、「画像の下のテキスト部分の選手名とポジションのすき間が上下のかけ線に近すぎた」ので自己流で離してみましたが、もっとちゃんとした正式な方法が知りたくて質問しました。私のヘボソースを参考にご教授お願い致します。(汗) <html> <head> <title>○○メンバー紹介</title> </head> <br> <br> <th><center><i><font size="6px" color="white" face="IMPACT" >MEMBER</font></i></center></th> <center><i><font size="5px" color="white" face="IMPACT" >（2005年チーム）</font></i></center> <br> <br> <body bgcolor=navy> <center><table border="1" cellpadding="0" cellspacing="0"> <tr> <td><img src="1234.jpg" width="280" height="210" alt="選手の画像"></td> <td><img src="1235.jpg" width="280" height="210" alt="選手の画像"></td> <td><img src="1236.jpg" width="280" height="210" alt="選手の画像"></td> </tr> <TR BGCOLOR="#696969"> <Td Align="center" Valign="middle"><font color=white> <br>キャプテン○○○<br>○○○<br>ガード<br> </font></td> <Td Align="center" Valign="middle"><font color=white>副キャプテン×△○<br>×○△<br>ガード</font></td> <Td Align="center" Valign="middle"><font color=white>2年○××<br>○××<br>フォワード</font></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
speeedと正規表現を使っての置換え
speeedというソフトと正規表現を使っての置換えの質問です。 <html> <head> <title>名簿</title> </head> <body> <font color="#FF69B4">■</font>名前<br> ○○○<br> <font color="#FF69B4">■</font>住所<br> 東京都<br> </body> </html> 上記のようなファイルがそれぞれの人ごとに複数あった場合、全てのファイルで<title>名簿</title>としているのをそれぞれの名前の○○○に置換えをしたいと考えております。以下のような形です。 ★変更後 <html> <head> <title>○○○</title> </head> <body> <font color="#FF69B4">■</font>名前<br> ○○○<br> <font color="#FF69B4">■</font>住所<br> 東京都<br> </body> </html> 名前の○○○は各ファイル違います。これを正規表現で各ファイルを一括変換する方法が御座いましたら教えて頂ければと存じます。宜しくお願い致します。
- 締切済み
- HTML
背景画像に全体または部分的にリンクをつけたいです
ヤフーなどで検索が少しでも上位にくるように <h1>タグにはテキストを使用し、その背景に画像を入れます。そして、その画像にリンクをつけたいです。 htmlで<img>にエリアを指定してリンクを任意の場所に設置する方法はありますが、 http://www.tagindex.com/html_tag/img/img_map.html cssで指定した画像に使う方法はないのでしょうか。 <h1>内のテキストには特にリンクがあってもなくても構いません。 <html lang="ja"> <head> <title></title> <style> #aaa{ height: 100px; background-image: url(sample.png); background-repeat: no-repeat; } #aaa h1{ font-size: 10px; margin-left: 200px; padding-top: 10px; font-weight: 400; line-height: 135%; } #aaa h1 span{ font-size: 17px; font-weight: 900; line-height: 225%; } </style> </head> <body> <div id="aaa"> <h1><span>コメント</span><br />コメントコメントコメント</h1> </div> </body> </html>
- ベストアンサー
- CSS
画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような感じです。
- ベストアンサー
- JavaScript
マウスオーバー時に画像切り替え
JavaScriptで文字（画像）上にマウスポインターをオーバーするともう一つの大きな画像を切り替える、という風にしたくて、以下のようにしました。 <html> <head> <title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rosery de la mort PC profile2</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body bgcolor="#000000" text="#ffffff"> <center><img height="75" alt="" src="roseblue-i3.gif" width="72" align="baseline" border="0"><font size="7"><font face="Script" color="#ffffff"><em><strong> Profile  <img height="75" alt="" src="roseblue-i5.gif" width="72" align="baseline" border="0"></strong></em></font></font></center> <br><br> <center> <img src="yl2.jpg"> <p><img src="image/p1.jpg" alt="start" name="def"></p> <br><br><br> <p> <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> </p> <br><br> </center> </body> </html> 上のようにしたのですが、アップロードしても、画像が全く表示されません。因みに参考にしたところはここです。 http://www.tagindex.com/javascript/link/change3.html このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。画像が表示されないのは、何が問題なのでしょうか？画像は全てアップロードしました。
- ベストアンサー
- JavaScript
画像をフェードインさせるタグについて
HP作成の際、画像をフェードインさせたいのですが、以下のタグをコピーして貼り付けてもエラーになります。どこを修正したらよいのでしょうか？よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>
- ベストアンサー
- その他（インターネット・Webサービス）
背景画像　Ctrl+A保存が使えない？
<body background="http://i.yimg.jp/images/main13.gif" <br> <div align="center"> <table border=5 cellpadding=0 cellspacing=0 width=600> <tr> <th bgcolor="blue" background="./wall-index2.jpg"> <br> <br> <font size=5>あいうえお　かきくけこ。 </font></span> <font color="navy"> <br> <h3> さしすせそ。</h3></span> <br><br></font> </th></tr> </table> 上記の文をテキスト・ファイルにコピーしてから、その文をタグ実験場に貼り付けます。表れた文や画像をCtrl+Aで保存しようとしても枠内文章だけが保存されて、背景画像は保存されないようなのですが何故なのですか？　どうすれば全てを保存できるのですか？タグ実験場です→http://sussiweb.com/hp/tool/tag.htm 宜しくお願いします。返信、お待ちしております。
- ベストアンサー
- ホームページ作成ソフト

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