ケケンタCSSが上手く反映されない……
とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。
- パスとは何か？
- パス記号「./」や「../」の正体
- 相対パスと絶対パスの違い
HTMLの勉強を始めたばかりの頃は、いったい何が原因でCSSが反映されないのかがすぐにわからなかったりして、上手くコーディングを進められない！ということが起こりがちです。
今回はその中でも、パスの書き方を間違えているが為にCSSファイルがそもそも読み込めていない、という方に向けて
ケケンタパスってなに……？
をお伝えする記事を作成しました。
この記事へたどり着くまでの間に、ブラウザのページ更新やキャッシュの削除など思いつく限りを試したけれどもやっぱりCSSが反映されないという方にとっての助けになれば幸いです。
ケケンタWeb制作の副業にご興味のある方にはこちらの記事もおすすめです。
CSSが反映されない原因 ～パスの記述ミスとは～
CSSが上手く反映されない原因は
- CSSを記述した後、ファイルの保存をし忘れている
- キャッシュが残っており、最新のCSSの情報がブラウザに反映されない
- ブラウザのページ更新をし忘れている
など様々です。
ちなみにCSSの指定方法は３パターンあります。
ケケンタその中でも特に初学者の方が引っかかりやすいのが「パスの記述ミス」です。
パスの記述ミスというのは、端的に言うと
パソコン側にCSSファイルの「置いてある場所」を正しく伝えられていない
ということです。
例えば、下記のimgタグがあったとします。
<img src="img/kekenta/dog-icon.jpg">これは「imgフォルダの中にあるkekentaフォルダの中にあるdog-icon.jpgを表示してほしい」とコンピュータにお願いをしています。
しかし、実際にdog-icon.jpgが「kekentaフォルダ」ではなく、imgフォルダ内にそのまま置かれていたらどうでしょう。
この場合、伝えた場所と、実際にファイルが置いてある場所が異なるため
ケケンタあれ？ kekentaフォルダにdog-icon.jpgが無いよ？
という状況になるわけです。
さらに、パソコンは自分が「どのように困っているのかをユーザに伝えること」が基本的にできません。
そのため、「ファイルを見に行ったけど無かったから何もしない」という結果に終わります。
これが、「パスの記述ミス」によってCSSが反映されない状況です。
ケケンタCSSファイルまでのパスの書き方がわかっているかどうかで、ここの対処のしやすさも変わってきます。
パスとは？
改めて、そもそも「パス」とはなんでしょう？
パスとは、言うなればファイルの住所です。
先ほどの例では、「dog-icon,jpgファイルの置き場所」がパスにあたります。
人の場合、初めてどこかのお店に行くときには必ず住所を調べ、それを元に道を進んで行くと思います。
「パス」とはまさに住所の役割を持つもので、住所が人のためにあるとすると、パスはコンピュータのために存在する「位置情報」です。
パスはコンピュータのために存在する「位置情報」のこと
先ほどご紹介したimgタグの例を再度ご説明します。
<img src="img/kekenta/kekenta-dog.jpg">このsrcに記述されているのが「パス」です。
意味は「imgフォルダ内のkekentaフォルダ内のkekenta-dog.jpg」です。
このように記述をすることで、コンピュータに「imgフォルダ内のkekentaフォルダ内のkekenta-dog.jpgを持ってきて」と伝えているわけです。
パスには「相対パス」と「絶対パス」がある
ここでさらにパスについて踏み込んでご説明致します。
コンピュータのための「住所＝パス」は、正確に言うとさらに2つに分けられます。
- 絶対パス
- 相対パス
ケケンタまずは絶対パスから見ていきましょう。
絶対パス
絶対パスとは言うなれば「住所」です。
あなたが住んでいるお家には当然、下記のような「住所（絶対パス）」があります。
日本○○県○○市○○町●-●-●一方、コンピュータ上では
すべてのファイルに対して同様に住所が割り当てられています。
この割り当てられている住所が「絶対パス」です。
絶対パスには、下記のようにザックリ２つの表記パターンがあります。
- C:\Users\kekenta\OneDrive\デスクトップ
- https://google.com
どこかで見覚えのある方もいらっしゃるかと思います。
見た目はまったく異なりますが、いずれも「絶対パス」です。
具体的には
前者はローカル（＝使用しているパソコン）における絶対パス
後者はインターネット上における絶対パス
です。
ケケンタもう少し具体的にご説明をします。
この「絶対パス（住所）」は、世界中のどこにいるどんな人が見ても、必ずひとつの場所を指し示すものです。
コンピュータ寄りに言い換えると、どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示すのが絶対パスです。
……と、いうのが説明とはなりますが、恐らく多くの方は、後述する「相対パス」の説明をご覧いただくことでようやく正確な理解に繋がる内容かと思います。
そのため、ピンと来ていないという方は、まずは「ふーん」程度にお読み頂ければと思います。
絶対パスとは、どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示すもの
相対パス
相対パスとは、現在いる場所をスタート地点とした場合、目的地がどこにあるのかを示すものです。
人の世界では、恐らく相対パスに該当する正式な表記はなく、あるとするならば道を尋ねられた時に「１個先の信号を右に曲がって手前から３つ目の建物です」というような言い方が相対パスに該当します。
これがつまり、「現在いる場所をスタート地点とした場合、目的地がどこにあるのか」ということです。
相対とは、ある基準から見てどのように違うのかという比較的な表現ですが、相対パスとは「現在いる地点を基準とし、どこを辿っていくことのか」を表すものです。
ここで、先ほどお見せしたimgタグの例を再掲します。
<img src="img/kekenta/dog-icon.jpg">このsrcの中身は、実は相対パスです。これが例えばindex.html内に記述されているとすると、index.htmlを基準点とした場合のパスが
img/kekenta/dog-icon.jpg
です。
これを改めて翻訳すると、「index.htmlが存在するフォルダ内にあるimgフォルダ、その中にあるkekentaフォルダの中にあるdog-icon.jpg」となります。
重要なのは、ファイル同士の位置関係を正確に理解し、記述することです。
この位置関係を表現する相対パスを書き間違える＝パスの記述ミス
とお考え下さい。
相対パスのことをよく知らなかったという方は、ファイル同士の位置関係と言われてもイマイチぴんと来ないかもしれません。
考え方のコツとしては、
パスを記述するファイル＝基準点
として、「基準点からどのようにフォルダをクリック、あるいはひとつ前に戻ったりすることで、目的のファイルが存在するフォルダまでたどり着けるのか」を実際にパソコンを操作して場所を確認することです。
そうすることでファイル同士の位置関係を正しく確認することが出来るため、あとはそれをパスとして表現するという流れになります。
- 相対パスとは「現在いる地点を基準とし、どこを辿っていくことのか」を表すもの
- ファイル同士の位置関係を正確に理解し、記述すること
- 基準点＝パスを記述するファイル
補足 ～パスの意味・記述方法を理解する意味～
実は、Vitual Studio Codeのようなエディタツールにはパスを予測表示してくれる機能が備わっていることもあります。
しかし、パスは今後プログラミングに取り組んでいく上で一生付きまとってくる要素のひとつなので、ここを分かっていないとプログラミングが滞る原因となってしまいます。
そのため
エディタの補助機能を使用すれば確かに簡単に書くことはできるけど、きちんと理解することが非常に大切
と、個人的には考えています。
「./」や「../」の正体
HTMLの勉強を進め、あれこれ調べものをしているときに「./」や「../」といった表記を見かけたことはないでしょうか？
パスを正しく記述する上でこの２つの表記をきちんと理解することは不可欠なため、ここで併せてご説明させて頂きます。
結論から言うと
- ./
-
現在のフォルダ（＝カレントディレクトリ）
- ../
-
ひとつ上のフォルダ
をそれぞれ示しています。
カレントディレクトリという言葉はあまり聞きなじみがないと思いますが、IT界隈ではよく使用する表現なので、別のサイトで調べものをする際の補助の意味で敢えて紹介させて頂いています。
カレント＝現在の
ディレクトリ＝フォルダ
という意味です。この記事ではこのあとも「フォルダ」と記載をしていますが、今後のプログラミング学習を進める上で是非ディレクトリという呼び方に慣れ親しんで頂ければと思っております。
./とは
まずは「./」の意味から。
以下の２つはまったく同じ意味です。
※２つ目はsrcの中のimgの手前に「./」が付いていることに注目して下さい。
<img src="img/kekenta/dog-icon.jpg">
<img src="./img/kekenta/dog-icon.jpg">「./」とは現在のフォルダのこと。
つまり、
./img/ ＝ 現在のフォルダ内にあるimgフォルダ
という意味になります。
言ってしまえば、この記号は省略が可能ということです。
記述するメリットとすると「現在のフォルダ（カレントディレクトリ）」を明示的に表すことができるため、読む人によって可読性が高まるというところでしょうか。
慣れてしまえばどちらの表記でもパッと見て意味がわかるようになるため、個人的には基本は省略で良いかなと思っています。
ただ、「./」を使用しているコードも存在するため、意味をしっかり理解しておくことが大切です。
../とは
「../」は、現在いるフォルダの、そのひとつ上のフォルダを表します。
例えば、
<img src="../kekenta/dog-icon.jpg">というパスの指定があった場合、これは「現在いるフォルダのひとつ上の階層――そこにあるkekentaフォルダの中にあるdog-icon.jpg」を示します。
パッとイメージがしづらいかもしれませんが、「ひとつ上のフォルダを記述するときは『../』って書くんだな」と思って頂ければ問題ありません。
何度か使用していく内に本質的な理解が深まっていくと思います。
- ./ は現在いるフォルダ＝カレントディレクトリを表す記号。省略可能
- ../ は現在いるフォルダから見てひとつ上のフォルダを表す記号。頻出・習得必須
相対パスと絶対パスの違い
一通りパスの説明をお伝えしたところで相対パスと絶対パスの違いを改めて整理したいと思います。
- 絶対パス（ファイルの住所）
-
世界中のどこにいるどんな人が見ても、必ずひとつの場所を指し示すもの
これをコンピュータ寄りに言い換えると「どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示す」もの - 相対パス
-
現在いるファイル・フォルダを基準点とし、目的のファイル・フォルダまでの道筋を示したもの
相対パスの説明を読むまでは絶対パスの説明がピンと来なかった方も、また違った形で意味を捉えられているのではないでしょうか。
パソコン世界独自の考え方でもあり、始めの内はパスについて中々イメージが湧かないかもしれません。
しかし、この先プログラミングの学習を継続していく中でパスは必ず登場してくる要素のひとつです。よって、気が付けばパスの記述に困ることも次第に無くなるかと思います。
ケケンタ絶対パスは住所、相対パスは現在位置からの道案内、で覚えるとイメージしやすいかもしれません。
パスのまとめ
いかがだったでしょうか？
この記事はCSSの読み込みがどうしても上手く行かないという方の中で、さらにパスの記述ミスが疑われる方のお役に立ちたいという気持ちから執筆を致しました。
パスに関する正しい知識・理解が得られれば、今後パスの記述ミスによって時間や精神を消耗することもほとんど無くなるかと思います。
この記事で少しでもパスの理解の後押しとなったならば幸いです。
このブログでは今後もプログラミングを独学で学んでいる方の手助けになる記事を発信していきます。
またどこかの記事でお会いできれば光栄です。それでは良きITライフを。
- 絶対パス……どんなファイル（コンピュータ）から見ても必ず同じ場所を表すもの
- 相対パス……現在いる地点を基準とし、どこを辿っていくことのかを表すもの
- ./ ……現在いるフォルダ＝カレントディレクトリを表す記号（省略可能）
- ../ ……現在いるフォルダから見てひとつ上のフォルダを表す記号（頻出・習得必須）
もしもWeb制作の独学に限界を感じたら
Web制作は未経験者でも比較的簡単に習得可能なスキルではあります。
しかしそうは言っても、Web制作を初めて学習する方にとっては覚えることが多く、独学で相談できる相手もいない状況だと気持ちが苦しくなってしまうこともあるのではないでしょうか。
そのようなときは、一度プログラミングスクールの利用を検討してみるのも良いかもしれません。
プログラミングスクールは高額な受講料がネックになることも多いですが、中には良心的な料金でWeb制作スキルを支援してくれるスクールもあります。
ご興味のある方は、以下の記事をご覧になってみて下さい。
