今回のポイント
以前の記事でHTMLファイルを作成し、VSCodeと関連付けをしました。
以前の記事については以下を参照下さい。
今回は実際にHTMLのコードを記述しながら、VSCodeを解説していきます。

VSCodeを使って、HTMLのソースを記述出来るようになりましょう。
ファイルを開く
まずは以前作った、HTMLファイル(index.html)を開きましょう。
VSCodeを起動してエクスプローラーを開きます。

フォルダーを開きます。

今回はhtmlファイルを編集していきますので、htmlファイルがあるか確認して下さい。
※もしhtmlファイルがない場合は、以前の記事を参考にしてファイルを作成して下さい。
以前の記事については以下を参照下さい。

htmlファイルがあることを確認できたら、「開く」をクリックします。

ここでHTMLを記述する準備ができました。

HTMLを記述していく
それではHTMLを記述していきましょう。
今回は簡単な記事を、VSCodeを使って記述してみましょう。
HTMLについて学びたい方は以下の記事を参考にして下さいね。
早速、以下のHTMLソースを記述してみましょう
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくの解説ページ</title>
</head>
<body>
うまく表示できました!
</body>
</html>
まずは記述するポイントへ、カーソルを移動させてクリックします。

そして次に、「<」と入力してみて下さい。

すると要素が沢山出てきたことが分かります。
続いて、「!」を入力してみて下さい。

「!DOCTYPE」と自動で表示されましたね。
ここでエンターを押して入力決定します。
次にエンターを押して改行します。

そして次に、「<ht」と入力してみましょう。
すると自動でhtmlと表示されるので、そのままエンターで決定入力しましょう。

次にスペースを押して「l」と入力しましょう。
するとlangが自動表示されます。
ここでもそのままエンターを押して決定入力します。
いかがですか?自動でlang=””まで入力されたと思います。

そして、そのまま「ja」と入力します。
便利ですよね。
langと入力すると次に入力したい箇所にカーソルがあったので、そのまま入力できたはずです。

それではカーソルを右に移動させて、「>」と入力してみましょう。
すると自動で「/html」まで入力されます。
そしてそのままエンターを押してみましょう。

いかがでしょうか。
自動でhtml要素が終わり、新たな要素を記述する行が現れます。
あとはこの作業の繰り返しです。
どんどんVSCodeを使って、HTMLを書いてみましょう。
そしてソースを書き終わったらセーブを忘れずに、、、
Windowsの場合は『Ctrl』+『S』でセーブができます。
Mac OSの場合は『command』+『S』でセーブができます。
セーブをしたら、htmlファイルを開いて出来栄えを確認してみて下さい。
前回の記事
HTMLを学ぶ。シリーズはこちら