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

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

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4013閲覧

githubで画像が表示されない。

keko

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/06/08 14:58

githubに入れた途端に一部の画像が表示されなくなりました。
エラーコードは、404が出ていますが、ファイルはちゃんと入ってます。

また、ファイルパスの記述も絶対パスにしましたが、上手くいきません。
解決策をお教えいただけなしでしょうか。

表示されないのは、「web制作アイコン」いがいの画像になります。
ファイルの中身は写真の通りです。
よろしくお願い致します。
イメージ説明

html

1<div class="services"> 2 <h1 class="performance">Service</h1> 3 <p class="select">-業務内容-</p> 4 <div class="box"> 5 <div class="item"> 6 <img class="service-img" src="web制作アイコン.png"> 7 </div> 8 <div class="text-box"> 9 <h2 class="service">コーディング</h2> 10 <p>LPやコーポレートサイト、ブログなど目的に応じて適切なコーディングを行います。スマホ画面サイズへの対応や軽微なコードの修正も対応しています。</p> 11 <h3>【料金目安】</h3> 12 <ul class="guideline"> 13 <li>コード修正:¥20,000~/1p</li> 14 <li>LP制作:¥80,000~</li> 15 </ul> 16 </div> 17 </div> 18 <div class="box"> 19 <div class="item"> 20 <img class="service-img" src="webデザインアイコン.png"> 21 </div> 22 <div class="text-box"> 23 <h2 class="service">Webデザイン</h2> 24 <p>綿密なヒアリングを行い、ご希望に沿ったデザインを作成致します。ユーザーインターフェースを重要視した設計で見る方にとって見やすいデザインを提供いたします。</p> 25 <h3>【料金目安】</h3> 26 <ul class="guideline"> 27 <li>LP制作:¥30,000~</li> 28 <li>コーポレートサイト:¥80,000~</li> 29 </ul> 30 </div> 31</div> 32 <div class="box"> 33 <div class="item"> 34 <img class="service-img" src="ワードプレスアイコン.png"> 35 </div> 36 <div class="text-box"> 37 <h2 class="service">Wordpress</h2> 38 <p>コーポレートサイトや個人ブログなどのWordPressサイトの構築や既存サイトのWordPress移行の対応をしております。</p> 39 <h3>【料金目安】</h3> 40 <ul class="guideline"> 41 <li>Wordpress移行:¥100,000~</li> 42 <li>Wordpress制作:¥200,000~</li> 43 </ul> 44 </div> 45 </div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/06/08 17:59

ファイル名が日本語だからでは。
keko

2021/06/08 21:49

回答ありがとうございます。 英語表記に変えてみてもダメでした。 他の日本語名の画像もありますが、そちらは表示されております。
Zuishin

2021/06/08 22:53

リポジトリの同一階層に html が無いようですが、どうやって表示していますか?
keko

2021/06/08 23:34

回答ありがとうございます。 htmlは写真の上部分にありましてスクリーンショットに写ってないだけです。
Zuishin

2021/06/09 00:09

何のためにそんな役に立たない画像を挙げたんでしょう? イメージ画像でしょうか? どのような手順で表示しているのかを、ブラウザの起動から順に詳細に、つまり回答者に伝わるように、つまり質問からしか判断できない回答者が判断できるだけの材料を不足なく十分提供できるよう質問を書き直せば解決が早いのではないかと思います。 「そんなの面倒くさい」「詳しい人はこれだけの情報から判断できるはず」と思うのであればサイト違いです。有償のメンターとリアルタイムにコミュニケーションをとりながら解決してください。
keko

2021/06/09 01:19

ご指摘いただきありがとうございました。 以後気をつけます
Zuishin

2021/06/09 01:20

この問題を解決する気がないなら以後気を付けてください。
Zuishin

2021/06/09 01:21

する気があるなら、今、気を付けて修正するのが早いと思います。
guest

回答2

0

画像ファイルを更新してまだ30分ほどですね。
反映まで2~3時間かかるかもしれません。
待ってみましょう。

投稿2021/06/08 15:04

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keko

2021/06/08 21:50

回答ありがとうございます。 今8時間ほど経ちましたが、表示されませんでした。
itagagaki

2021/06/09 01:01

これを試してみてください。 [GitHub Pagesで反映されないページをすぐに反映させる方法] https://qiita.com/shge/items/ac20f45c9e8e0b4f33cc それでもダメなら、GitHub運営に問い合わせてみてください。 英語でやりとりする必要がありますが。
keko

2021/06/09 13:01

紳士に対応いただきありがとうございました。 英語表記にすることで上手くいきました。
guest

0

ベストアンサー

WebサイトをWebブラウザで開いて、デベロッパーツールのコンソールを確認するとどのようなメッセージが表示されていますか?

404 の場合は、リンク先のファイルが見つかっていませんので、画像の URL (ファイル名かパス)に問題があると思います。

たとえば、ファイル名を英数字だけにしてみると状況は変わらないでしょうか?
(画像ファイル名を変えた場合は、index.html の中に記載している「日本語のファイル名」も同じように英数字の名前に書き換える必要があります。)

投稿2021/06/09 02:02

CHERRY

総合スコア25218

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keko

2021/06/09 13:00

全て英語表記にすると上手くいきました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問