HTML実践学習16 パスの種類

ITリテラシー学習
ITリテラシー学習

Webページを制作する際に画像をファイルから呼び出したい場合に使用する「パス」の説明をします。

パスとは?

特定ファイルへの道筋を示す情報のことを「パス」と呼びます。
Webページを制作するケースでは、呼び出したい画像を指定する際などに用います。

パスの種類

「パス」とは「任意のファイルがどこにあるかその位置を記したもの」です。
いわば「ファイルの住所」のようなものです)
例えば以下の場合は、「https://wht.co.jp/about」の部分がパスになります。
パスには「絶対パス」「相対パス」「ルート相対パス」の3つの記述方法があります。

<a href="https://wht.co.jp/about">株式会社ホワイト|会社紹介</a>

絶対パス

「絶対パス」とは「最上位の階層を起点として目的のファイルがどこにあるかを記述したファイルの位置情報」です。
フルパス とも呼ばれます。
この「最上位の階層」は 「A. インターネット上のファイルを指定する場合」と「B.パソコン上のファイルを指定する場合」は、見た目上違うもののように見えるのですが、どちらも目的のファイルを記した位置情報です。
例を見てみましょう。

絶対パス(A.インターネット上のファイルを指定する場合)

https://menter.jp/c/images/H1_180101_1.png

上記インターネット上のファイル(ページ)の場合、その場所を記すためにはURLでドメインを指定するところからスタートします。
「https://menter.jp/ サーバーの、/c/images フォルダにある、H1_180101_1.png ファイルを表示しなさい」を意味します。
試しに上記URLへアクセスしてみてください。画像の置き場所を指定したので、画像ファイルを見ることができるはずです。

絶対パス(B.パソコン上のファイルを指定する場合)

file:///C:/Users/yyokoyama/Documents/MENTER/portofolio/index.html

上記パソコン上のファイルの場合、その場所を記すためにWindowsの場合は上記のようにドライブ名を指定するところからスタートします。
「Cドライブの、Users/yyokoyama/Documents/MENTER/portofolioディレクトリにあるindex.htmlファイルを表示しなさい」を意味します。

*補足1
円マーク「¥」でフォルダを区切って階層を表す場合や、スラッシュを用いる表記もありますが利用するシーンによってその表記方法が変わります。表記方法は異なるが同じ情報だと捉えて構いません。

*補足2
はじまりの「file:///」はスキーム名(「◯◯な手段で通信します」を示す情報)のひとつです。
Windowsでローカル(≒自身のPC)ファイルをブラウザで表示させる際に必要になる”おまじない”だと捉えてください。

POINT

「最上位の階層を起点として目的のファイルがどこにあるかを記述したファイルの位置情報」が「絶対パス」です。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました