Q&A
実際のコードがないと何ともいえません。
大抵はパスが正しくないか（そこに画像が存在しないことも含めて）、画像が破損しているかのどちらかですが。
現在就職活動のためにポートフォリオサイトを製作しましたが、うまくアップロードすることができないでいます。
具体的に見られる不具合は
①背景画像などCSSで設定している画像は表示されていますが、HTMLのimgタグで設定している画像は見えません
②ボタンを押すと製作実績などを表示するworksというページに遷移するのですが、そのページには適用されるはずのCSSが適用されていなかったり、①のように画像が表示されていなかったりします。
VSCodeにて作成したのですが、そちらのLiveプレビューではしっかり画像やCSSなど反映されていました。
「試したこと」
レンタルサーバーはロリポップでまずはじめに「ロリポップFTP」でファイルをアップロードしてみましたが、結果が上記のようになり、FTPが悪さをしているのかとおもい、「Filezilla」というFTPソフトでアップロードしましたが結果は同じでした。
index
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>割愛</title> 6 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> 9 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 10 <meta name="discription" itemprop="description" content="#"> 11 <meta name="msapplication-config" content="/favicons/browserconfig.xml" /> 12 <meta name="msapplication-TileColor" content="#ffffff"> 13 <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png"> 14 <meta name="theme-color" content="#f5deb3"> 15 <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico"> 16 <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png"> 17 <link rel="mask-icon" href="/favicons/safari-icon.svg" color="#555" /> 18 <link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png"> 19 <link rel="manifest" href="/favicons/manifest.json"> 20 </head> 21 22 <body> 23 <header class="header"> 24 <p class="main-title-sub">割愛</p> 25 <h1 class="main-title">割愛</h1> 26 <p class="main-description">割愛</p> 27 </header> 28 29 <section class="navbar" id="navbar"> 30 <div class="drawer-menu"> 31 <div class="drawer-bg"></div> 32 <button type="button" class="drawer-button"> 33 <span class="drawer-bar drawer-bar1"></span> 34 <span class="drawer-bar drawer-bar2"></span> 35 <span class="drawer-bar drawer-bar3"></span> 36 <span class="drawer-menu-text drawer-text">MENU</span> 37 <span class="drawer-close drawer-text">CLOSE</span> 38 </button> 39 <nav class="drawer-nav-wrapper"> 40 <ul class="drawer-nav"> 41 <li><a href="#">TOP</a></li> 42 <li><a href="#about">ABOUT</a></li> 43 <li><a href="#skills">SKILLS</a></li> 44 <li><a href="#works">WORKS</a></li> 45 <li><a href="#contact">CONTACT</a></li> 46 </ul> 47 </nav> 48 </div> 49 </section> 50 51 <section class="about" id="about"> 52 <h1 class="section-title-about">割愛 53 </h1> 54 <div class="about-contents"> 55 <img class="myface" src="/images/smile1.jpg" alt="myface" title="ドットの顔"> 56 <div class="about-string"> 57 <h2 class="about-content-title">割愛</h2> 58 <div class="scrollbar-hidden"> 59 <p class="about-main-content"> 60 割愛 61 </p> 62 </div> 63 </div> 64 </div> 65 </section> 66 67 <section class="skills" id="skills"> 68 <h2 class="section-title-skills">割愛</h2> 69 <div class="skills-wrapper"> 70 <div class="skill-box"> 71 <i class="skill-icon fas fa-code"></i> 72 <div class="skill-title">割愛</div> 73 <p class="skill-text"> 74 割愛 75 </p> 76 </div> 77 <div class="skill-box"> 78 <i class="skill-icon far fa-gem"></i> 79 <div class="skill-title">割愛</div> 80 <p class="skill-text"> 81 割愛 82 </p> 83 </div> 84 <div class="skill-box"> 85 <i class="skill-icon fab fa-js-square"></i> 86 <div class="skill-title">割愛</div> 87 <p class="skill-text"> 88 割愛 89 </p> 90 </div> 91 <div class="skill-box"> 92 <i class="skill-icon fas fa-mobile-alt"></i> 93 <div class="skill-title">割愛</div> 94 <p class="skill-text"> 95 割愛 96 </p> 97 </div> 98 </div> 99 <p class="etc">割愛</p> 100 </section> 101 <section class="works" id="works"> 102 <h2 class="section-title-works">割愛</h2> 103 <p class="works-contents"> 104 割愛 105 </p> 106 <a class="button" href="works.html">SHOW 107 MORE 108 </a> 109 </section> 110 111 <footer class="footer"> 112 <p class="copy-write"></p> 113 </footer> 114 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 115 <script src="lib/main.js"></script> 116 <script src="lib/jquery.inview.min.js"></script> 117 </body> 118</html>
必要なさそうな文字列は割愛しています。
階層は
index.html works.html images →smile.jpgなどのimg系 lib →javascript css →worksのcss →indexのcss favicon →favicon類
わかりづらいと思いますがこんな感じです。
自分の予想では階層がしっかり認識されていないのかなと思っています、ですがindexにはcssがしっかり適用されているのでどうしていいかわからない状況です。
どのような情報を開示すればいいのかわからないので、言っていただければ必要情報を補足します。
よろしくお願いします。
回答2件
0
ローカルのパスでimgタグが書かれているとかじゃないですか。
<img src="C:\Users\teratail\Documents\portfolio\img\image1.jpg">
実際に使っているHTMLファイルを見せてもらえないとなんとも。
投稿2019/01/18 04:01
総合スコア5405
0
ベストアンサー
どのようなURLでアクセスしているか分からないのですが、HTMLファイルからの相対パスにした方が良さそうですね。
例：
html
1<img class="myface" src="/images/smile1.jpg" alt="myface" title="ドットの顔">
↓
html
1<img class="myface" src="./images/smile1.jpg" alt="myface" title="ドットの顔">
/ で始まっているとそれは「ドキュメントルート」からの絶対パスとなります。
例えば提示のHTMLが
http://example.com/index.html という風にアクセスするのであれば / から開始で通りますが
http://example.com/hoge/index.html という風にアクセスするのであれば
/ から開始されている場合、url的にはhttp://example.com/image/smile1.jpg にアクセスしようとするため、
本来http://example.com/hoge/image/smile.jpgでアクセスしないといけない画像のパスにはなりません。
※とりあえず対応です。HTMLファイルの配置によって同じ画像にアクセスさせる際にパスを変えなければならないので、本来はドキュメントルートからの絶対パスを正確に入れたほうが間違いが起きにくいです
投稿2019/01/18 04:53
総合スコア80850
あなたの回答
tips
プレビュー
