アプリ版：「スタンプのみでお礼する」機能のリリースについて

急いでいます！

html とcssのリンクがうまくいかない場合

締切済

  • 質問者：blueminirose
  • 質問日時：
  • 回答数：6件

練習のため、html とcssを手打ちしています。
テキスト通りに記述しているのですが、どうしてもうまくいかないところが出てきました。
画像は、回答者の方が比較できるようにhtmlの下にcssを貼ったものです。

実際はhtmlファイルとcssファイルを分けています。

ひとつめの画像のところはちゃんとブラウザに反映されるのですが、
footer部分にcssを指定したところは何も現れません。
テキストでは、この部分は飾り形が現れるようになっています。
試しに、htmlファイルの<div id="footer">の下に直接<img src="images/footer-bg.png">と書いてみるとちゃんと反映されます。

ここはcssでfooterを使えるようになるための箇所なのですが、
何度もやり直してもうまくいかず、どこでミスしているのかが分かりません。
画像のアドレスはあっています。
どうぞよろしくお願いします！

「html とcssのリンクがうまくいかな」の質問画像

質問者からの補足コメント

  • うーん・・・

    torayoshi　さま

    _____background-imageの前の線、
    よく見てみたら、htmlの画面をキャプチャしたら
    なぜか現れてました。
    実際のCSS画面には見えてないんです。
    でも、これあやしいですね！
    この辺り、よくみてみます。

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/06/24 21:06
    通報する

  • kon77 さま

    すみません！
    青くなりました！

    CSSファイルの最後に追加して、「青くならない」と思っていたのですが、
    それより上部にすでに色指定している部分があったので
    反映されなかっただけのようです。

    以前の色指定箇所をblueに置き換えたら変わりました。

    実際のhtml、cssファイルはもっと記述が多くて
    一気にキャプチャできないので、<body></body>の内容については
    反映しない部分だけぬきだして
    添付画像を作ったんです。

    ややこしくてすみません！

    No.2の回答に寄せられた補足コメントです。 補足日時：2015/06/24 23:18
    通報する
通報する

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

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： lemonchord
  • 回答日時：

相対パスにおいてimages/footer-bg.pngと../images/footer-bg.pngは違うからでは？

    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2015/07/13 15:55

No.5

  • 回答者： ORUKA1951
  • 回答日時：

No.4です。


＞内容が、初心者の私には理解できませんでした…。
　困りましたね。HTML,CSS(頭文字ですから大文字!!)は、いきなり「これにはどうするか？」という対症療法的な学習では応用は利かない。使えませんよ。
　きちんと基礎から順番を追って学ぶほうが、はるかに効率的で短時間で身につけられます。

　HTMLにしろ、CSSにしろ、HTTPではいったん取得したファイルの(ルートからファイル名までの)パスを基準にしては、その都度サーバーに要求します。・・これは画像だろうが、フレームデータだろうが、インクルードだろうが、javascriptだろうが皆同じです。最も重要な基礎です。当然スタイルも。その証拠に画像のような外部データを読み込まない指定は有効なはずです。
　HTMLの<heade></head>内にあるときは有効だったパスが外部ファイルにすると無効になった。あるいはHTMLの階層を変えると無効になったなどの原因はこれによる物です。

　そのための対処としては、先に述べたように絶対パスにするか、都度相対パスを書き換えるかになります。

　firebugを使ってスタイルシートで指定している画像データにポインター(マウス)をあわせると良くわかりますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2015/07/13 15:54

No.4

  • 回答者： ORUKA1951
  • 回答日時：

原因は極めて単純でスタイルシートを認識できていないだけじゃないかと。


HTTPプロトコルの基本ですが、
>html とcssのリンクがうまくいかない場合
　HTMLとCSS、頭文字ですから大文字ですよ。
　ブラウザは、そのファイルを読み込むと、そのファイルのパス情報(PATH_INFO)、そのファイルに記述してあるパス情報(PATH INFO)で描画に必要なファイルを見つけ出して、改めてHTTPプロトコルでサーバーに要求します。
(例)
http：//hoge.com/index.html
　と要求して得られたファイルのPATH INFOは/index.htmlです。そのHTMLファイルに、CSS/standard.css と記載してあると、改めてサーバー(hoge.com)に対して、/CSS/standard.css　を要求します。
　★/index.html から CSS/standard.css なので、要求は
　　/CSS/standard.cssです。

　そして、CSSファイルのPATH INFOは、/CSS/stantard.cssで、画像へのパスが url(../img/footer-bg.png )でしたら、ブラウザは、サーバーに対して、 /img/footer-bg.png を要求します。

　この場合、スタイルをHTML内にそのまま記述しても、ブラウザがサーバーに要求するのは、../img/footer-bg.png ですので見つからなくなります。

【対策】絶対パスで記述する。
　ひとつのスタイルシートをサーバ内の様々な場所から利用するためには、パスをすべて【絶対パス】で記述します。すなわち/CSS/standaerd.css,/img/footer-bg.png
　欠点もあります。サーバー経由でないと動作しません。Windowsの場合、/だと各ドライブが基準になります。そのためにテストはすべてサーバーに上げてテストするか、ローカルサーバーを構築することになります。
　私は、ローカルサーバーで http://local.host/・・・ ですけど。

　一番考えられる原因は、これだと思います。
　ウェブ開発されているのでしたら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxをお使いだと思いますが、そのアドオンのFurebugを使われると、リンクしているファイルへのパスや、詳細度など優先順位などがチェックできます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

内容が、初心者の私には理解できませんでした…。
丁寧に回答下さったのにすみません。
勉強します！

通報する
お礼日時：2015/06/28 16:15

No.3

  • 回答者： kon77
  • 回答日時：

HTMLからCSSへのリンクは正しく出来ているという事だと思いますし、私もNo.1さんと同じく、添付画像のソースをこちらで検証した結果、正しく表示されています。



添付画像のソースで、そちらで正しく表示されないなら、文字コード、半角/全角、大文字/小文字の違い等、小さなミスがあるのかも知れません。

添付画像のソースでは正しく表示出来、オリジナルの長いソースに限ってうまく表示されないのであれば、添付画像のソース以外の部分に原因があるのだと思います。

そのオリジナルのソースを、不要な部分を少しずつ削ってはブラウザで確認し、という作業を繰り返せば、最終的には原因に辿り着くかと思います。

こちらで正しく表示されたソースを貼っておきます。これをコピペしても正しく表示出来なければ、ソースの構文以外のものが原因かも知れません。もっとシンプルにしたソースも貼っておきますので、うまく行かなければそちらも試してみて下さい。


■ index.html （UTF-8）

<! doctype html>
<html>
<head>
<meta charset="utf-8">
<title>練習</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<img src="images/anna.jpg">
<div id="Footer">
<p>&copy;Copylight France. All right reserved.</p>
</div>

</body>
</html>


■ style.css （UTF-8）

@charset "utf-8";

#footer{
background-image:url(../images/footer-bg.png);
font-size:smaller;
}


■ フォルダ構成

root┬css─style.css
　　├images┬anna.jpg
　　│　　　└footer-bg.png
　　└index.html


■ index.html （シンプル版）

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="Footer">xxx</div>

</body>
</html>


■ style.css （シンプル版）

#footer{
background-image:url(../images/footer-bg.png);
}


あと、今回の問題の解決には役立たないかも知れませんが、ソースの検証サービスもありますので、良ければいつか使ってみて下さい。

■ Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …

■ W3C CSS 検証サービス
https://jigsaw.w3.org/css-validator/validator.ht …
    • good
    • 0
    • 件
通報する
この回答へのお礼

書いていただいたものをコピペしましたが
やはり解決しませんでした…
丁寧な回答、ありがとうございます！

通報する
お礼日時：2015/06/28 16:16

No.2

  • 回答者： kon77
  • 回答日時：

ご質問の回答ではないのですが、CSSファイルに、



body{background:blue;}

と記述すると、ページの背景が青くなりますか？
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

kon77さま

記述してみました。
青くなりません！
全く変わらないです。
これで何か原因が分かりますか？

反映されるものと、されないものがあって
どこがひっかかっているのかわかりません。。。

通報する
お礼日時：2015/06/24 23:09

No.1

  • 回答者： torayoshi
  • 回答日時：

フッター画像ちゃんと表示されますよ。


（Windows7 IE10 Firefox）

外部CSSの
background-image:url(～
の前になんかありますね（______background-imageみたいの）
これなんですか？
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！

前に何か入ってますか？
とりあえず一度消して
また記述しましたが、やっぱり見れないです。

私はmac OS Xで、Firefox、Safari、Chromeで確認ましたが全滅です！

通報する
お礼日時：2015/06/24 21:02

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報