Q&A
ご提示のソースはアップ前の手元のものですか？
試しに、ブラウザでサーバ上のindex.htmlを表示した状態で、ソースを表示してみてください。
初めてXサーバーにファイルをアップしようとしています。
(ドメイン名は仮の名前(sample.com)で記載させて頂いています)
https://sample.comにアクセスするとindex.htmlのトップページは表示できました。
しかし、ナビゲーションメニューから他ページへアクセスしようとすると404File Not Foundになってしまいます。
その時のurlはhttps://sample.com/xampp/htdocs/sample/access.htmlで、なぜかxamppのファイルを開こうとしています。もともとxamppとVScodeを使用しコードは作成したのですが、なぜなのかわからないです。
cssは有効になっており、jsのハンバーガーメニューも有効になっています。
XサーバーWebFTPの階層
sample.com --- public_html ---- index.html
public_html
|
|-- html --- access.html
| |- company_profile.html
|
|-- css --- index.css
| |- access.css
| |- company_profile.css
|
|-- js ---- main.js
| |- hamburger.js
[index.html]
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="../css/index.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> </head> <body> <header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__home"><a href="../html/index.html">ホーム</a></li> <li class="global-nav__company_profile"><a href="../html/company_profile.html">会社概要</a></li> <li class="global-nav__access"><a href="../html/access.html">アクセス</a></li> <li class="global-nav__contact"><a href="../html/index.php">お問い合わせ</a></li> </ul> </nav> <div class="hamburger" id="js-hamburger"> <span class="hamburger__line hamburger__line--1"></span> <span class="hamburger__line hamburger__line--2"></span> <span class="hamburger__line hamburger__line--3"></span> </div> <div class="black-bg" id="js-black-bg"></div> </header> <div class="header-logo"> <h1>サンプルステーション</h1> </div> <div class="top-pic"> <img id="top-pic" src="image/top1.png" width="950" height="470"> </div> <footer> <small>(c)2020 合同会社 サンプルステーション</small> </footer> <script src="../js/main.js"></script> <script src="../js/hamburger.js"></script> </body> </html>
[試したこと]
ナビゲーションメニューのページがアップできていないのか確認するために
https://sample.com/html/access.htmlを開いてみると表示できました。
cssとjsは相対パスで有効になっているのに
ページ偏移だけができないので、相対パスでなく絶対パスにしてみましたがダメでした。
<nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__home"><a href="https://sample.com/index.html">ホーム</a></li> <li class="global-nav__company_profile"><a href="https://sample.com/html/company_profile.html">会社概要</a></li> <li class="global-nav__access"><a href="https://sample.com/html/access.html">アクセス</a></li> <li class="global-nav__contact"><a href="https://sample.com/html/index.php">お問い合わせ</a></li> </ul> </nav>
不足情報等ございましたら、お手数をお掛けし恐れ入りますが、ご指摘いただけますと幸いです。
何卒よろしくお願い致します。
あとPHPは無関係かと思いますので、タグを外したほうが良いでしょう。
ご返信ありがとうございます。
上記ソースはアップ前の手元のものです。
ブラウザのソースの方確認しましたら、xamppのファイルへ移動になっていました。
```
<nav class="global-nav">
<ul class="global-nav__list">
<li class="global-nav__home"><a href="/xampp/htdocs/sample/index.html">ホーム</a></li>
<li class="global-nav__company_profile"><a href="/xampp/htdocs/sample/company_profile.html">会社概要</a></li>
<li class="global-nav__access"><a href="/xampp/htdocs/sample/access.html">アクセス</a></li>
<li class="global-nav__contact"><a href="/xampp/htdocs/sample/index.php">お問い合わせ</a></li>
</ul>
</nav>
```
PHPタグ消去しました。ありがとうございます。
WebFTPにアップロードしているファイルが最新の状態になっていない事が原因でした。
見て頂いた方々、takumisan無駄にお時間使わせてしまいすいません。
ありがとうございました。
自己解決
