スタイルシートのリンクをはる時・・・

質問

<link href="css/common.css" rel="stylesheet" type="text/css">と
<link href="/css/common.css" rel="stylesheet" type="text/css">の違いを教えてください。

回答No.2

三郷北 M君（@mkun55555）

<link href="css/common.css" rel="stylesheet" type="text/css">と
<link href="../css/common.css" rel="stylesheet" type="text/css">の違いという事で解答します。
．．は、一つ上の階という意味です。

■階層構造が次の場合
ルート―index.html
ルート―フォルダX-xxx.html
ルート―フォルダY―フォルダZ―zzz.html
ルート―フォルダCSS―common.css

★ルートの中のindex.htmlからcommon.cssを指定するには、
<link href="css/common.css" />
★フォルダXの中のxxx.htmlからcommon.cssを指定するには、
<link href="../css/common.css" />
..でルート、そこから/cssでフォルダCSS。
★フォルダZの中のzzz.htmlからcommon.cssを指定するには、
<link href="../../css/common.css" />
..でフォルダY、..でルート、そこから/cssでフォルダCSS。

回答No.1

torayoshi

(1)<link href="css/common.css" rel="stylesheet" type="text/css">
(2)<link href="/css/common.css" rel="stylesheet" type="text/css">

(1)CSSファイルを読み込むページに対してCSSファイルが一つ上の階層にある。
＝正常に読み込みが行われる。

(2)存在しない、あるいは無効の階層にCSSファイルがある。
＝正常に読み込めない。
(2)は二つ上の階層を指定しようとしてるわけだから、
～ ./css/common.css ～
が正しい記述。