-1

WindowsでVScodeでポートフォリオを作成している初心者エンジニアです。
画像リンクを作り、リンク先に飛んだら、URLのドメインが2つに増えて404エラーが出てしまいます。

例:
https://example.com/example.com/apple

aタグのhrefを改善したり、検索してみたりしたのですが、検索の仕方が悪いのか出てこず此方で力を借りようと思った所存です。
プログラミングの質問や此方のサイトを使うのも初めてで、足りない事が御座いましたらアドバイス頂けると助かります。

此方コードになります。よろしくお願い致します。

    <!-- Four -->
        <section id="four" class="wrapper alt style1">
            <div class="inner">
                <h2 class="major">制作物</h2>
                <p>
                    <p class="sample">Apple clone site</p>
                    <p>模写コーディング</p>
                    <br>https:/example.com/APPLE/
                    <br>
                
                        <p class="sample"><img src="images/img21.png"  width="570" alt="" /></p>
                    <a href="/APPLE/"></a></p>
                <section class="features">
                    
            </div>
        </section>

</section>

<追記>

最終的に今のコードはこちらになります。
VScodeのLiveServerでサイトを表示して画像のリンクをクリックすれば、正常に表示されるのですが、FileZillaを通して、エックスサーバーでサイトを表示した際に画像をクリックした場合404エラーが出てしまいます。

<!-- Four -->
    <section id="four" class="wrapper alt style1">
        <div class="inner">
            <h2 class="major">制作物</h2>
            
            <p>
                <p class="sample">Apple clone site</p>
                <p>模写コーディング</p>
                <br>https://example.com/APPLE
                <br>
                <a href="https://example.com/APPLE" class="image"><img src="images/img21.png" width="570" alt="" /></a>
7
  • 6
    コードが無いと何が原因か分からないですね。コード(HTML)を掲載しましょう。
    – merino
    Commented 2023年12月25日 15:53
  • 誰が、どういう権利で、何を根拠にクローズしているのですかね。回答がついているのに、それまで無駄になるのだけど。
    – WebSurfer
    Commented 2023年12月26日 1:57
  • @WebSurfer クローズに関しては、 こちら をご覧ください。 疑問が残る場合は、メタサイトで質問してください。 メタサイトに関しては、「メタ」とは?どのように機能しますか?をご覧ください。
    – mjy
    Commented 2023年12月26日 3:25
  • 2
    ちなみに質問がクローズされていても投票がプラスの回答がついている質問は自動削除されないためナレッジベースとしては残ります。
    – nekketsuuu
    Commented 2023年12月26日 3:37
  • 1
    質問者さんは実際に、 example.com というドメイン名を動作確認のために使用しているのでしょうか?また、動作確認用のドメイン・サーバーをどのように用意したのかについても教えていただけませんか?(そのために使用したソフトウェアや設定など)
    – supa
    Commented 2023年12月27日 23:30

1 件の回答 1

1

画像リンクを作り、リンク先に飛んだら、URLのドメインが2つに増えて404エラーが出てしまいます。

想像ですが、a 要素の href 属性にリンク先を設定していて、パスが間違っているのでは? 以下のようなルート相対パスを使ってませんか?

href="/example.com/apple"

試しに、以下のようにするとか、

href="/apple"

絶対パス、

href="https://example.com/apple"

を使ったらどうなりますか? 少なくとも絶対パスならそれが正しければ期待通りになるはずなので試してみてください。(注: 絶対パスを使うことを推奨しているわけではありません。ルート相対パスを正しく使うのが良いと思います)

パスが理解できてなければ「絶対パス 相対パス ルート相対パス」などをキーワードにしてググると参考になる記事がヒットしますので調べてください。

13
  • <!-- Four --> <section id="four" class="wrapper alt style1"> <div class="inner"> <h2 class="major">制作物</h2> <p> <p class="sample">Apple clone site</p> <p>模写コーディング</p> <br>https:/exmple.com/APPLE/ <br> <p class="sample"><img src="images/img21.png" width="570" alt="" /></p> <a href="/APPLE/"></a></p> <section class="features"> </div> </section> </section> コードはこのようなものになります。此方絶対パスを使えていますか?全てのコードは膨大な為載せられないので必要なものがあれば教えて頂けると載せます。
    – もちお
    Commented 2023年12月26日 15:27
  • > 此方絶対パスを使えていますか? <=パスが理解できてなければ「絶対パス 相対パス ルート相対パス」などをキーワードにしてググると参考になる記事がヒットしますので調べてください。話はそれからにしましょう。でないと、話が通じないので。
    – WebSurfer
    Commented 2023年12月26日 23:35
  • それから、href="/APPLE/" の最後のスラッシュ / が何を意味するかも調べてください。トレイリングスラッシュでググると出てくるはず。
    – WebSurfer
    Commented 2023年12月27日 0:08
  • さらにもう一つ、あなたの言う「画像リンク」って何なのですか? 追記されたコード <p class="sample"><img src="images/img21.png" width="570" alt="" /></p><a href="/APPLE/"></a></p> のことなら画像 img21.png はリンクになってません。はっきり言わせていただけると訳も分からず適当にコードを書いて投げられているとしか思えません。質問に書かれた情報が正しのかが疑わしいレベルです。
    – WebSurfer
    Commented 2023年12月27日 2:10
  • ご丁寧にありがとうございます。コメントを読み違えておりました申し訳ないです。パスの事もトレイリングスラッシュの事再学習させて頂きました。<a href="/APPLE" class="image"><img src="images/img21.png" width="570" alt="" /></a>を<a href="example.com/APPLE" class="image"><img src="images/img21.png" width="570" alt="" /></a>と過去に絶対パスにしていたのですが、VScodeのLiveServerでは画像をハイパーリンク状態にでき、しっかり指定したリンクサイトへ飛ぶことができていました。しかし、エックスサーバーでサイトを表示し画像をクリックした際に404になってしまいます。解決できないかとコードを書き換えていたのでグチャグチャで申し訳ありません。此方も画像リンクになっていませんか?個人で勉強している為情けないことに、ご指摘されないと気づけない部分もありご指摘いただけると助かります。私自身、文章力が無いのでうまく伝えられない部分も多いと思いますが、お付き合いいただけると幸いです。
    – もちお
    Commented 2023年12月27日 10:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。