パス（道）を極めたら迷子にならない！40代初心者がファイル指定の迷宮から脱出した感動体験記

こんにちは！40代プログラミング初心者のAIATTOです。

本日でブログ投稿継続10日目となりました！継続は力なり、少しずつでも前進していることを実感しています。

今日はHTML/CSSの基礎学習の第5章「HTMLでのファイルの指定方法を理解しよう」に取り組みました。正直、最初は「パスって何？」状態でしたが、学習を進めるうちに「なるほど、これは重要な概念だ！」と理解が深まりました。

今日学んだこと：パス（path）の基本概念

パスとは、画像やHTMLファイルが「どのフォルダにどのファイル名で保存してあるか」を示すものです。まさに「道」の意味そのものですね。

Webサイトを作る上で、画像を表示したり、他のページにリンクしたりするときに、必ずこのパスの概念が必要になります。

絶対パスは、Webサーバー上のどのフォルダにファイルが置かれているかをフルURLで指定する方法です。

html

<img src="https://teamsamurai.github.io/html-css-basic-chapter5/assets/images/logo.svg" alt="ロゴ">

これは住所で言えば「〒150-0043 東京都渋谷区道玄坂2丁目○○番地」のような完全な住所指定。どこからでも確実にたどり着けるけれど、記述が長くなるのが特徴です。

相対パスは現在開いているHTMLファイルを基準に、どのフォルダにファイルが置かれているかを指定します。

html

<img src="../assets/images/logo.svg" alt="ロゴ">

これは「ここから一つ上の階層に行って、assetsフォルダの中のimagesフォルダの中にあるlogo.svgを表示して」という意味。現在地からの道案内のようなものですね。

../が「1つ上の階層のフォルダを指す」というのは、最初は戸惑いましたが、慣れてしまえば直感的に理解できました。

今日は実際にimgタグを使って画像を表示する練習をしました。

html

<!DOCTYPE html>
<html> 
<body> 
  <img src="assets/images/logo.svg" alt="ロゴ">
</body>
</html>

src属性に画像のパスを指定するだけで、ブラウザに画像が表示されるのは感動的でした！

aタグを使ったハイパーリンクも学習しました。テキストや画像をクリックしたときに別のページに移動する機能です。

html

<a href="https://www.sejuku.net">SAMURAIのホームページに移動</a>

さらに、画像をクリックしてページ移動させる方法も習得：

html

<a href="company/company.html"> 
  <img src="assets/images/logo.svg" alt="ロゴ">
</a>

画像がリンクになるなんて、Webサイトの仕組みがだんだん見えてきました！

学習を通じて理解したのは、以下の使い分けです：

相対パスの方が記述が短く、ファイルを移動したときに変更が少ないという利点があることも納得できました。

パスの概念を理解したことで、Webサイトの構造がより明確に見えるようになりました。今まで何気なく見ていたWebサイトの画像やリンクが、すべてこのパスの仕組みで動いているのだと思うと、インターネットの仕組みの一端を理解できた気がします。

特に、相対パスで画像をクリックして別ページに移動する機能を実装できたときは、「自分でもWebサイトが作れるんだ！」という実感が湧きました。

継続10日目を迎えて、少しずつですが確実に成長していることを実感しています。

40代からのプログラミング学習は決して楽ではありませんが、毎日新しい発見があって楽しいです！

今日の名言： 「道に迷っても、パスを覚えれば必ず帰れる。40代は人生経験という最強の地図を持っている」（40代初心者、パスの概念に開眼）

学習時間： 2時間30分（パス理解と実践に没頭）

理解度： 85%（相対パスと絶対パスの使い分けをマスター）

感動度： 90%（画像をクリックしてページ移動できた瞬間にMAX！）

それでは、また明日！（明日はCSSの基礎を学んで、Webサイトに彩りを加えていきます）