どうも7noteです。初心者が混乱しやすい3種類のパスについて違いを解説します。 そもそもパスとは何なのでしょうか。今回は「パスとは何か」「違いはどこにあるのか」「メリット・デメリット」について見ていきたいと思います。 パスとは？ 「パス」とは日本語では「道」という意味になります。たとえば、「TOPページに表示されているこの画像はTOPページのindex.htmlから見て、このフォルダの中のこのフォルダの中にある○○.jpgという画像を読み込んでいる。」というように、とあるファイルから別のとあるファイルまでたどり着くための道のりを「パス」といいます。 よくあるディレクトリ構造（それぞれのファイルの配置とか住所みたいな意味）を例に考えてみましょう。 〈親子関係をもつディレクトリ構造の例〉 image(フォルダ) cat.jpg dog.jpg animal(フォルダ) aaa.html bbb.html ccc.html toppage.html ①toppage.htmlから「cat.jpg」を読み込む場合（相対パス） 「image/cat.jpg」と書きます。 ②aaa.htmlから「dog.jpg」を読み込む場合（相対パス） 「../image/dog.jpg」と書きます。 これらのように①であれば、「imageフォルダの中のcat.jpg」。②であれば「一つ上（親）のフォルダのimageフォルダの中のdog.jpg」という道を示すことで、画像を読み込むことができます。この「違う場所にあるとあるファイルを読み込むまでの道」を「パス」と言います。 そして、このパスには大きく３つの書き方があり、「絶対パス」「相対パス」「ルートパス」の3種類が存在します。先ほどの①と②の例では相対パスという書き方で書きました。 いまからこれらの書き方や考え方などをご紹介していきます。 3種類のパスについて 「絶対パス」 ～絶対にURL全部書かないとダメ～ 例 「https://www.domain.com/」 「https://qiita.com/image/image.jpg」 上記のようにプロトコルやドメインから始まる書き方は「絶対パス」と言います。 絶対パスは、違うドメインのサイトにリンクさせたり、他のサイトから画像を参照のためもってきたりする場合に使われます。 「どこどこのサイトのこのフォルダの中のこの画像」みたいな書き方になります。 「相対パス」 ～書き方いろいろあってちょっとややこしい～ 例 「image.jpg」 「./image/gazou.jpg」 「../../css/style.css」 相対パスはちょっとややこしく、このファイルからみてどこのファイルを読み込むのかをしっかりと把握して記述する必要があります。 少しややこしいかもしれませんが、相対パスの中でも大きく2種類の書き方を覚えるだけで大丈夫です！ Ａ.「./」（もしくは記載なし「 」） これは「現在表示しているこのファイルからみて」という書き方になります。 例の2行目「./image/gazou.jpg」でいうと、「このファイルと同じ階層にあるimageフォルダのgazou.jpg」という意味になります。 B.「../」 これは「現在のファイルからみた一つ上（親）」という書き方です。 例の3行目「../../css/style.css」でいうと、「このファイルの親の親にある、cssというフォルダの中のstyle.css」という意味になります。 注意点 同じサーバーにあるファイルを参照するので、他のサイトにリンクさせたり、他のサイトの画像を読み込むことはできません。 「ルートパス」 ～いつも同じスタート地点～ 例 「/image/image.jpg」 「/image/gazou.jpg」 「/css/style.css」 ルートパスは「常に一番親にあたる位置から見て考える」書き方になります。 どの場所にあるファイルから読み込もうとしても、常に同じスタート地点である一番親のディレクトリから考えてどこにあるファイルなのかを表します。 メリットとしては、ファイルを管理する場所さえ変わらなければどこにあるファイルからでも同じ書き方で同じファイルを読み込むことができます。 まとめ WEBサイトなどでリンクや画像をいれる際は基本的には、「相対パス」で書くのが基本になると思います。 ただ、ヘッダーのロゴ画像などはどのページからでも同じ場所にある画像を読み込む必要があるので、「ルートパス」で書くといいでしょう。 外部のサイトなどへのリンクをいれるときには、絶対パスでなければ読み込むことができません。 パスは何度も使うことで場面場面で適切なパスの書き方をすることができるようになりますので、日々トレーニングを積み重ねてください！ おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
そもそもパスとは何なのでしょうか。今回は「パスとは何か」「違いはどこにあるのか」「メリット・デメリット」について見ていきたいと思います。
「パス」とは日本語では「道」という意味になります。たとえば、「TOPページに表示されているこの画像はTOPページのindex.htmlから見て、このフォルダの中のこのフォルダの中にある○○.jpgという画像を読み込んでいる。」というように、とあるファイルから別のとあるファイルまでたどり着くための道のりを「パス」といいます。
よくあるディレクトリ構造（それぞれのファイルの配置とか住所みたいな意味）を例に考えてみましょう。
〈親子関係をもつディレクトリ構造の例〉
image(フォルダ) cat.jpg dog.jpg animal(フォルダ) aaa.html bbb.html ccc.html toppage.html
①toppage.htmlから「cat.jpg」を読み込む場合（相対パス）
「image/cat.jpg」と書きます。
②aaa.htmlから「dog.jpg」を読み込む場合（相対パス）
「../image/dog.jpg」と書きます。
これらのように①であれば、「imageフォルダの中のcat.jpg」。②であれば「一つ上（親）のフォルダのimageフォルダの中のdog.jpg」という道を示すことで、画像を読み込むことができます。この「違う場所にあるとあるファイルを読み込むまでの道」を「パス」と言います。
そして、このパスには大きく３つの書き方があり、「絶対パス」「相対パス」「ルートパス」の3種類が存在します。先ほどの①と②の例では相対パスという書き方で書きました。 いまからこれらの書き方や考え方などをご紹介していきます。
～絶対にURL全部書かないとダメ～
例 「https://www.domain.com/」 「https://qiita.com/image/image.jpg」
上記のようにプロトコルやドメインから始まる書き方は「絶対パス」と言います。 絶対パスは、違うドメインのサイトにリンクさせたり、他のサイトから画像を参照のためもってきたりする場合に使われます。 「どこどこのサイトのこのフォルダの中のこの画像」みたいな書き方になります。
～書き方いろいろあってちょっとややこしい～
例 「image.jpg」 「./image/gazou.jpg」 「../../css/style.css」
相対パスはちょっとややこしく、このファイルからみてどこのファイルを読み込むのかをしっかりと把握して記述する必要があります。 少しややこしいかもしれませんが、相対パスの中でも大きく2種類の書き方を覚えるだけで大丈夫です！
Ａ.「./」（もしくは記載なし「 」） これは「現在表示しているこのファイルからみて」という書き方になります。 例の2行目「./image/gazou.jpg」でいうと、「このファイルと同じ階層にあるimageフォルダのgazou.jpg」という意味になります。
B.「../」 これは「現在のファイルからみた一つ上（親）」という書き方です。 例の3行目「../../css/style.css」でいうと、「このファイルの親の親にある、cssというフォルダの中のstyle.css」という意味になります。
注意点 同じサーバーにあるファイルを参照するので、他のサイトにリンクさせたり、他のサイトの画像を読み込むことはできません。
～いつも同じスタート地点～
例 「/image/image.jpg」 「/image/gazou.jpg」 「/css/style.css」
ルートパスは「常に一番親にあたる位置から見て考える」書き方になります。 どの場所にあるファイルから読み込もうとしても、常に同じスタート地点である一番親のディレクトリから考えてどこにあるファイルなのかを表します。
メリットとしては、ファイルを管理する場所さえ変わらなければどこにあるファイルからでも同じ書き方で同じファイルを読み込むことができます。
WEBサイトなどでリンクや画像をいれる際は基本的には、「相対パス」で書くのが基本になると思います。 ただ、ヘッダーのロゴ画像などはどのページからでも同じ場所にある画像を読み込む必要があるので、「ルートパス」で書くといいでしょう。 外部のサイトなどへのリンクをいれるときには、絶対パスでなければ読み込むことができません。
パスは何度も使うことで場面場面で適切なパスの書き方をすることができるようになりますので、日々トレーニングを積み重ねてください！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
投稿画面の作成 application.html.haml = yield の上にヘッダー下にフッターを記述する事によりどのページに行ってもヘッダーとフッターがある状態になる
= yield の上にヘッダー下にフッターを記述する事によりどのページに行ってもヘッダーとフッターがある状態になる
100日チャレンジの369日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 369日目は、 おはようございます昨日の作業・やったこと⇩●筋トレ 5分 kindle読書10分●ブログ記事1記事作成●プログラミング学習369日目 4h・メンターの課題用足しとお昼寝3時間ぐらいしたのであんまりできなかったわ#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 12, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 369日目は、
おはようございます昨日の作業・やったこと⇩●筋トレ 5分 kindle読書10分●ブログ記事1記事作成●プログラミング学習369日目 4h・メンターの課題用足しとお昼寝3時間ぐらいしたのであんまりできなかったわ#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 12, 2020
おはようございます昨日の作業・やったこと⇩●筋トレ 5分 kindle読書10分●ブログ記事1記事作成●プログラミング学習369日目 4h・メンターの課題用足しとお昼寝3時間ぐらいしたのであんまりできなかったわ#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
HTML5プロフェッショナル認定 レベル1合格しました 2020年の7月にHTML5プロフェッショナル認定 レベル1に合格することができました。 私は2019年の6月に中途入社で今の会社に入り、ITは全くの未経験でした。 また、2019年の10月に受けた基本情報技術者試験では、午前の点数が足りず、不合格になりました （基本的には午後で不合格になる人が多いので、周りからは何やってんだよ、と 叱責を受けました、、、） そのため、IT系で取得した初めての資格となります。 資格概要 資格名：HTML5プロフェッショナル認定 レベル1 時間：90分 問題数：60問 合格点：約70点/100点（都度、変わるそう） 受験料：15,000円（税別） 日時・会場：全国各地のテストセンターから自由に選択できる 試験方式：コンピュータベーストテスト（CBT） キーボード入力問題がいくつか出題される。 認定の有効期限：5年間 HTML5プロフェッショナル認定試験公式サイト HTML5,CSS3,JavaScriptなど最新のマークアップに関する技術力と知識を認定する認定資格です。 レベルは1と2があり、私はレベル1を受験しました。 レベル1ではhtmlとcss レベル2ではjavascriptがメインらしいです 出題範囲として 要素（htmlの要素） CSS3 レスポンシブルwebデザイン API概要 web概要（httpプロトコルなど） この5項目が出題されます。 比率とかは、公式サイトをご覧ください。 勉強期間 約2か月間 勉強方法 最初の1か月→テキストの内容理解（メモ取りつつ）、テキスト内の練習問題、公式サイトの練習問題 最初の1か月間は購入したテキストをひたすら読んで理解しました。 しかし、簡単には理解できませんでした、、、 →そのため、html要素とcssについては、テキストエディタ（サクラエディタなど）を使って、実際にどのような挙動になるのか確認していました。 レスポンシブルwebデザイン、API概要については、知らない単語が多すぎて、かなり苦労しました。 この対策としては一つ一つネットで調べる笑 丸暗記するのは簡単ですが、仕組みを知っているだけで、色々恩恵も受けれますしね。 web概要については、基本情報技術者の試験で、学習していた内容と被っているところもあり、比較的覚えやすかったですね。 2周くらいテキストを読んで、ある程度理解ができてきたら、テキストおよび公式サイトにある問題を解きます。 自分は、メモ帳にメモを取っていたので、出た範囲に印をつけていました。 どこが出題されやすいのか、など傾向が掴みやすくなりました！ 残りの1か月→ping-tの問題を全部金にするまでひたすら解く 他の方も書かれているかと思いますが、ping-tでひたすら問題を解いていました。 いやーこのping-t、めっちゃいいです笑 １か月2400円かかりますが、問題の質も本番と似ていて、何より解説がしっかり書かれていました 正直、テキストは少し自分では理解できないところもあったのですが、ping-tではその点が初心者でもわかりやすいように、かみ砕いて書かれていたな、という印象です。 また、「分野別」、「模擬試験」と2パターンの出題方法を選ぶことができて まずは、分野別に問題を解いて、都度復習 全て、銀のボックスに入れ終わったら模擬試験形式で問題を解く。 常に、95%以上の正答率、金のボックスにすべての問題を入れ終わることができるレベルまでひたすら解きました （もともと銅のボックスに問題が入っていて、1回正解したら、銀のボックス、2回連続で正解したら金のボックス、という風に問題を押し出していくイメージです） 受験結果 78点獲得して、見事合格です（合格最低点数70点） 所感 正直、もうちょっと獲得できたかなーって感じでした。 そこそこ問題は解いてきたので、少しショック、、、 本番の問題は、ping-tよりは少し難しい問題が出ました。 個人的な手ごたえとして 自信のある問題→65%くらい 少し迷った問題→20%くらい かなり迷った問題→10%くらい 分からない問題→5%くらい 結論、ほとんどが見たことのある内容でした テキスト、ping-t、公式サイトの問題を完全に理解していれば、95%は取れるってことですね。 ただ、細かい理解が追い付いていなかったり、でこういう結果だったんでしょう、、、 これは、今後の教訓ですね。 問題の難易度ですが 公式サイト問題＞本番＞テキストの練習問題＞ping-tといったところでしょうか。 公式サイトの問題は、かなり意地悪な問題多かった印象ですね笑 テキストの問題が一番本番に近かったですかね ping-tの問題は、解くというより、解いた後の解説を見るということが大切かと思います。 前も触れたように、本当に細かく解説してくれていますので勉強になります。 また、公式サイト問題、テキスト問題での知識が本番でも出たりしたので、こちらは解いて損は無いかと思います！ 総括 htmlやcssは今後、業務で使用していく頻度が高いので、勉強しておいて損はなかったです。 また、業務でhtmlのソースを見ても、容易に解読できるようになったなと思います！ 今後はwebサイトの作成とかも趣味で行っていければいいな～ 多分、合格したいだけであれば、要領良い人なら１か月あればできるのかなと思います。 ただ私は、本質を理解したいなと思っていたので、多少時間はかかりましたが、知識を身に着けて、かつ合格できて本当に良かったと思います。 初投稿となり、拙い文章でしたが、最後まで読んでいただきありがとうございました！ 参考文献 Qiita初投稿だったため、文章作成に際して、こちらの記事を参考にさせていただきました。 ありがとうございました。
2020年の7月にHTML5プロフェッショナル認定 レベル1に合格することができました。 私は2019年の6月に中途入社で今の会社に入り、ITは全くの未経験でした。 また、2019年の10月に受けた基本情報技術者試験では、午前の点数が足りず、不合格になりました （基本的には午後で不合格になる人が多いので、周りからは何やってんだよ、と 叱責を受けました、、、） そのため、IT系で取得した初めての資格となります。
資格名：HTML5プロフェッショナル認定 レベル1 時間：90分 問題数：60問 合格点：約70点/100点（都度、変わるそう） 受験料：15,000円（税別） 日時・会場：全国各地のテストセンターから自由に選択できる 試験方式：コンピュータベーストテスト（CBT） キーボード入力問題がいくつか出題される。 認定の有効期限：5年間 HTML5プロフェッショナル認定試験公式サイト
HTML5,CSS3,JavaScriptなど最新のマークアップに関する技術力と知識を認定する認定資格です。 レベルは1と2があり、私はレベル1を受験しました。 レベル1ではhtmlとcss レベル2ではjavascriptがメインらしいです
出題範囲として 要素（htmlの要素） CSS3 レスポンシブルwebデザイン API概要 web概要（httpプロトコルなど） この5項目が出題されます。 比率とかは、公式サイトをご覧ください。
約2か月間
最初の1か月間は購入したテキストをひたすら読んで理解しました。 しかし、簡単には理解できませんでした、、、 →そのため、html要素とcssについては、テキストエディタ（サクラエディタなど）を使って、実際にどのような挙動になるのか確認していました。
レスポンシブルwebデザイン、API概要については、知らない単語が多すぎて、かなり苦労しました。 この対策としては一つ一つネットで調べる笑 丸暗記するのは簡単ですが、仕組みを知っているだけで、色々恩恵も受けれますしね。
web概要については、基本情報技術者の試験で、学習していた内容と被っているところもあり、比較的覚えやすかったですね。
2周くらいテキストを読んで、ある程度理解ができてきたら、テキストおよび公式サイトにある問題を解きます。 自分は、メモ帳にメモを取っていたので、出た範囲に印をつけていました。 どこが出題されやすいのか、など傾向が掴みやすくなりました！
他の方も書かれているかと思いますが、ping-tでひたすら問題を解いていました。
いやーこのping-t、めっちゃいいです笑 １か月2400円かかりますが、問題の質も本番と似ていて、何より解説がしっかり書かれていました 正直、テキストは少し自分では理解できないところもあったのですが、ping-tではその点が初心者でもわかりやすいように、かみ砕いて書かれていたな、という印象です。
また、「分野別」、「模擬試験」と2パターンの出題方法を選ぶことができて まずは、分野別に問題を解いて、都度復習 全て、銀のボックスに入れ終わったら模擬試験形式で問題を解く。 常に、95%以上の正答率、金のボックスにすべての問題を入れ終わることができるレベルまでひたすら解きました （もともと銅のボックスに問題が入っていて、1回正解したら、銀のボックス、2回連続で正解したら金のボックス、という風に問題を押し出していくイメージです）
78点獲得して、見事合格です（合格最低点数70点）
正直、もうちょっと獲得できたかなーって感じでした。 そこそこ問題は解いてきたので、少しショック、、、
本番の問題は、ping-tよりは少し難しい問題が出ました。 個人的な手ごたえとして 自信のある問題→65%くらい 少し迷った問題→20%くらい かなり迷った問題→10%くらい 分からない問題→5%くらい
結論、ほとんどが見たことのある内容でした テキスト、ping-t、公式サイトの問題を完全に理解していれば、95%は取れるってことですね。 ただ、細かい理解が追い付いていなかったり、でこういう結果だったんでしょう、、、 これは、今後の教訓ですね。
問題の難易度ですが 公式サイト問題＞本番＞テキストの練習問題＞ping-tといったところでしょうか。 公式サイトの問題は、かなり意地悪な問題多かった印象ですね笑 テキストの問題が一番本番に近かったですかね ping-tの問題は、解くというより、解いた後の解説を見るということが大切かと思います。 前も触れたように、本当に細かく解説してくれていますので勉強になります。
また、公式サイト問題、テキスト問題での知識が本番でも出たりしたので、こちらは解いて損は無いかと思います！
htmlやcssは今後、業務で使用していく頻度が高いので、勉強しておいて損はなかったです。 また、業務でhtmlのソースを見ても、容易に解読できるようになったなと思います！ 今後はwebサイトの作成とかも趣味で行っていければいいな～ 多分、合格したいだけであれば、要領良い人なら１か月あればできるのかなと思います。 ただ私は、本質を理解したいなと思っていたので、多少時間はかかりましたが、知識を身に着けて、かつ合格できて本当に良かったと思います。
初投稿となり、拙い文章でしたが、最後まで読んでいただきありがとうございました！
Qiita初投稿だったため、文章作成に際して、こちらの記事を参考にさせていただきました。 ありがとうございました。
