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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

307閲覧

GitHubにcommitしてwebページを公開すると画像が表示されなくなる

Andorfnous

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/01/22 10:35

ローカル環境ではしっかり表示されている画像が、gitに上げて公開し、URLにアクセスすると表示されなくなってしまいます。
理由がわかる方教えてください。

ちなみにチワワやラブラドールなど一部の犬は表示されます。

公開したページ:https://andorfnous.github.io/dogs/dog.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>ワンダフル 犬検索</title> 8 <link rel="stylesheet" href="dog.css"> 9 <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"> 10</head> 11<body> 12 <div class="header">ワンダフルいぬけんさく</div> 13 <h1>気になっている犬を選んでね</h1> 14 <select id="dogWant"> 15 <option value="000" >選んでね。</option> 16 <option value="0">シェパード</option> 17 <option value="1">ラブラドール・レトリーバー</option> 18 <option value="2">ポメラニアン</option> 19 <option value="3">ブルドッグ</option> 20 <option value="4">シベリアンハスキー</option> 21 <option value="5">ゴールデンレトリバー</option> 22 <option value="6">チワワ</option> 23 <option value="7">ダックスフント</option> 24 <option value="8">パグ</option> 25 <option value="9">柴犬</option> 26 <option value="10">ドーベルマン</option> 27 <option value="11">シーズー</option> 28 <option value="12">マルチーズ</option> 29 <option value="13">チャウチャウ</option> 30 <option value="14">サモエド</option> 31 <option value="15">ジャックラッセルテリア</option> 32 <option value="16">パピヨン</option> 33 <option value="17">秋田犬</option> 34 </select> 35 <p id="result"></p> 36 <p id="kindOfDog"></p> 37 <p id="picture"></p> 38 <p id="description"></p> 39 <script src="dog.js"></script> 40</body> 41</html>

CSS

1body { 2 margin: 0; 3 background-color: lightgreen; 4 color: rgb(65, 60, 60); 5 text-align: center; 6} 7 8.header { 9 background-color: rgb(240, 235, 235); 10 text-align: center; 11 font-family: "Hannari"; 12 font-size: 60px; 13 margin: 0; 14 padding: 0; 15} 16 17#want-dog { 18 font-size: 30px; 19 padding: 5px; 20 color: rgb(65, 60, 60); 21 background-color: rgb(229, 230, 221); 22 border-style: dashed; 23} 24#description { 25 margin: 0px 100px 0px 100px; 26 padding: 5px; 27 font-size: 20px; 28 29} 30 31@media screen and (max-width: 600px){ 32 body { 33 width: auto; 34 height: auto; 35 } 36 .header{ 37 font-size: 30px; 38 width: 100%; 39 height: 100%; 40 } 41 #picture { 42 width: auto; 43 height: auto; 44 } 45 46} 47

JS

1//HTMLの方に犬の名前や写真などを表示するために準備した場所を取得し、変数に代入。// 2const eranda = document.getElementById("dogWant"); 3const searchResult = document.getElementById("result"); 4const DogName = document.getElementById("kindOfDog"); 5const pictureDivided = document.getElementById("picture"); 6const descriptionDivided = document.getElementById("description"); 7 8 9 10//犬の名前を配列dogarrayに入れる// 11const dogarray = [ 12 "シェパード", 13 "ラブラドール・レトリバー", 14 "ポメラニアン", 15 "ブルドッグ", 16 "シベリアンハスキー", 17 "ゴールデンレトリバー", 18 "チワワ", 19 "ダックスフント", 20 "パグ", 21 "柴犬", 22 "ドーベルマン", 23 "シーズー", 24 "マルチーズ", 25 "チャウチャウ", 26 "サモエド", 27 "ジャックラッセルテリア", 28 "パピヨン", 29 "秋田犬" 30 31]; 32 33//犬の画像を犬の名前と同じ順番で配列dogPictureArrayに入れる// 34const dogPictureArray = [ 35 "img/シェパード.jpeg", 36 "img/ラブラドール・レトリバー.png", 37 "img/ポメラニアン.png", 38 "img/ブルドッグ.png", 39 "img/シベリアンハスキー.png", 40 "img/ゴールデンレトリバー.png", 41 "img/チワワ.png", 42 "img/ダックスフント.jpeg", 43 "img/パグ.jpeg", 44 "img/柴犬.jpeg", 45 "img/ドーベルマン.jpeg", 46 "img/シーズー.webp", 47 "img/マルチーズ.jpeg", 48 "img/チャウチャウ.jpeg", 49 "img/サモエド.png", 50 "img/ジャックラッセルテリア.jpeg", 51 "img/パピヨン.jpeg", 52 "img/秋田犬.jpeg", 53]; 54 55//犬の説明を犬の名前と同じ順番で配列dogDescriptionに入れる// 56const dogDescription = [ 57 "オス 30~40 kg\nメス 23~33 kg\n平均寿命10~12年\nシェパードはドイツ原産の犬だよ。「牧羊犬」という意味だけど、牧羊犬として使役されたことはないんだって。びっくりだね。\n知的で忠誠心と服従心に富み、訓練を好む性格から種々な作業犬として訓練され、\n災害救助犬・軍用犬・警察犬・麻薬探知犬など特殊訓練を必要とする作業犬として活用されているよ。", 58 "オス 29~36 kg\nメス 25~32 kg\n平均寿命10~13年\n元来、レトリーバー(獲物を回収 (Retrieve) する犬)と呼ばれる狩猟犬の一種だけど、\n現在はその多くが家庭犬として、あるいは盲導犬や警察犬などの使役犬として飼育されているよ。\n本来の使役用途である網にかかった魚の回収に適した、水かきのついた足が特徴だよ。\nちなみに写真のラブラドールの色は「ホワイト」ではなく「イエロー」って呼ばれているよ。", 59 "3~6 kg\n平均寿命12~16年\nポメラニアンという名称は、バルト海に面し、ドイツ北東部からポーランド北西部にまたがるポメラニア地方にちなんでいるよ。\nこの地方では、古来より様々なスピッツが飼育されていんだけど、ポメラニアンはドイツで中型のスピッツから品種改良を重ねることで小型化し、誕生した犬種だよ。17世紀以降多くの王族が飼育を始めたことで人気になったんだって。", 60 "オス 23~25 kg\nメス 18~23 kg\n平均寿命8~12年\n18世紀ごろの英国で雄牛(ブル)と犬を戦わせる牛いじめ(bullbaiting)という見世物が流行して、\n牛に対抗できる犬として開発された犬の品種だよ。強そうだね。\n1835年にイギリスで動物虐待法が成立し、牛いじめを含めたブラッド・スポーツが禁止されると、\nブルドッグは番犬や愛玩犬となったんだって。\n闘争に必要だった獰猛な性格も取り去られ、現在では強面とは裏腹に、温厚且つおとなしいんだよ。", 61 "オス 20~27 kg\nメス 16~23 kg\n平均寿命12~14年\nシベリアからカナダ北極圏にかけてのツンドラ地帯を原産地とする、社会性に富んだ性格の大型犬種だよ。\n極東北極圏を中心にトナカイ遊牧や狩猟を行う「チュクチ族」に、古くから犬ぞりなどの牽引による人荷の運搬・狩猟補助などを行う用務犬として重用されてきたよ。なんかオオカミみたいでかっこかわいいね。", 62 "オス 29~34 kg\nメス 24~29 kg\n平均寿命10~12年\nイギリス原産の大型犬だよ。。賢さ及び忠誠心を兼ね備え、穏和な性格の犬種であるためペットとして広く愛好されているよ。\nまた、活発な性格で探究心があるよ。元来、水鳥猟でハンターが撃ち落とした獲物を陸地に持ち返る(=retrieve)役割を担う犬で\n合図に忠実に従い、俊敏に行動し、水草の生い茂る湖の中を遠くまで泳いで鳥を持ち返る猟犬として、\n何時間も猟場で活動することが可能な猟犬だよ。頼もしいね!", 63 "オス 1.8~2.7 kg\nメス 1.8~2.7 kg\n平均寿命12~20年\nチワワは、北アメリカにおいては最も古い犬種で、テチチ (Techichi) として知られるアステカ文明の王族の時代から飼われ儀式の生贄とされていた、現状よりすこし大きい犬種の直系の子孫であると考えられているよ。\n人墓から一緒に埋葬されたテチチの骨も発掘されているんだって。\n日本では1970年代より飼育されるようになって、小型犬ゆえの飼育のしやすさから、\n2006年のジャパンケネルクラブの登録頭数は約8万6千頭とダックスフントに次ぐ2位という人気になっているよ。", 64 "9~12kg\n 平均寿命12.7年\nドイツ語のアナグマを表すダックス(Dachs)と、犬を表すフント(Hund)を合わせた「アナグマ犬」を意味するよ。巣穴の中にいるアナグマを狩る目的で手足が短く改良された犬種なんだって。\n顔は面長で、尾は長く、耳は下に垂れる形をしているよ。鼻孔が開いて空気を取り入れやすい形状で、\nマズルが長く鼻腔内の面積が広いため、嗅覚に優れているよ。\n生まれつき友好的で落ち着きがあり、神経質であったり攻撃的であったりということはないから安心してね。\n情熱的で辛抱強いんだ。ただ元々が猟犬であるがゆえに、時として攻撃的・負けず嫌い・頑固・活発・やんちゃ・遊び好きといった性格を見せるよ。", 65 "6.3~8.1 kg\n平均寿命12~15年\n名前の由来は、ラテン語で「握り拳」を意味する「pugnus(パグナス)」から、または、中国語で「いびきをかいて眠る王様」を意味する「覇歌(パークー)」から、古い英語で「優しく愛されるもの」からきているともいわれるよ。\n食欲旺盛で肥満になりやすいから注意してね。睡眠時にいびきをかくことも多いよ\n壊死性髄膜脳炎(パグ脳炎)という疾患を発症することがあって原因は不明で確実な治療方法も未だ知られていないんだって。", 66 "オス 10kg\nメス 8 kg\n平均寿命12~15年\n日本原産の日本犬の一種だよ。とにかくかわいいよ。", 67 "オス 40~45 kg\nメス 32~35 kg\n平均寿命9~12年\n19世紀末、ドイツのテューリンゲン州に住んでいたブリーダー、カール・フリードリヒ・ルイス・ドーベルマンによって\n警備犬としてジャーマン・シェパード・ドッグとジャーマン・ピンシャー、\nロットワイラー、マンチェスター・テリアとの交配により生み出されたんだって。こんな詳しくわかっているなんて...!\nカール・フリードリヒ・ルイス・ドーベルマンは税金徴収官を仕事としていたため普段より現金を持ち歩くことが多く、優秀な警備犬の必要性を感じ、この犬を生み出したとされるんだって。犬の歴史に人間の歴史あり、だね。", 68 "オス 4~7.25 kg\nメス 4~8.1 kg\n平均寿命12年\n「獅子狗」と呼ばれ、清朝末期の主に宮廷や貴人達の間で飼われていた犬だよ。\nもともとチベット高原原産の犬など寒冷地の犬を先祖に持つだけに下毛が密生している。\n四肢の毛はモコモコで防寒ブーツのようなんだって。いいなぁ〜。\n大きな瞳とあちこちに跳ねた鼻の周りの毛が特徴で、菊の花のように見えることから、「クリサンセマム・ドッグ」とも呼ばれるよ。", 69 "オス 1.4~3.6 kg\nメス 0.91~3.18 kg\n平均寿命12~15年\n繊細な被毛は手触りが良いが毛玉になりやすく、ブラッシングやトリミングなどの手入れが欠かせないよ。\n被毛が地面まで届くフルコートがスタンダードだけど、家庭犬では短く刈り込み(サマーカット)していることが多いんだって。\n性質は大人しく、人なつっこい。明るく、外交的でもあるよ。行動的には「ほどほどに快活でほどほどに穏やか」「ほどほどに賢いが、好奇心や探求心が強すぎてイタズラに走ることもない」\n「警戒心はあるので少しは吠えるが、いつまでも騒ぎ立てるタイプではない」など、何事にも中庸で、コントロールしやすいよ。\n日本では上述の「明るく、外交的」な性格とは逆で、「繊細・内弁慶・シャイ」と書かれていることが多いよ。\nこれは、日本人の潔癖さゆえに、純白のマルチーズが汚れないようにするため、\n社会化トレーニングをさせる機会を設けられないマルチーズが多いからであるといわれているんだって。", 70 "オス 18~41 kg\nメス 16~39 kg\n平均寿命11~13年\n紀元前から中国にいた地犬だよ。生い立ちには3つの説が存在するよ。\n一つ目はサモエドとチベタン・マスティフの交雑種に由来するという説,\nチャウチャウが超古代犬種(紀元前1000年以前から存在していた犬種)であり、かなり古くからこの犬種として存在していたという説,\n中国の古代犬種であるハン・ドッグの子孫で、それとチベタン・マスティフの交配に基づいて生まれたという説だよ。\nいろんな説があってドーベルマンとは大違いだね。", 71 "オス 51~56 kg\nメス 46~51 kg\n平均寿命12~13年\nロシアのシベリアを原産地とする犬の品種のひとつだよ。\n典型的なスピッツ系の体型をしており、シベリアン・スピッツとも呼ばれるよ。\n3000年以上にわたって飼育されてきた原始犬に近い犬種だよ。\n人とともに屋内で眠ることもあり、暖房代わりとしても用いられていたという話もあるよ。\n", 72 "6~8 kg\n平均寿命13~16年\nイギリス原産の小型のテリア犬種だよ。イギリス・デヴォンのジャック・ラッセル牧師がキツネ狩りのために、地中に潜り込める小さな白いテリアを作りだしたのがこの犬種のはじまりなんだって。\n俊敏な動きで、ドッグスポーツの小型犬部門では花形犬種だよ!\n十分な運動と、きちんとトレーニングとしつけをすることで、とてもすばらしい家庭犬になるんだって。\nテリアらしく好奇心旺盛、しかし非常に繊細で気性が荒いんだ。\n小動物やボールなど動くものには非常に敏感に反応し、それが自動車やバイクまで及ぶこともあるので、\n事故防止のために幼い頃からのどんなときでも制止または注目させられる訓練をしてあげてね。\n我慢強い犬ではないから、子供や小動物との接触は咬傷事故が起きないよう特に注意しないといけないよ。", 73 "オス 3.6~4.5 kg\nメス 3.2~4.1 kg\n平均寿命12~15年\n蝶が羽根を開いたような形の耳をした犬種だよ。\n15世紀以降、ポンパドゥール夫人やマリー・アントワネットをはじめとするヨーロッパ貴族の寵愛を受けるようになったんだって。\n当時のヨーロッパでは入浴の習慣が無く、蚤やダニなどが、人に寄生するので、それを避ける為に犬を飼ったんだ。\n当時の肖像画には、主人とともにパピヨンとされる犬が描かれているものが見られるよね。\nブルボン朝の時代までは垂れ耳が一般的で、また、リスのように尾が巻いていることからリス犬と呼ばれていたけど、\n19世紀末ごろに、スピッツやチワワと交配させて改良し、現在の立ち耳を持つタイプが出現したことで\n「パピヨン(フランス語で蝶の意)」と呼ばれるようになったんだ。", 74 "オス 27~41 kg\nメス 23~36 kg\n平均寿命10年\n秋田県原産の日本犬の一種。国の天然記念物に指定されているよ。\n「あきたけん」じゃなくて「あきたいぬ」だよ。日本犬種のうち唯一の大型犬種だよ。\n忠犬ハチ公も秋田犬だよ。", 75 76 77]; 78 79//プルダウンメニューで犬の名前が押されたときに実行する関数// 80eranda.onchange = event => { 81 82 83 84searchResult.innerText = ""; 85DogName.innerText = ""; 86pictureDivided.innerText = ""; 87descriptionDivided.innerText = ""; 88 89//HTMLのセレクトタグの中のoptionが持つvalueの値を配列を取り出すときに使う番号として変数dogTypeに代入// 90const dogType = eranda.value; 91 92if( dogType === "000"){ 93 return; 94} else { 95 96//うまく行っているかconsole.logでも確認// 97console.log(dogarray[dogType]); 98 99 100const kensakukekka = document.createElement("h2"); 101kensakukekka.innerText = "🐶犬索結果🐶"; 102searchResult.appendChild(kensakukekka); 103 104const inunosyurui = document.createElement("h1"); 105inunosyurui.innerText = dogarray[dogType]; 106DogName.appendChild(inunosyurui); 107 108const gazou = document.createElement("img"); 109gazou.src = dogPictureArray[dogType]; 110gazou.alt = "犬の画像"; 111gazou.width = 600; 112gazou.height = 600; 113pictureDivided.appendChild(gazou); 114 115 116const setsumei = document.createElement("p") 117setsumei.innerText = dogDescription[dogType]; 118descriptionDivided.appendChild(setsumei); 119}; 120} 121 122 123 124

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

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

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

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

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

guest

回答1

0

ベストアンサー

直接バグの解決となるかはわかりませんが、ファイル名に日本語は避けた方が良さそうです。日本語は見た目上同じでも、濁点や半濁点などの扱いが内部で異なることがあります。(参考

今回も、https://andorfnous.github.io/dogs/img/%E3%82%B3%E3%82%99%E3%83%BC%E3%83%AB%E3%83%86%E3%82%99%E3%83%B3%E3%83%AC%E3%83%88%E3%83%AA%E3%83%8F%E3%82%99%E3%83%BC.png
だと画像が表示されますが、
https://andorfnous.github.io/dogs/img/%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%87%E3%83%B3%E3%83%AC%E3%83%88%E3%83%AA%E3%83%90%E3%83%BC.png
だと画像が表示されません。

上記のアドレスはどちらもhttps://andorfnous.github.io/dogs/img/ゴールデンレトリバー.pngと表示されます。(実際にChromeでアクセスして、アドレスバーを見てみてください!)

おそらく、画像ファイル名とソースコード中のファイル名が(見た目は同じでも)異なっているため表示されないのだと思います。どちらにせよ、アルファベットや一般的な記号を利用している場合は起こり得ないケースですので、アルファベットを利用することをお勧めします👍

投稿2022/01/22 12:59

編集2022/01/22 13:00
yuta_22

総合スコア181

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

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

Andorfnous

2022/01/23 07:37

ありがとうございます、表示されました! これからはファイル名はアルファベット/記号を使います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問