Live Serverの重要性
・Live Serverを整えることは時間と労力を節約する第一歩です！
「Live Serverは、プログラミングを始めるときの効率アップツールです。これを最初に整えておくことで、無駄な作業を減らし、書いたコードの結果をすぐに確認できる環境を作れます。プログラミングをスムーズに、そして楽しく学ぶための第一歩として、Live Serverを導入するのがとても大切なんです！
フォルダを作成
はじめにフォルダを作成します。なぜなら、Live Serverはファイル単体では起動しない事があります。なので最初にフォルダを作ってその中にファイルを作ります。
フォルダとファイルの違い←が分からない方はこちらを参照してください。
1 私はmac bookを使っていますので Finder を開きます
2 ファイルを選択
3 新規フォルダを選択
4 新規フォルダが作成されました
5 名前を分かりやすい名前（好きな名前）に変えます。私は【 code練習 】にしました
6 Finder を閉じます
htmlファイルを作る
1 visual studio code を起動させます
2 ファイル メニューで【新しいファイル】を選択
3 拡張子の 【 .html 】 を必ず最後に入れて、名前を入力します。私は 「 aaa.html 」と入力しました。
リタンキーを押します。
4 このように、ファイル作成をするための画面が出てきます↓↓
5 ここで先ほど作成したフォルダ（code練習）を選択します。この作業をすることで、今作成しているファイルをフォルダの中に入れることができます。
6 ファイルの作成を選択
7 左側のエクスプローラーの所に先ほど作成したファイル（aaa.html) が表示されています。ファイルを選択し、右クリックします
8 この中に Open with Live Server という文字がありません。この文字が無いと拡張機能である、Live Serverは起動しません。これは、ファイル単体で開いている場合に起こります。なので、aaa.html ファイルの入ったフォルダを開く必要があります。ここでは、まだフォルダーを開いていません。
9 一旦 aaa.html の横にある × をクリックして閉じます。
10 閉じました↓↓
11 フォルダを開くを選択します
12 はじめに作成したフォルダ（code練習）を選択します
13 右下の開くをクリック
14 フォルダのが開かれた状態です。aaa.html ファイルを選択して、右クリックすると
15 Open with Live Server が表示されたら準備OKです。ここでは Open with Live Server を選択せずに
16 空いている所をクリックして右クリックメニューを消します。
17 右クリックメニューを消して元に戻した状態↓↓
18 １の行に ht と入力します。hだけだと違う表示（h1)がされるので ht と入力してください
19 2行目の html:5 を選択
20 このような画面になります↓↓
21 <body>
動作確認
</body>
このように、<body>と</body> の間に、動作確認と記入します↓↓
22 ここの白い◯は、変更を加えたら現れるので、⌘（コマンド）を押しながら S を押すと
6 白い◯が × になり保存されます（×になったら保存された状態です）
動作確認の方法
1 動作確認をしてみましょう！aaa.html を選択し、右クリックでメニューを表示させます
2 Open with Live Server を選択します
3 書いたコードが表示されます。
4 パソコン画面に codeとLive server の画面を半分ずつにして並べます。こうする事で、保存した時点でどのように表示されるかの確認が一目でわかるので、とても便利です。
5 動作確認の所に しました と付け加えましょう!
6 ⌘（コマンド）を押しながらSを押して保存します
7 白い◯が × に変わると同時に、右側の文字も動作確認→動作確認しました と表示されます！
Live Serverで広がる学びの世界
Live Serverがちゃんと動くことを確認できれば、プログラミングの準備は万全です！これから始まる学びの第一歩を、自信を持って楽しんでください！
コメント