質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

641閲覧

相対パスで一階層上にあるファイル情報を表示させたい。

Apomb

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/03 00:17

編集2020/11/05 04:34

前提・実現したいこと

初めての質問になりますので、至らない所があると思いますが、その際はご指摘ください。

相対参照の勉強をしています。
本学習では
❶index.html
❷test.html
❸sub.html
の3つのデータを使用して、三者からそれぞれ相対参照で行き来が行えると言う内容です。

発生している問題・エラーメッセージ

❶のブラウザから❷または❸へ
❷のブラウザから❶または❸へ
この2つは問題なく参照できましたが、❸のブラウザから❶または❷への参照だけうまく出来ません。

❶、❷と異なり、❸のみは「../」を使った一階層上のファイル情報を表示させるコードなので、恐らくここの表記の仕方がどこかしら誤っているのだと思われます。

(ファイル階層はこのような形です。)

イメージ説明

❸sub.htmlをブラウザで開いた場合

イメージ説明

該当のソースコード

❶Index.html

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTMLの練習</title> 6 </head> 7 <body> 8 <p>このページはindexです。</p><br> 9 <a href="test.html">test</a> 10 <a href="try/sub.html">sub</a> 11 </body> 12</html>

❷test.html

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTMLの練習 | test</title> 6 </head> 7 <body> 8 <p>このページはtestです。</p><br> 9 <a href="index.html">index</a> 10 <a href="try/sub.html">sub</a> 11 </body> 12</html>

❸sub.html(今回正常に参照したいコード)**

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTMLの練習 | sub</title> 6 </head> 7 <body> 8 <p>このページはsubです。</p><br> 9 <a href="../index.html">index</a> 10 <a href="../test.html">test</a> 11 </body> 12</html>

ご回答いただければ幸いです。

追記  ページのソースを表示画面

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stdio

2020/11/03 03:27

"../try/sub.html" で出来たりしないでしょうか?
otn

2020/11/03 05:33

sub.htmlを表示している時のブラウザのアドレスバーは、 /1028/try/sub.html になっていますか? 「ページのソースを表示」で意図したHTMLが表示されますか?
Apomb

2020/11/05 04:03

stadio様 ご回答ありがとうございます。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの練習 | sub</title> </head> <body> <p>このページはsubです。</p><br> <a href="../index.html">index</a> <a href="../test.html">test</a> </body> </html> この内、どの場所を「"../try/sub.html"’」にするという事ですか?
Apomb

2020/11/05 04:17

otn様  ご回答ありがとうございます。 ブラウザのアドレスバーは「file:///Users/apple/Desktop/プログラミング/HTML/4%20%20%20%20HTMLのリンク/2%E3%80%80相対パスと絶対パス/練習/1028/try/sub.html」 となっており、仰っている「/1028/try/sub.html」の表示はされていると思われます。 「ページのソースを表示」で確認したところ、恐らく意図したHTMLが表示されていると思われます。 質問欄にページソース表示のスクリーンショットを添付いたしました、
Apomb

2020/11/05 04:36

m.ts10806様 ご指摘ありがとうございます。修正いたしました。 初めての質問になりますので、次回以降マークダウンのコード機能を使って提示致します。
itzuakniami123

2020/11/09 09:05

ファイル階層を一緒にして検証してみましたが、問題なく遷移できたのですが…。 途中で記述を変更したのなら、キャッシュが残っている場合もあるので再読み込みしてみてください。
HHH-

2020/11/09 13:40

はぅw 私も同じくできました。。。 多分だけどブラウザーのキャッシュが残ってる状態だと思うの。 コントロールキー(Ctrl) と Rキーを同時に押して 今開いてるページをリロードしてみてください
HHH-

2020/11/09 13:42

念のためこちらで書いたコードも記載しておきます。 ーーーーーーーーーindex <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの練習</title> </head> <body> <p>このページはindex(1)です。</p><br> <a href="test.html">test(2)</a> <a href="try/sub.html">sub(3)</a> </body> </html> ーーーーーーーーーーーーーーーtest <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの練習 | test</title> </head> <body> <p>このページはtest(2)です。</p><br> <a href="index.html">index(1)</a> <a href="try/sub.html">sub(3)</a> </body> </html> ーーーーーーーーーーーーsub <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの練習 | sub</title> </head> <body> <p>このページはsub(3)です。</p><br> <a href="../index.html">index(1)</a> <a href="../test.html">test(2)</a> </body> </html>
guest

回答1

0

自己解決

再度読み込みを行ったらページの遷移が出来ました!
キャッシュが残っていると、ページが正しく遷移されないのですね‥
1〜2週間悩んでいたので、大変助かりました!
itzuakniami123様、fon00sns様ありがとうございました!

投稿2020/11/09 22:11

Apomb

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問