ファイル・フォルダ・拡張子・パスの基本 | 仕組み解説

ファイルとパスの基本とは、コードや画像や設定ファイルが「どこにあり、どう参照されるか」を理解することです。

一言でいうと

プログラミングでは、ファイルの中身だけでなく、ファイルの置き場所と名前が動作に影響します。

Web制作では、HTML、CSS、JavaScript、画像を別ファイルとして管理します。

my-site/
  index.html
  styles.css
  main.js
  images/
    logo.png

このように、何をどこに置くかを整理すると、後から修正しやすくなります。

拡張子は、ファイル名の末尾に付く種類の目印です。

拡張子が間違っていると、エディタやブラウザが正しく認識できないことがあります。

パスは、ファイルの場所を表す文字列です。

初心者が最初に使うのは相対パスです。

index.html と同じフォルダに styles.css と main.js がある場合は、次のように書きます。

<link rel="stylesheet" href="./styles.css">
<script src="./main.js"></script>

images フォルダの中の画像を読む場合は、次のように書きます。

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

注意: ファイル名の大文字・小文字は環境によって区別されます。Logo.png と logo.png は同じとは限りません。

ファイル、フォルダ、拡張子、パスは、すべてのプログラミング学習の土台です。コードが正しくても、ファイル名や置き場所が違うだけで動きません。エラーが出た時は、まず場所と名前を確認します。