HTMLと異なるフォルダ内のCSSをリンクする方法

2024-02-13 23:21 HTML CSS フォルダ

  1. CSSファイルを配置するフォルダを作成します。例えば、"styles"という名前のフォルダを作成します。

  2. HTMLファイルが格納されているフォルダ内に、新しいHTMLファイルを作成します。例えば、"index.html"という名前のファイルを作成します。

  3. HTMLファイル内の<head>セクション内で、CSSファイルをリンクするための<link>要素を追加します。以下は、基本的な例です。

<head>
  <link rel="stylesheet" href="../styles/style.css">
</head>

上記の例では、href属性の値に../styles/style.cssと指定しています。これにより、現在のフォルダから一つ上の階層（親フォルダ）に移動し、そこから"styles"フォルダ内の"style.css"ファイルを参照します。

  1. CSSファイルのパスが正しいことを確認します。HTMLファイルとCSSファイルの相対パスが正しく指定されていることを確認してください。もしパスが正しくない場合は、ファイルの位置を再度確認し、適切なパスを指定してください。

これで、HTMLファイルと異なるフォルダ内のCSSファイルをリンクすることができます。必要に応じて、上記の手順を応用して他のフォルダ内のCSSファイルもリンクすることができます。