HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする

<link> タグを使用して外部スタイルシートを導入します。外部スタイルシートには通常、次の 2 つの属性があります。

• href属性はCSSファイルのパスを示します
• rel="stylesheet" は、現在のページと href で指定されたドキュメントとの関係を記述します。つまり、href で接続されたドキュメントは新しいスタイルシートです。

<link href="style.css" rel="スタイルシート" />

2. 道の基本ルール

/ はルートディレクトリを表します。注意して使用してください
…/は前のディレクトリを表します
…/…/ はディレクトリの2つ上のレベルを表します
/…は下位ディレクトリを表します
/…/…は次の2つのレベルのディレクトリを表します

3. 一般的なパスの書き方の例

1. index.htmlとstyle.cssファイルは同じフォルダにあります

<link href="style.css" rel="スタイルシート" />

2. CSSファイルはHTMLファイルと同じフォルダにあります

<link href="c/style.css" rel="スタイルシート" />

3. htmlファイルの親フォルダとcssファイルの親フォルダが同じフォルダにある

図に示すように、フォルダー a の下にフォルダー b と b2 があり、フォルダー b の下のフォルダー c に style.css があり、フォルダー b2 に index.html があります。

• このときのパスの書き方は、index.html ファイルと style.css ファイルの共通の親フォルダを見つけるというものです。図からすると、それはフォルダ a です。
• まず、index.html ファイル、つまりこの時点では b2 フォルダーから始めて、まず a フォルダー (b2 フォルダーの親ディレクトリ) を探します。つまり、.../
• 次に、フォルダaからstyle.cssファイルを探します。つまり、b/c/style.cssです。
• 組み合わせ: href="…/b/c/style.css"

<link href="../b/c/style.css" rel="スタイルシート" />

これで、HTML ファイルが外部 CSS ファイルをインポートする場合のパスの書き方に関する記事は終了です。HTML から外部 CSS パスをインポートする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。