質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

ヘッダーの画像が表示されません。

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 502

amyugramu

score 16

前提・実現したいこと

自己紹介サイトを公開したい
http://tapiokachan000.com/index.html
途中まで出来ました。↓こんなかんじです
イメージ説明

この下の画像がヘッダーの部分にくる予定です。(自分のデスクトップ上で開いたときにはちゃんと表示されるのですが、アップロードしたものをみると表示されません)

イメージ説明

発生している問題・エラーメッセージ

なぜかヘッダーの画像が表示されていません。

試したこと

画像をすべてアップロードした。ヘッダーの画像もアップロードしました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • amyugramu

    2019/05/13 09:34

    その通りですね。焦ってました。ご指摘ありがとうございます。

    キャンセル

  • m.ts10806

    2019/05/13 09:35

    はい。別質問に同じ回答が寄せられることになると二度手間三度手間になってお互い大変になるので、そこはちょっと気にしてもらえたらと。

    キャンセル

  • amyugramu

    2019/05/13 09:48

    かしこまりました。気を付けます

    キャンセル

回答 4

checkベストアンサー

+3

質問者の方はCSSファイルをアップロードする場所を間違えているというのが正解なので
href="css/styles.css" を href="styles.css" に変えないほうが良いです。

CSSのbackgroundのurlが ../img になっていることからも
間違えて css/ ではなく / にアップロードしたことが
現在は確定しています。

url(../img/amyuheader.JPG);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 11:00

    href="styles.css"としてしまうとファイル管理の面で複雑になってしまうのですね。
    それではhref="css/styles.css"にします。

    キャンセル

  • 2019/05/13 11:05

    はい。
    「絶対パス」であれば「/」または「http://example.com/」のように始まります。
    「相対パス」は「そのファイルから見た位置」なので「../」のようにフォルダをさかのぼっていくような記述が採用されます。
    ちなみに「同じ階層からの相対パスの書き方」は
    「css/」と「./css/」で同じ挙動をしますがなるべく後者で統一されたほうが良いと個人的におもいます

    キャンセル

  • 2019/05/13 11:12

    よかったです。ありがとうございます。

    キャンセル

+2

ソースコードを見た感じ、該当する画像のimgタグが無いような気がします。
また、css/style.cssが読み込み出来ていません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 08:28

    コメントありがとうございます。
    css/style.cssが読み込み出来ていませんでした。
    直します。

    キャンセル

+1

CSSがアップロードされていません。
ヘッダー画像が表示されていないのも
現在のソースコードを見た限りではCSSがアップされていないことが原因です。
(おそらくCSSのbackgroundでヘッダー画像を指定している)
http://tapiokachan000.com/css/styles.css

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 08:29

    yasutomiさんの言う通りcssのbackgroundでヘッダー画像を指定しています。

    キャンセル

+1

CSSが読み込まれていないようです。CSSのパスが間違っているようです。
仮にこうすると...

<link rel="stylesheet" href="css/styles.css">


<link rel="stylesheet" href="styles.css">


正しく表示されました。
画像

ただ、ご指摘もあったように、CSSのパスを見る限り、画像のパスがCSSフォルダーに入っていると考えて書いてあったので...CSSを編集するのではなくCSSフォルダーを作成して、その中にstyles.cssを入れてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 10:06

    申し訳ありませんでした。

    キャンセル

  • 2019/05/13 18:45

    回答の編集ありがとうございます。cssのファイルにstyles.cssを入れて、それをアップロードしたらちゃんとネットで表示されました。
    お騒がせしました。

    キャンセル

  • 2019/05/13 21:45

    大丈夫です。こちらこそ、最初の回答が少し意味が違ってしまっていて...指摘されるまで気づきませんでした。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る