Q&A
index.htmlの中身を見ないことには分かりませんね…。
環境：MacBook
Githubに、HTMLとCSSと画像ファイルをアップロードしたのですが、
Settingsの中のGitHub Pages の一番上にある URLをクリックすると、
HTML、CSSは反映されているのですが、画像が一つも反映されません。
一応Progateの指示通りやったのですが、何故画像だけが表示されないのかわかりません。
元々はAtomエディタで既に作成済みの、
HTMLファイルとCSSファイルです。（ブラウザでは反映されるので、imgのパスは間違っていません）
Atomのツリービューはコチラ↓
行った手順
①Githubのアカウント作成後、リポジトリを追加
②READMEをクリック→Commit new file
③Create new file でhtmlのコードを貼り付け
④同様の手順でcssのコードを貼り付け
⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード
何が原因でしょうか？どうすれば画像が反映されるのでしょうか？
そもそもGithubの仕様をイマイチ理解してないのかもわかりませんが、
ただ画像をアップロードするだけではダメなのでしょうか？
以上、よろしくお願いします。
※5/14追記 10000文字以内でないとテラテイルでは記載できない為、html/cssのコードを貼り付けることはできませんでした。
また、HTMLファイル、CSSファイル（２つ）、画像ファイル（多数）がアップロードされた事がわかるスクショはコチラです。↓その他情報が必要な場合は言って頂けますと幸いです。
HTMLファイル１つと、CSSファイル２つ、画像はAtomのimgフォルダからドラックしただけです。
なぜ反映されないのですか？？
※5/16追記 未だに解決されないのですが、
単純に何をどうするのかわかる方いますか？
要は、ただgithubでAtomに入っているファイルを表示させたいだけです。（その"ただ"ができないのですが）
URLはコチラになります。
https://github.com/yuki6001/yuki6001.github.io
よろしくお願いします。
返信お遅れました。見せたいのですが、
10000文字以内ではないと、ここテラテイルでは更新できません。
コードペンなどで共有した方が良いのでしょうか？
差し障りがないのであれば、GitHub リポジトリの URL を公開するのが早いかもしれません。
回答4件
0
html内の画像URLはGitHub Pageのものになっていますか？
htmlで指定しているURLをそのままブラウザのアドレスバーに入れて画像が参照できないようですと、そもそも画像が何らかの理由でGitHub Pageに反映されていないことになります。
投稿2019/05/15 02:16
編集2022/07/06 02:20退会済みユーザー
総合スコア0
>html内の画像URLはGitHub Pageのものになっていますか？
すいません、どういう事でしょうか？
HTML、CSSで使用している画像は全てがAtomのimgフォルダ内にある、相対パスになります。
すみません、スクショみましたが、index.htmlと画像群が同じフォルダになっており、Atomのツリービューと異なっています。これが原因でしょうか。
もしよければ、リポジトリのURLを教えていただければと思います。
URLは教える事は可能ですが、
他の方も言っていますが、「リポジトリのURL」とは一体何を指すのでしょうか？
お願いします。
ファイル一覧のスクショをとったページのURLで結構です。
ありがとう、やはり画像ファイルがimgフォルダに入っていないのが原因です。
Progateというのは学習サービスですかね。どのようにやればよいか問い合わせたらよいでしょう。
たまたまProgateにGitHubで公開する方法が記載されていたので、試しにその通りやったらできなかった次第です。
>やはり画像ファイルがimgフォルダに入っていないのが原因です。
これはAtom側でどうこうするのではなく、Github側の問題ですよね？
具体的にどうするのでしょう？
何がどう間違っているのでしょうか？
githubでimgファイルを作るにはどうするのでしょうか？
また別にリポジトリを作るのでしょうか？
それとも別な方法ですか？
以下でアニメ付きで紹介してくれています。「github フォルダ作成」でググると出てくるので、以後詰まったときは積極的にググりましょう。
https://qiita.com/tommy_aka_jps/items/b2ae85cbeab77e12a925
また、githubで操作し続けるのは編集が面倒になるので、ローカルでgit使うことをおすすめします。以下サイトなどで手順が見れます。「git github 使い方」などでググるとさらによいでしょう。
https://techacademy.jp/magazine/6235
分からない言葉が出た場合も、積極的にググってみてください。そうするとまた分からない言葉がでてきてググり続けることになりますが、それがいま必要なことです。
そのURLを何回も読みましたが、まるで理解不能です。私には。
ググる事が重要なのは重々承知の上ですが、
そもそも何をググるかわからないレベルです。
例えば、最初のURLのQiitaの記事ですが、これで要は何が言いたいのか、何を目的とした記事なのか全くもって理解できません。
そして私はエンジニアでも何でもなく、また、エンジニアを目指しているわけでもないので、
ググる事は重要ですが、ただただローカルにあるhtml/cssと画像をGithubで表示させたいだけなのですが...。
単に「ここをこうやってこうやればOK」という回答だけお聞きしたかったまでです。
これは果たして我儘なのでしょうか？
完全まる投げはここテラテイルのマナーとしてふさわしくないらしいですが、
この場合は逆にどうすれば良いでのでしょう？
最初のURLタイトルの「GitHub 上でサクッと空のディレクトリを作成する方法」
→ディレクトリ？
「ローカルでディレクトリ作って commit して push して～というのが面倒なときはお試しください。」
→面倒も何も、何を言っているのかサッパリ分かりません。
日本語で書かれてはいるので、馬鹿でも１ヶ月くらいただ「githubで表示させる」事を目的とすれば解決するのかもわかりませんが、恐らくくだらなくなって途中で投げ出すでしょう。
ただ「Github上で画像を表示させたい」ただただそれだけなのですが、
方法分かりますか？
お気持ちは分かります。しかし悲しいですが、勉強するしかありません。
あなたにとってはヤキモキするでしょうが、重要なことなのでお尋ねします。
エンジニアでなくエンジニアになりたいわけでもないのに、なぜGitHubに「あのページ」を上げたいのですか？目的はなんでしょうか。
失礼ながら、解析する中でhtml内の文言がちらほら見えました。2桁万円の参加費を支払うエンジニア養成講座の宣伝ページでしょうか。
エンジニアでなくディレクトリの意味も分からない方が、何が目的で、あのページを上げるのですか？誰に見せるのですか？誰を連れて行くのですか？
ハッキリ申し上げて、私は少し怪しみ始めています。
teratailが、マナー云々が、もしかしてそういうレベルではないのではないでしょうか。
バイトなら他にもいくらでもあるはずです。あなたは責任がないと思っていても、ページを上げた事実は残ります。ページには「yuki6001」と出ます。
依頼主がいるのなら、「自分には難しい仕事だった」と伝えましょう。脅してくるのであれば警察に相談すべきです。よく考えてください。人生は間違ってもいいが、したことは消えません。地獄なんてなくても、正しく生きたいと思ったときに既に手が汚れていては、一生脳内に「クギ」が刺されます。
それでも自分にとってそれが必要で、正義なのであれば、１ヶ月くらいただ「githubで表示させる」事を目的として悩んでください。その過程で投げ出すのであれば、それはあなたにとって必要のないことだったのです。
githubでディレクトリを作成する方法を示唆するよりもこの文章を書くことに私が時間をかけていることをご勘案いただきたい。今一度、考えてみてください。
だいぶ誤解されているようですが...笑
まず一つずつ答えます。
>解析する中でhtml内の文言がちらほら見えました。2桁万円の参加費を支払うエンジニア養成講座の宣伝ページでしょうか。
→ただiSaraというサイトの模写をしただけです。関係者でも何でもありません。（逆に関係者でも問題ないとは思いますが）
>エンジニアでなくディレクトリの意味も分からない方が、何が目的で、あのページを上げるのですか？誰に見せるのですか？誰を連れて行くのですか？
→誰に見せようが見せまいが、失礼ながら当該質問にあたり関係ないのでは？ですがあえて答えます。
特別誰に見せようなど考えてませんね。趣味程度でHTML/CSS等を独学で学んでいる中、Githubという「サーバー契約しなくてもウェブ上で公開？できる」ものを知り、誰かに自分が作成したページを見せる事ができるのか！という興味本位でやろうと思い、Progateに契約していた為、そこに手順が書いてあったのでそれ通りやってもできないから、ただただ質問した次第。ただそれだけですよ？
連れて行くとは一体何のことを言っているのでしょう？
あなたの経験からかもわかりませんが、かなりの偏見で言っていますよね？ソレ
「連れて行く」とは一体何を想像してそうなったのか、誰をどこに？？何のため？
また、逆に「連れて行く」としたら果たしてどのような問題があるのでしょう？
失礼ですが、独断と偏見で勝手な想像で言わないで頂きたく思います。
>ハッキリ申し上げて、私は少し怪しみ始めています。
→せっかく回答して頂いた方には言いにくいですが、それはこちらのセリフです。
何を言っているのですか？？
>バイトなら他にもいくらでもあるはずです。あなたは責任がないと思っていても、ページを上げた事実は残ります。ページには「yuki6001」と出ます。
→だから勝手にあなたの想像で話を進めないで頂きたい。
バイト？笑 いやいやだから今は趣味程度ですが？フリーランスですが本業は別ですから。
もちろん今後上達すれば、仕事に繋げられれば面白いとも考えていますが。
>依頼主がいるのなら、「自分には難しい仕事だった」と伝えましょう。脅してくるのであれば警察に....
→いやいやですから、話を想像だけで勝手に進めないでください笑
でも私のためを思って書いてくれた事は伝わります。
>githubでディレクトリを作成する方法を示唆するよりもこの文章を書くことに私が時間をかけていることをご勘案いただきたい。
→質問者の立場でいうのもアレですが今更なので言います。
それなら何故普通に教えないのでしょうか？
普通に教えたら質問者のためにならないから？それはただの先駆者のお節介です。
ここテラテイルで質問している方は、全て各々事情や状況が違うと思いますが。
全てがエンジニアではないだろうし、私もそうですが。
それをあたなの価値観で、勝手に想像でお説教まがいな事言われても困るのですが。
別に良いでしょう？githubで誰に見せようが（または見せても）関係ないでしょう？
ちなみに、一応言っておきますが、この模写したサイトは作成者がTwitterにて「ポートフォリオ等に許可なく載せて良い」と（条件付き）あります。
そもそも「示唆」って何ですか？
普通に教えれば良いのでは？わからないから質問しているのに、示唆って...。
求めているのは回答であって示唆ではありませんが。
上から目線すぎやしませんかねぇ。意地が悪すぎやしませんか？
いやぁ、もう普通に質問しているのに、何故普通に答えてくれないのか。
非常に面倒くさいし胸糞悪いですねぇ。
不特定多数の登録者に向けて回答をもらいたく投稿しているに、
何故勝手な想像で勝手に怪しまれ、勝手に説教まがいな事言わてるのでしょう。
ただ答えたい人間が答える場所でしょう？
揚げ足や、示唆なんかされたくて質問してるのではないのですよ、私は。
今一度、考えてみてください。
今一度、私の文面も見返して見ましたが、失礼な事を言っているのはわかります。
が、どうも気に食わないのです。（あなただけを指しているのではなく、稀にみる一部のユーザーも）
なんかこの質問サイト テラテイルは、自分が偉い？すごい？と勘違いしているのか、
やたら上から目線な奴がいますよね？
エンジニアってネット上ではそう言う方がお多いのでしょうか（偏見）
（あなたはそこまでではないかと思いますが）
なんか自分の部下や後輩が質問してきたと勘違い（錯覚）している人が多いイメージです。
別にキミに質問してないのだが？と言いたくなりますわ。
「自分がこうやってきたのだから、簡単には教えないヨ」的なお節介勘違い野郎がいますよね。（あなたは違うと思いますが）
どう思いますか？
二つ前の回答は素直にムカつきました。のでそこはもう触れません。
ひとつ前の回答(愚痴？)は分かる部分あります。たまに質問内容よく知らんのに絡んでくる人がいて「もういいんで…」と思うこともあります。
しかし、基本的に質問する側は「教えてもらう人」です。人間として上下はありませんので人格を否定するようなことは間違いだと言えますが、無料で人の時間を使って教えてもらうなら相応の態度があります。
また、相手はこちらの知識レベルを知りませんので、「このリンクで分かるだろう」と素直に送っていることがほとんどだと思います。しかし、前提知識にギャップがあると、逆に知識がある人も相手のわからなさが分からないものです。「全く分かりません」にも実際は幅があり、的確に応えることは難しい。(部下や後輩なら程度が分かるし責任があるので、もう少しいいのですがね。)
まず２つ目のコメントに対しての意見はわかりました。
ですが、むしろ１つ目の私が質問した事項を答えるべきかと思いますが。
>二つ前の回答は素直にムカつきました。のでそこはもう触れません。
→いやいや、触れません？何言ってるのですか？
散々、あなたの勝手な想像、偏見、主観で物言っといて、触れません？
それははさすがに筋が通らないのではないですか？
私はあなたの尋ねに正直に答えましたよ？
あなたも私の質問に答えないのですか？
お互い忙しいのは承知の上あえて言いますが、
「くだらない」や「面倒」の理由で逃げるのではなく、
あなたの意見を正直に言えば良いじゃない。
私の言っている事間違ってますか？
納得いかないのですわ。あなたの己の主観だけで物言ってる回答が。
わかるように説明するのが道理じゃないのですか？（これは私の主観だが）
さすがに「触れませんで」は済まないでしょう
もう私からは何も得られないことを悟ってね
悟ってね？笑
逃げるなら、最初から己の勝手な想像だけで物言うなよ。
都合悪くなったら、逃げるのはお粗末すぎ。
最初のコメントの理由くらい答えるのが筋だろ。
「勘違いでした。すいません」と言えばええやろが。
0
imgディレクトリーがローカルにはあるのにGithubリポジトリーの方にはないですね。
imgに画像ファイルを移したcommitをpushし忘れているのではないかと思うのですが、どうでしょう。
投稿2019/05/15 05:44
総合スコア312
自己解決しました。
単純に今回のケースは、Atomのimgフォルダの中の画像群をドラッグしたから反映されなかっただけで、
『Atomの「imgフォルダごと」Upload filesにドラック』したら普通に反映されました。
そう言う事ですよね？
他の回答者が私にはわからない言葉で難しい回答をしていた為、余計混乱しました。
これポイントとしては質問にもあります、
⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード
この「imgフォルダの中身を」が間違っていただけで、
回答としては、「"imgフォルダの中身を"ではなく、"imgフォルダごと"ドラッグすればOK」と言うただそれだけの事だったのでしょうか？
ですが、githubにはcommitやpushと言う言葉（操作）があるらしいのですが、
特別そんな事していないのに、きちんと反映されたのは何故でしょうか？
commitボタンもpushボタンも押してません...（そんなボタンはないでしょうが笑）
これはcommitをpushし忘れていてもできたと言う事ですか？
それとも、commitをpushしてるつもりなくても事実上pushしていたと言う事なのでしょうか？
解決したようでなによりです。
知らなかったのですが、いつの間にかgithubに直接アップロードする機能が加わっていたのですね。
質問者様はこの直接アップロード機能をお使いでしたのでpush操作は不要でしたね……この回答は見当違いでした。
githubにはドラッグして直接アップロードする使い方の他に、gitというソフトを使ってパソコンのファイルとgithubのファイルを同期するという使い方があり、開発者の間ではこちらが主流になっています。
そして、こちらの使い方ではcommitやpushという操作を多用することになります。
「github 入門」で検索すると入門サイトも沢山出てくるので、もし興味がありましたら調べてみてもいいと思います。
なるほど、そう言う事でしたか。
ありがとうございます。
0
「ブラウザでは反映されるので、imgのパスは間違っていません」ということは
消去法でGitHub Pages上に「imgの画像がない」か「imgの画像の名前が間違っている」の
どちらかの可能性しかないです。
投稿2019/05/12 00:30
総合スコア2939
「imgのパスは間違っていません」とあるので
baseURLなども適切に設定されているという前提の回答です。
すいません返信遅れました。
>GitHub Pages上に「imgの画像がない」か「imgの画像の名前が間違っている」
これはAtomのimgフォルダ内をそのままドラックしたので、考えにくいです。（もちろん画像はアップロードされています）
10000文字以内でないとダメなので、HTML/CSSのコードは貼り付けられませんでした。
この場合、コードペンなどで共有するべきでしょうか？
他に必要な情報はありますか？
0
ベストアンサー
単純に質問の⑤Upload filesより、Atomエディタの中のimgフォルダの中身を全てアップロード
この「imgフォルダの中身を」が間違っていただけで、
「"imgフォルダの中身を"ではなく、"imgフォルダごと"ドラッグすればOK」
と言う事が解答とわかった。
ただ「imgファイルごと移動する」ただただ、それだけ。
その一言を誰でも良いから言って欲しかった...。
勝手な妄想で御託並べていた回答者もいたが、全く必要なし。
もったいぶって偉そうに、勝手な妄想で「質問者のため」的な文章は断じて求めていない。
投稿2019/05/21 09:14
退会済みユーザー
総合スコア0
最初のほうで jjj_aaa さんが「すみません、スクショみましたが、index.htmlと画像群が同じフォルダになっており、Atomのツリービューと異なっています。これが原因でしょうか。」と言っていてわたしは解決だと思っていたのですが……
「ドラック」という用語を使っていたようでそれも混乱を招いたのでは？
私はその部分は解決と全く思っていません。
jjj_aaa は「示唆」と言っている事からも、直接的な解答にまるでなっていないと私は思いました。私は。
で、その後URLを見せ、返信が「やはり画像ファイルがimgフォルダに入っていないのが原因」とありました。
これも、「だからそのやり方を聞いているのだが.... 」と思いつつ、こちらも返信すると、URLを貼った返信が来て、
その内容は解決には全くいたらず。
（pushやコミットどうのこうの関係ないのですから）
そこで、自分でMacのFinderの「imgフォルダごと」ドラッグさせたらまさかの反映された為、そこで解決した次第です。
また、「ドラッグ」を「ドラック」に間違えただけで、果たしてどのような混乱を招きますか？
単純に誤字だと判断できないのでしょうか？
あなたの回答
tips
プレビュー
