ファイルとフォルダの違いを知ろう

Webサイトを作る前に、ファイルとフォルダの違いを確認します。普段パソコンをあまり使わない場合でも、ここから一緒に進めるので問題ありません。

このLessonでは、まだコードを書きません。

このLessonのゴール

• ファイルとフォルダの役割の違いを説明できる
• 拡張子とフォルダの階層を見分けられる
• スラッシュで区切られたパスを左から順番に読める

ファイルとは

ファイルは、文章、画像、コードなどの内容を保存するものです。

例えば、次のものはすべてファイルです。

ファイル名	保存されているもの
index.html	Webページの内容と構造
style.css	色や余白などの見た目
main.js	クリックしたときの動き
shop.jpg	店舗の写真

紙の書類に例えると、1枚ずつの書類がファイルです。

フォルダとは

フォルダは、複数のファイルや別のフォルダをまとめて整理する入れ物です。フォルダ自体にHTMLや画像の内容を書くわけではありません。

紙の書類に例えると、書類を分類して入れるケースがフォルダです。

with-cafe/
├── index.html
└── images/
    └── shop.jpg

この例では、with-cafeフォルダの中に、index.htmlファイルとimagesフォルダがあります。imagesフォルダの中にはshop.jpgファイルがあります。

ファイルとフォルダの見分け方

Visual Studio CodeやFinder、Explorerではアイコンも異なります。名前の最後に.htmlや.jpgが付いているものは、通常はファイルです。

種類	例	見分けるポイント
ファイル	index.html	内容を保存し、名前の末尾に拡張子があることが多い
フォルダ	images	ファイルやフォルダを中に入れられる

フォルダ名に.が使われる場合もあるため、名前だけで判断できないときはアイコンを確認します。

拡張子とは

ファイル名の最後にある.html、.css、.js、.jpgなどを拡張子と呼びます。拡張子は、そのファイルに何が保存されているかを表します。

style.css
│     └─ 拡張子
└────── ファイル名