ホームページ作成中。画像の表示

このQ&Aのポイント
  • ホームページ作成中に画像の表示ができない原因を解説します。
  • 質問者が初めてホームページを作成しているため、テンプレートから画像を切り替えようとした際に表示されない問題が発生しています。
  • 画像のパスや拡張子の問題はないため、可能性としては画像サイズやCSSの設定に問題がある可能性があります。
回答を見る
  • ベストアンサー

ホームページ作成中。画像の表示

初めてホームページを作成している者です。 Webサイトから商用のホームページのテンプレートをダウンロードして、HTMLとCSSで作成している途中です。(IEで確認。) 画像をテンプレートのものから自作の画像に切り替えようとしたのですが、表示されません。 画像はテンプレートの画像と同じディレクトリに入っているし、相対パスや拡張子は間違ってはないと思います。 元の画像はGIFの2.54KBで大きさは290×65です。 切り替える画像はGIFの4.67KBで大きさは290×65です。 HTML文は↓になっています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <title>あなたのサイト名などお書きください</title> </head> <body> ・ ・(省略) ・ <div id="header"><h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1></div > CSS文で関係ありそうなのは↓です。 <冒頭の関係ありそうな部分> @charset "Shift_JIS"; body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; } a { color:#98534B; text-decoration:none; } a:hover { text-decoration:underline; } img { border:0; vertical-align:bottom; } <この画像の部分> div#header h1 { margin:0; padding:10px 0; font-size:2em; color:#333; } div#header h1 a { color:#9B0000; } div#header h1 a:hover { color:#D30000; text-decoration:none; } 何が表示されない原因となっているのでしょうか?

noname#218560
noname#218560
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.3

まず、確認してほしいことは、ブラウザのアドレス欄に http://(ページのURL)/images/logo.gif と、入れてアクセスしたら画像が表示されますか? 表示されなければ、その画像がアップロードされていません(画像が壊れている場合もある)。 また、ページで画像が本来あるべき場所には、×印があると思いますので、そこで右クリックしてプロパティから、URLを見て、おかしくなっていないか確認してください。 あと、自作画像ではなく、最初の画像なら表示されるのかも確認してください。

noname#218560
質問者

お礼

回答ありがとうございました。 何故だか原因はわかりませんが出来ました。 ただ、元のHTML文を別のテキストエディターにコピーしただけなのに… 何が原因か知りたかった・・・

その他の回答 (2)

回答No.2

わからなければ、 HTMLを書き換えずに、画像ファイルを同じ名前で上書き保存した方が確実です。

noname#218560
質問者

お礼

回答ありがとうございました。 元の画像を削除して、切り替えたい画像ファイルの名前を元画像と一緒にしましたが出来ませんでした。 何で表示されないのでしょうか?

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

今回の件にcssは関係ありません。 ・(省略) ・ <div id="header"><h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1></div > 切り替えたい画像はこのhtmlを保存したディレクトリの中にあるimagesというディレクトリの中にlogo.gifという名前で保存していますか? ご確認ください。

noname#218560
質問者

お礼

回答ありがとうございます。 相対パスでなく絶対パスにもしてみたのですができませんでした。 保存した場所・保存名は間違っていなかったです。 まだ他に、原因があるでしょうか?

関連するQ&A

  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • 1カラムの段組について(mainの中のdiv要素について)

    こんばんは。 今サイト作りをしているのですが、mainの中のdiv要素が反映されないんです。最初はmainのmarginを0pxにして、divの所にmargin:10px;などにして、余白調整を行おうとしたのですが、反映されないんです。それでmainの所を20pxにした所、main部分は反映されましたが、div要素は反映されないままです。 間違いがありましたらご指摘お願いします。 CSS部 a:link{color:#181818; text-decoration:none;} a:visited{color:#383838; text-decoration:none;} a:active{color:#181818; text-decoration:none;} a:hover{color:#4c4c80; text-decoration:none;} body { margin:0px; padding:0px; font: 12px "MS Pゴシック", "ヒラギノ角ゴ Pro W3", Osaka; background-image:url("backimage3.gif"); } #header { width:700px; height:250px; } #layout { width:700px; margin: 0px ; background-image:url("backimage3_3.gif"); } #main { margin:20px; } div.sample1{ background-color: transparent; margin: 30px; text-align:left; color:#181818; font-size:12px; } div.sample2{ background-color:transparent; margin: 20px; text-align:left; color:#181818; font-size:12px; } HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css.css" rel="stylesheet" type="text/css"> <title>サンプル</title> </head> <body> <div id="layout"> <!--メニュー ここから--> <div id="header"> <img src="webtitle3.gif" alt="map" usemap="#map1" /> <map name="map1">中略</map> </div> <!--メニュー ここまで--> <!--中身 ここから--> <div id="main"> <div class="sample2"> ファースト<br> ファースト <div class="sample1"> セカンドセカンド </div> サードサード </div> </div> <!--中身 ここまで--> </div> </body> </html> 分かりにくい説明で申し訳ありません。もし何か補足説明がいるようでしたら是非仰って下さい! それでは失礼します。

    • 締切済み
    • CSS
  • CSS 記事内link色変更方法

    当方全くの素人なんですが、現在のブログで共有テンプレートを使用しています。 CSSで記事内だけのリンク、又はタグの色を変更したいのですが、 下記の部分をさわっても、記事内だけでなく、すべてのリンクに反映されてしまい困っています… いろいろインターネット上で書かれている事にはトライしてみたのですが、 全然できません。 「スタイルシートの末尾にこれこれを入力してください」などもやってみましたが、無理です。 自分はここが末尾だと思っているけど、実はそこが末尾ではないのかもしれません… どなたか、どこにどのように入力すれば良いのか、わかりやすくおしえていただけないでしょうか?! よろしくお願いします。 PS・リンク・タグの希望色は    ALINK 青     AVISITED 紫    AHOVERとAACTIVEは灰色希望です。 /* Hyper text ------------------------------------------------- */ a { text-decoration: none; /*\*/ overflow: hidden; /* for Fx */ /**/} a:link { color: #0000ff; ext-decoration: none;} a:visited {color: #cc0099; text-decoration: none;} a:focus, a:hover, a:active {color: #3399cc; text-decoration: none;} h1 a:link, h1 a:visited, .entry_header a:link, .entry_header a:visited {color: #603813; text-decoration: none;} h1 a:focus, h1 a:hover, h1 a:active, .entry_header a:focus, .entry_header a:hover, .entry_header a:active {color: #603813; text-decoration: underline;}

    • ベストアンサー
    • CSS
  • IEで画像が表示できません

    Firefoxでは画像が表示できるのですがIEでは表示されません スタイルーシートは下記のとおりです。 お願いいたします。 body {background: url("http://pub.ne.jp/man96/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;} a { color: #66c; text-decoration: none; } a:link { color: #66c; text-decoration: none; } a:visited { color: #66c; text-decoration: none; } a:active { color: #66c; text-decoration: none; } a:hover { color: #66c; text-decoration: underline; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { font-family: verdana; color: #777; font-size: 13px; font-weight: bold; text-align: 0px 0px; margin-bottom:11px; background: #ccffff この画像がIEで表示されなくて背景色です url("http://pub.ne.jp/man96/image/user/1170626058.jpg")no-repeat; background-position: center;padding:0px;height:250px; } ちなみにURL:http://pub.ne.jp/man96/です

  • IEでホームページが表示されず、CSSが表示されます。助けてください。

    ビルダーで作ったホームページをFTPで転送したらホームページが表示されず、CSSがポップアップされてホームページが表示されません。(IE8の場合。)IE6でホームページを開こうとしたら、「・・・ダウンロードできません。・・・」とエラーメッセージがでます。 ホームページ作成初心者ですが、こんな事初めてでどうしたらいいか困ってます。どなたか分かる方いらしたらぜひ教えて下さい。よろしくお願いします。 ちなみにアドレスは、http://www.life-is-best.sakura.ne.jp/kogao HTMLの一部 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>小顔cute</title> <meta name="description" content="小顔に「小顔cute」"/ > <meta name="keywords" content="小顔"/> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <link href="kogao.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="cent"> <div class="cont"> <table cellspacing="0" cellpadding="0" id="container" summary="テーブル"> <tr> <td colspan="3" id="header"></td> </tr> CSSの一部 @charset "shift_jis"; body { color: #333333; margin: 0px; padding: 0px; text-align: center; background: #FFFFFF url(bg.gif); /*壁色と壁紙設定*/ font-family : "MS P ゴシック", sans-serif; /*全体の文字サイズ*/ } .cent { text-align: center; } .cont { margin-left: auto; margin-right: auto; width: 920px; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } .color1 { color: #FE5F04; } img { border: none; } .uline1 { background: url(uline_1.gif) repeat-x left bottom; } /*全般のリンク設定。(a:hoverはカーソルオーバー時)*/ a { color: #000080; } a:hover { color: #cc0000; } /*コンテナー(HP全体の枠) ------------------------------------------------------------------------*/ #container { width: 920px; border: 1px solid #808080; /*HPを囲む枠の色と幅*/ text-align: left; margin-right: auto; margin-left: auto; }

  • <css> ボックスの隙間について

    お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ(上A、下B)作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 =============== <cssソース> body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } =============== <htmlソース> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body>  <div id="boxA">  </div>  <div id="boxB">  </div> </body> </html> よろしくお願いします。

  • CSSで画像を中央配置(センタリング)する方法について伺います。

    CSSで画像を中央配置(センタリング)する方法について伺います。 ※ボックスのセンタリングではなくて、ボックス内の画像のセンタリングです。 単純に text-align:center; で中央配置されましたが、テキストが入っていないボックスでも、このタグで文法的には問題ないのでしょうか? header内にphoto.gif画像が入っている場合。 CSS #header{text-align:center;} HTML <div id="header"> こんな単純で良いのでしょうか? 初心者なので、とんちんかんな質問だったら申し訳ありません。

    • ベストアンサー
    • HTML
  • ホームページに画像を貼りたい

    ホームページを作成している初心者です。画像を貼りたいのですが、テキストを見ながらやってもうまく行かないので、みなさん良ければ貼り方を教えてください。 <head> <meta charset="utf-8"> <div><title>日本語</title> <link rel="stylesheet"href="style.css"> </head> <body> <h1>初めてのホームページ作成<em>頑張っています☆</em>クレヨンしんちゃん</h1> <h2>camera </h2> <h3>peoples <em>photo</em></h3> <p id="def"> train<br></p> <p class="abc"><strong>yamagata</strong><br></p> <div><p><q>consent</q> <small>town</small> tea<br></p> <p><a href="http://www.yahoo.co.jp">日本語</a> <a href="http://ch.441108.com">楽しい<br></a> <a href="http://www.biccamera.com"/>何でも揃う、ビックカメラ</a> <p id="sample1">HEART</p> <p id="sample2">たれぱんだ</p> 桜が咲く</div> </p> <p1>コロコロ</p1> </body> </html> ↑これがHTMLです。 html,body{font-size:30px;line-height:1.5;} {margin:0; height:100%;} body{ background-image:url(myfile/original.jpg); background-repeats:no-repeat; background-position:center;} h1{ text-decoration: underline; text-shadow: -3px 3px 3px #f0f; color:#000000;opacity:0.7; text-align:left;color:yellow; } h1 em{color:blue;} h2{ text-decoration: overline; font-size:60px; font-style:italic; text-shadow: -3px 2px 3px red; color:pink; text-align:center;} h3{ font-size:60px; letter-spacing:-1px; text-transform:capitalize;} h3 em{color:red; font-style:normal;} p {text-indent:1em;font-size:30px;color:black; } p:nth-child(odd){ color:black; background-color:blue;} #def{color:purple;} p:nth-child(even) {color:white; background-color:lime;} p::first-letter{ color:white; background-color:black;} .abc{color:orange;} p{color:maroon !important;} a:link{color:black;} a:visited{color:green;} a:hover{color:orange;} a:active{color:aqua;} #sample1{border-style:solid;} #sample2{border-style:double;margin:30px;padding:20px;text-align:center;font-weight:bold;} p1{padding:3em; color:white; background-color:silver; border-radius:10px;} ↑これがCSSです。

  • divでくくったけれど、反映が変になります。

    divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }

    • ベストアンサー
    • HTML
  • ホームページのhover部分の印刷について

    ホームページの画像の部分をhoverを使って、画像切り替えしているところがあります。 当然、その部分は印刷されないのですが、hoverなしの画像の状態で印刷したいと思っ ております。 このような場合、どのような処理にすれば、screen上ではhoverがきき、印刷もされるよ うに出来るのでしょうか。 以下は現在のソースです 【HTML】 <div class="header"> <a href="./" id="hogehoge">Top</a> </div> 【CSS】 a#hogehoge { display: block; width: 900px; height: 210px; text-indent: -1000px; background-image: url("../images/main/img_header.jpg"); } a#hogehoge:hover { background-position: bottom left; }

    • ベストアンサー
    • HTML