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