![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
参考本を見ながら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ダックスの3ワンコの日常です。<br>
心癒される写真がいっぱい!!<br>
可愛いワンコのグッズ&ショップもご紹介していきます。<br>
楽しんでいって下さい。</font><br><br><br>
<hr waith="540">
<i>メッセージはこちらまで!!!</i>
</body>
</html>
よろしくお願いいたします。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
回答が出ているみたいですので、
回答については控えさせていただきます。
質問者様のサイトを書き直してみました。
以下からダウンロードしてご確認くださいませ。
サイトの幅は独断で800pxに設定し、センタリングしました。
また文書についてもセンタリングしました。
なお、サイトそのものが感染していないとは言い切れませんので、
ダウンロードされた際はウイルス対策ソフト等で
ウイルスチェックされるのをお忘れのないよう。
http://www27.atpages.jp/stepmaniasongs/sample.zip
No.4
- 回答日時:
>参考書が古いとは思いもしませんでした。
これは注意してください。何時買ったかではなく、いつの初版かがひとつの目安になるでしょう。
また内容的には、絶対に買ってはならない本の特徴として
・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)と書かれているものは使かわない。
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-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ダックスの3ワンコの日常です。
___</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>
回答ありがとうございます。参考書が古いとは思いもしませんでした。
2,3日前にかったばかりなのに・・・。
早速、やってみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
min-heightとheightの違いについて
-
<!-- #BeginLibraryItemとは
-
1時間30分を簡単に表したいで...
-
画面を拡大すると横幅が切れる
-
CSSを使って定型文を挿入できま...
-
div要素が重なってします
-
HEADタグとheaderタグ
-
iframeを使わずに上下50%ずつに...
-
html の divとtable の役割
-
ブラウザの表示幅で100%指定が...
-
ヘッダーとフッターだけ背景を...
-
【CSS】HTML直書き→外部ファイ...
-
ヘッダーを左右に二分割する方...
-
グリッドレイアウトで"auto-fit...
-
IE11へグリッドを対応させたい
-
htmlの文字が縦書きになる
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
要素間、要素内に隙間が空く
-
セクションをdivで囲むと見出し...
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報