htmlまで

Author: chelproc

docs/day01/01.md

@@ -0,0 +1,9 @@
+---
+title: Visual Studio Codeのインストール
+---
+
+Visual Studio Code (以下VSCode)は、Microsoft社のオープンソースソフトウェアです。多くのエディタが登場する中、Visual Studio Codeは、その軽快な動作と機能性、拡張性の高さにより多くの開発者からの支持を得るに至りました。
+
+![Visual Studio Codeのインストール](01/install-vscode.png)
+
+VSCodeをインストールしてください。以上のような画面が表示されれば成功です。

docs/day01/01/install-vscode.png

@@ -0,0 +1,29 @@
+---
+title: HTMLファイルの作成
+---
+
+VSCodeは、ディレクトリ（フォルダ）単位でファイルを管理します。これから大量に増えていくだろうプログラムファイルを保存しておくためのディレクトリを、適当な場所に作成しましょう。それが終わったら、そのディレクトリの中に今から作るプロジェクトのためのディレクトリを作成します。名前は何でもいいですが、例えば「helloworld」などにしてみましょう。
+
+VSCodeでディレクトリを開きます。`Ctrl (Cmd) + Shift + P`を押して`File: Open Folder...`を選択し、先ほど作成したディレクトリを選択しましょう。
+
+![ディレクトリを開く](02/open-folder.png)
+
+なお、この`Ctrl (Cmd) + Shift + P`は、VSCodeを利用する上で非常に重要な操作です。これにより**コマンド パレット**が表示され、現在実行可能な操作が全て一覧表示されます。
+
+:::tip 絞り込み
+結構雑な絞り込みも有効です。例えば、「opfol」のように入力しても、「File: Open Folder...」が見つかります。
+:::
+
+図のように、左側のパネルに開いているディレクトリの名前が表示されれば成功です。
+
+![エクスプローラー](02/explorer.png)
+
+新しいファイルを作成して`index.html`としてください。
+
+![index.htmlの作成](02/create-index-html.png)
+
+ファイルの中身は適当で構いません。
+
+```html title="index.html"
+hello world!
+```

docs/day01/02.md

@@ -0,0 +1,23 @@
+---
+title: ブラウザでHTMLファイルを表示する
+---
+
+VSCodeは、**拡張機能**（Extensions）を通して自分好みの機能を追加することができます。`Live Server`拡張機能を使用すると、作成したHTMLファイルを簡単にブラウザで表示できます。開発用にはChromeが便利なので、インストールされていない場合はインストールしておきましょう。
+
+![Live Serverのインストール](03/install-live-server.png)
+
+Live Server拡張機能をインストールすると、コマンドパレットから`Live Server: Open with Live Server`が使用できるようになります。これを実行しましょう。
+
+![Open with Live Server](03/open-with-live-server.png)
+
+ブラウザが起動し、先ほど作成したWebページが表示されました。標準状態では、ブラウザのアドレスバーは
+
+```
+http://127.0.0.1:5500/index.html
+```
+
+を示しているはずです。
+
+![ブラウザプレビュー](03/browser-preview.png)
+
+おめでとうございます！はじめてのウェブサイトが作成できました！