[コーディングの基礎] フォルダ・ファイルの準備

最終的には以下のようなファイル構成を作り上げましょう。

では、一つ一つ一緒にやっていきましょう。手順は以下です。

1. デスクトップにフォルダを作り、名前を「html」にする。
2. htmlフォルダの中にさらに「css」「js」「img」というフォルダを作る。
3. テキストエディタを開き、新規ファイルを作成。
   「index.html」という名前をつけてhtmlフォルダの直下に保存する。
4. テキストエディタで新規ファイルを作り、「main.css」という名前をつけて、
   htmlの中のcssフォルダの中に保存する。

実際に作業を行なったスクリーンショットを使って解説します。

1・2 フォルダの作成

まずはじめにフォルダから作っていきましょう。
これは普通にフォルダの中にフォルダを作ればいいだけの話です。

デスクトップで右クリックメニューから、新規作成 > フォルダー と進むか、
もしくはショートカットキーCtrl + Shift + Nで新規フォルダを作り、「html」と名前をつけてください。
作成されたhtmlフォルダを開き、フォルダの中に「css」「js」「img」の3つのフォルダを再び作成して終わりです。

3・4 ファイルの作成

次に、3の「index.htmlの作成」の説明をします。
まずテキストエディタ「Visual Studio Code」を起動してください。

Dreamweaverでも構いませんが、慣れが必要になるのでコーディングのテキストエディタは統一したほうがいいと思います。

起動すると「ようこそ」の画面が開きます。

上部メニュー「ファイル > 新しいテキストファイル」の順にクリック、もしくはショートカットキーCtrl + Nで新しいテキストファイルを作る。

するとテキストファイル「Untitle-XX」ができます。

そのまま上部メニュー「ファイル > 保存」の順にクリック、もしくはショートカットキーCtrl + Sでテキストファイルを保存します。

デスクトップに作った「html」フォルダの中に保存するため、左の保存場所の中の「デスクトップ」をクリックします。

「html」フォルダを開き、ファイル名を「index」に、ファイルの形式を「HTML」にして「保存」ボタンをクリックします。

「index.html」ができた。
次に上部メニュー「ファイル > 名前を付けて保存」の順にクリック、もしくはショートカットキーCtrl + Shift + Sで別のファイル(main.css)を作ります。
手順は、最初に作った「html > css」フォルダの中に、ファイル名を「main」、ファイルの形式を「CSS」にして「保存」ボタンをクリックしてください。

これで「index(.html)」「main(.css)」の2件のファイルができました。

ファイル・フォルダ構成の確認

さて再度確認しましょう。
問題なくできていれば、以下の画像のようなフォルダ構成になっているはずです。

フォルダ・ファイル構成がもし違っていたら、もう一度よく確認しながら作ってください。