css fileの参照方法について

Question

前提・実現したいこと

　現在、cssファイルを、公開フォルダ下にあるcssfilesというフォルダ下に置いております。
公開フォルダ -> cssfiles -> common.css
といった形です。
ここで、公開フォルダ下にあるhtmlからは、以下のような書き方で参照することができております。

<link rel="stylesheet" href="cssfiles/common.css" type="text/css" />

　イメージとしては当該のcssファイルとhtmlファイルの関係は以下のような形になります。
公開フォルダ -> cssfiles -> common.css
公開フォルダ -> test.html

発生している問題

　一方で、公開フォルダより一つ下の階層にあるフォルダにあるhtmlファイルからは上記と同様の指定では参照することができません。
イメージとしては当該のcssファイルとhtmlファイルの関係は以下のような形になります。
公開フォルダ -> cssfiles -> common.css
公開フォルダ -> サブフォルダ -> test.html

当該のhtmlファイルからすると、一度公開フォルダの階層に上がってからcssfilesフォルダを見に行く必要があるのかと思いますが、そのような記載をhref=の部分でどのようにすれば可能でしょうか？
初歩的な質問でお手数をおかけしますが、詳しい方のお知恵をお貸し頂ければ大変有難いです。

宜しくお願いいたします。

Answer 1

一度公開フォルダの階層に上がってから

<link rel="stylesheet" href="../cssfiles/common.css" type="text/css" />

【絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？ | FASTCODING BLOG】
https://fastcoding.jp/blog/all/frontend/path/

Comments

[cesolution]

非常に参考になるリンクも載せていただきありがとうございます！

Answer 2

<link rel="stylesheet" href="../cssfiles/common.css" type="text/css" />

このように../でフォルダを1階層上って公開フォルダに行きそこから改めてcssfilesフォルダのcssファイルにアクセスすればOKです

../は1階層上る。../../だと2階層上ります。./だと今いる階層です（これは省略可能）

Comments

[cesolution]

素早いご回答ありがとうございました。２階層上るという指定の仕方もできるんですね。

Answer 3

質問者さんの要件としては、このようなディレクトリ構造の時に、どうやってCSSファイルを指定するかということですよね？

├─cssfiles
│  └─style.css
└─htmlfiles
   └─index.html

その場合は、href="../../cssfile/style.css"で可能です。
..とは、前のディレクトリ(index.htmlから見たhtmlfiles)という意味です。

Comments

[nekora]

質問者の提示した構造とは違う構造になってらっしゃいます。
この場合は1階層上るで十分です。

[RikuS3n]

htmlフォルダはルートの中のサブフォルダの中に入っているのではないですか？

[cesolution]

RikuS3n様、nekora様、ご回答ありがとうございました。私の書き方が悪く混乱を招きまして申し訳ございません。RikuS3n様にまとめていただきました図のイメージで合っておりました。

[RikuS3n]

良かったです！