![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
今回はWebページを作るためのフォルダーとHTMLファイルを作成し、画面に表示するところまでをやっていこうと思います
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
きなこ
ようやく一歩が踏み出せるって感じだね!
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
チャッピー
やることが多そうだけど頑張ろう!
1.フォルダを作る
Macの場合
![Macでのフォルダの作り方](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_make_folder_mac.jpg)
Windowsの場合
![Windowsでのフォルダの作り方](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_make_folder_win.jpg)
フォルダーはお仕事などでも作る事があると思うので問題無いと思います。
2.テキストエディターを起動しフォルダを読み込む
フォルダーの読み込み方
- STEP1VS Codeを起動する起動するとこのような画面が出てきます。
- STEP2左のサイドバーの一番上のマークをクリック
- STEP3ウインドウが出てきたら「フォルダーを開く」をクリック
- STEP4フォルダーを選択して開く
↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できます
Windowsはコチラ
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
上の画面になれば開くことができています
ちなみにフォルダーをエディターにドラッグしても開く事ができます
![フォルダーの読み込み方](https://kbyt-programming.com/wp-content/uploads/2020/10/6b41894a6447260da01b0887fc9b0d7c.gif)
またVS Codeが日本語になってない場合は以下の順で日本語化できます。
![Vs Codeでの日本語化の方法](https://kbyt-programming.com/wp-content/uploads/2021/05/08600a84f67471e83f586f8a6b426adc.jpg)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
作業が終了したらリスタートするか聞かれるので「Restart Now」をクリックしてVS Codeを再起動すればおkです
3.HTMLファイルの作成
HTMLファイルの作り方
- STEP1フォルダーが開けたら「新しいファイル」を選択
- STEP2ファイル名を入力する
目次となるページには”index.html”と付けます
- STEP3enterを押せば完成
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
これでHTMLファイルが完成しました
ちなみに〇〇.htmlの”.html”の部分を拡張子と呼ぶので合わせて覚えておきましょう
4.ブラウザに表示する
せっかくなので文字を入力してみましょう。
![ブラウザでの表示の仕方_1](https://kbyt-programming.com/wp-content/uploads/2021/05/2b6eb004d237b557d924600831d55eed.jpg)
“HELLO WORLD”と入力することが多いのでそこは慣例にならって入力…。
![ブラウザでの表示の仕方_2](https://kbyt-programming.com/wp-content/uploads/2021/05/1d0f31fe89fb28e02e6fb3935d86b8a5.jpg)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
“VS Code”には設定でオートセーブの切り替えができますが設定されていない場合は“⌘+S”で保存をします。
保存をしたらブラウザを開いて作成したHTMLファイルをドラッグします。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こばゆた
今までの手順が間違ってなければ問題なく表示できていると思います
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
チャッピー
おお!自分で書いた文章がパソコンに表示された!
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
きなこ
なんかうれしいね!
5.まとめ
フォルダーとHTMLファイルの作成まとめ
1.フォルダーを作成
- デスクトップで右クリック
- 「新規フォルダ」を選択
- 名前をつける
2.エディターを起動してフォルダーを読み込む
- VS Codeを起動
- 左のサイドバーの一番上のマークをクリック
- 「フォルダを開く」を選択
- フォルダのある場所から選択して開く
3.HTMLファイルを作る
- 「新しいファイル」を選択
- ファイル名をつける(最初のページは”index.html”と付ける。また〇〇.htmlの”.html”の部分を拡張子と呼ぶ)+”enter”
ブラウザに表示するにはブラウザを開いてドラッグする
コメント