Smart Brain

2023年09月20日

【質問】制作データの持ち主を問わずリンクを機能させる方法

Lesson5

HTML/CSS

VSCode

サイト制作課題の提出にあたって、ヘッダーおよびフッダーのリンクについての質問です。以下に詳細をまとめております。

【実現したいことは何か】
制作データの持ち主を問わず機能させたい。

【現在どのような状態か】
1.自分のpcでは機能しているが、提出先のpcでは機能しない

【なにが原因か？解決するために考えたこと・試したこと】
・誤字脱字確認
・絶対パス、相対パスの違いの確認
・httpやc:を追記
・下記、原因部分の削除
<a href="file:///Users/takkun0130/Desktop/石川拓光_フロントエンドLesson5課題/z_access_html/index.html">access</a>
の「/Users/takkun0130/Desktop」部分が別のPCでファイルを開いた際に適切ではなくなるため機能しないと考えていますが、対処法が見つかりません。

どなたか解決方法を教えていただけますと幸いです！

とくめい

コメントする

コメント（全3件）

1. くらげ

2023年09月22日

質問内容拝見しました！私も初心者なのであってるかわかりませんが、解決方法考えてみたのでよければ読んでってください↓

»「/Users/takkun0130/Desktop」部分が別のPCでファイルを開いた際に適切ではなくなるため機能しないと考えていますが、対処法が見つかりません。

私も同じくこの辺りの部分が原因かなと思います。

現在は絶対パスで記述されているようですので、ここを相対パスにすれば解決できるのではないかなと思います！

まず相対パスにするためには…

「"このリンクが記述されているhtml"と"リンク先のhtml"がどういった位置関係になるか」ということが分かれば対処できるかと思います。

下に候補を３つ書くので、よければどれに当てはまるか教えてください！

ーーーーーーーーーーーーーーーー

①２つとも同じフォルダの中にある場合。

②フォルダAの中に”リンクが記述されているhtml”と”フォルダB”が入っており、フォルダBの中に”リンク先のhtml”が入っている場合。

(リンクが記述されているhtml = フォルダB > リンク先のhtml)

③それ以外

ーーーーーーーーーーーーーーーー

①と②の場合は以下の記述で対処できるかと思いますので、書いておきます。

①の場合

<a href=“index.html">access</a>

②の場合

<a href=“フォルダBの名前/index.html">access</a>

③の場合はややこしいので、コメントでそれぞれの位置関係(現在どの場所にあるか)を教えていただければ、私も一緒に考えてみます。もしくは参考サイトを貼っておくので見ていただければ何かの手がかりになるかもしれません！確かうぇぶくりのLesson4の3にもそれっぽいことが書いてたはずです～

https://and-engineer.com/articles/Y1fGpxAAAAt07ZlQ#heading3-5

https://wp-p.info/tpl_rep.php?cat=html-beginner&fl=r12

2. とくめい

2023年09月22日

くらげさん

回答いただきありがとうございます！

候補のうち②でしたので、②の対処法を試した結果リンクが機能しました！

共有いただいたURLの内容を読んで、絶対パス・相対パスについての理解が不十分だったことが今回の原因だと感じました。。。

これであればファイルを開くPCの違いに関わらずリンクが機能するかと思いますので、すべてのリンクを修正して提出してみます。

ありがとうございました！！

3. くらげ

2023年09月22日

とくめいさん

質問の内容、解決したようで何よりです！！

モヤモヤがなくなって今日も美味しいご飯が食べられますね〜ヽ(´∇`)ノ