HTML,CSS,JAVASCRIPTのパス指定

HTMLやCSS、JavaScirptで「src」「href」「url」などを指定する場合、相対バスや絶対パス、URLなどの指定が可能です。当ページでは相対パス、絶対パスの記述方法や注意点などをまとめています。

パスの指定方法

以下はアンカータグ（リンクタグ）のサンプルとなっていますが、「src」などその他のパスしても同じとなります。

	パスの指定方法
相対パス	../	<a href="../../company/info/map.html"> → 2階層上がって「company」→「info」ディレクトリ内の「map.html」
	../	<a href="../map.html"> → 1階層上の「map.html」
	./	<a href="./map.html"> → 現在のディレクトリの「map.html」
	なし	<a href="map.html"> → 現在のディレクトリの「map.html」
	（注）外部CSSファイル内に相対パスを使用する場合は、外部CSSからの相対位置となります
絶対パス	/	<a href="/company/info/map.html"> → ルートディレクトリの「company」→「info」ディレクトリ内の「map.html」
絶対パス	// http:// https://	<a href="//www.example.jp/company/info/map.html"> <a href="http://www.example.jp/company/info/map.html"> <a href="https://www.example.jp/company/info/map.html"> 「//」「http://」「https://」どれが良い？

ページTOP

外部ファイル内の相対パス

CSSやJavaScriptを外部ファイルとして使用する場合、相対パスの開始位置が異なりますので注意が必要です。

パスの指定	相対パスの位置
CSS (外部ファイル)	外部ファイルとしてCSSを使用する場合は、外部ファイルの格納先からの相対パスと指定なります
JavaScript (外部ファイル)	外部ファイルとしてJavaScriptを使用する場合は、 JavaScriptを使用する位置からの相対パスとなります
HTML内にCSS,JavaScript を記述する場合	CSSもJavaScriptも該当位置（ページ）からの相対パスとなります

ページTOP

URI(URL）のパス指定

URI(URL)のリンクを行う場合は注意が必要です。

リンク先	URI(URL)パスの指定注意
http://	以下の場合は注意が必要です。自分のページが「https://」で表示されている場合、「<script src=http://www.example.jp/js/sample.js"></script>」を指定していると、正常に表示されなかったり、ブラウザにワーニング表示されたりします。これは、https(SSL)で暗号化通信されているページで、暗号化していない画像やCSS、JavaScriptなどの外部ファイルを利用する事が原因となります。この場合は、リンク先が「https」に対応している場合は、以下のいずれかで改善します。「<script src="https://www.example.jp/js/sample.js"></script>」「<script src="//www.example.jp/js/sample.js"></script>」リンク先が「https」に対応していない場合は、単純には改善できません。該当のファイルを自分のサーバにダウンロードするなどの対応が必要です。また、アフェリエイトなどでhttps(SSL)対応していない場合は、他のアフェリエイト先を変更する必要があります。
https://	外部ファイルのリンク先が「https(SSL)」に対応している場合は、エラーなどが表示されず正しい表示となります。逆にリンク先が「httos(SSL)に対応していない場合は、エラーとなり表示が崩れる場合があります。
// （省略）	自分のページが「https://」「http://」の両方に対応している場合、省略形の「//」がおすすめです。「//」を使用すると、現在表示しているプロトコル（「http://」または「https://」）に合されます。

リンク先

URI(URL)パスの指定注意

http://

以下の場合は注意が必要です。

自分のページが「https://」で表示されている場合、
「<script src=http://www.example.jp/js/sample.js"></script>」を指定していると、正常に表示されなかったり、ブラウザにワーニング表示されたりします。

これは、https(SSL)で暗号化通信されているページで、暗号化していない画像やCSS、JavaScriptなどの外部ファイルを利用する事が原因となります。

この場合は、

リンク先が「https」に対応している場合は、以下のいずれかで改善します。
「<script src="https://www.example.jp/js/sample.js"></script>」
「<script src="//www.example.jp/js/sample.js"></script>」

リンク先が「https」に対応していない場合は、単純には改善できません。
該当のファイルを自分のサーバにダウンロードするなどの対応が必要です。
また、アフェリエイトなどでhttps(SSL)対応していない場合は、他のアフェリエイト先を変更する必要があります。

https://

外部ファイルのリンク先が「https(SSL)」に対応している場合は、エラーなどが表示されず正しい表示となります。
逆にリンク先が「httos(SSL)に対応していない場合は、エラーとなり表示が崩れる場合があります。

//
（省略）

自分のページが「https://」「http://」の両方に対応している場合、省略形の「//」がおすすめです。
「//」を使用すると、現在表示しているプロトコル（「http://」または「https://」）に合されます。

ページTOP

このページのURL

当サイトについてよくあるご質問

cman.jp サーバ監視【無料】ＱＲコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】文字/ボタンのイメージ画像作成【無料】ホームページのパーツ作成【無料】

スマートフォン・タブレット

運営 : CMAN 株式会社シーマン