フォルダとファイルを作ろう

前のLessonで学んだファイルとフォルダを使い、With Caféの制作場所を準備します。ここで作った構成を、カリキュラムの最後まで引き継ぎます。

このLessonのゴール

書類やデスクトップなど分かりやすい場所に、with-cafeというフォルダを作ります。Visual Studio Codeの「ファイル → フォルダーを開く」から、このフォルダを選択してください。

Visual Studio Code左側のExplorerの一番上にwith-cafeと表示されていることを確認します。

Visual Studio CodeのExplorerから、次のフォルダとファイルを作ります。

with-cafe/
├── index.html
├── css/
│   ├── reset.css
│   └── style.css
├── js/
│   └── main.js
└── images/

ファイル名とフォルダ名は、基本的に英小文字、数字、ハイフンを使用します。空白や日本語、大文字と小文字の混在は避けましょう。

style.css.txt のように意図しない拡張子が付いていないか確認してください。

表にあるcss/style.cssのような表記はパスです。/（スラッシュ）を区切りとして、左から順番にフォルダをたどります。

css/style.css
│   └─ cssフォルダの中に作るstyle.cssファイル
└──── with-cafeの直下に作るcssフォルダ

今回、Visual Studio Codeではwith-cafeフォルダを開いています。そのため、先頭のwith-cafe/は省略し、css/style.cssと表せます。