Visual Studio Codeを学ぶ。HTML記述編

Visual Studio Codeを学ぶ。HTML記述編

今回のポイント

以前の記事で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を学ぶ。シリーズはこちら

テキストエディタカテゴリの最新記事