エディタ

第一回の授業で VSCode というエディタを入れてもらいましたが、ここではその使い方を説明していきます

VSCode の使い方

VSCode を開くと以下のような画面になっていると思います

vscode-open-now

この状態から実際にファイルを編集する手順を説明していきます

ファイルを作成して編集する

左側のファイルアイコンをクリックするとサイドバーが開きます

vscode-open-sidebar

サイドバーにある「Open Folder」という青いボタンをクリックして、作業したいフォルダ(ディレクトリ)を開きます
画像では code_box/example/というフォルダを開いていますが、別途新しくフォルダを作っていただいて大丈夫です

vscode-open-folder

次に、サイドバーのフォルダ名にマウスを持っていき、アイコンをクリックしてファイルを新規作成します
ここでは、index.html というファイルを作ってみましょう

vscode-make-file

次に以下の内容を index.html 内に記述します
(コピペしてもらって大丈夫です)

なお、HTML については次回以降の授業で詳しく説明するので、今回は説明を省略します

<!DOCTYPE html>
<html>
  <!-- <head> 内ではWebページの表示名、ロゴ、CSSの読み込みなど、設定の様なことを行う -->
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>

  <!-- <body> 内ではWebページの構造、コンテンツを表記する -->
  <body>
    <h1>this is a lv.1 heading</h1>
  </body>
</html>