Visual Studio Codeとは
Microsoftが開発しているコードエディタです。Windows、Macなど各OSで動作し、様々なプログラミング言語に対応しています。無料でダウンロード可能です。
https://code.visualstudio.com/
新規ファイルの作成
①新規>新しいテキストファイル を選び、新しいファイルを作成します
②「言語の選択」をクリックし、検索窓に「html」「css」「javascript」など、作成したい言語の種類を入力・選択します
HTMLの場合
上記手順で新規ファイル作成後
! を入力し、キーボードのTabキーを押すと、HTMLの基本フォーマットが自動入力されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>《補足》
▼レスポンシブ対応のためのコード
<meta name="viewport" content="width=device-width, initial-scale=1.0">▼lang = "en" を lang = "ja" にする設定については、後述の記事を参照してください。
→Emmet記法の「!」で入力される言語指定（html lang）を ja にする
Emmet記法
HTMLやCSSを省略記法で入力できる方法です。省略記法入力後、Tabキーを押すことで、HTML、CSSコードが展開します。上記で解説している、HTMLの基本フォーマットを入力する
!もその一つです。
例えば、HTMLの場合は、タグ名 + Tabキーで入力できます。
h1↓
<h1></h1>次のような書き方もできます。
ul>li*3↓
<ul>
<li></li>
<li></li>
<li></li>
</ul>>を入れると、タグを入れ子にできます。*と数字を書くことで繰り返しの指示になります。
Emmet記法の「!」で入力される言語指定（html lang）を ja にする
デフォルトでは、HTMLの言語指定は <html lang="en"> であり、英語が指定されています。これを日本語 <html lang="ja">にするには、設定変更が必要です。
基本設定＞設定＞拡張機能＞Emmet
Variables（Emmetのスニペットで使用される変数）に下記の通り情報を追加します。
- 項目：lang
- 値：ja
フォーマット（整形）
HTMLなどのコードはインデント（字下げ）をすることで見やすくなりますが、編集の過程でインデントが乱れてしまうことがあります。その場合は、次のショートカットを入力し、自動的に整形しなおします。
shift + option + Fフォルダを開く
Visual Studio Code上でフォルダを読み込むと、フォルダ内に含まれているファイルを同時に編集しやすくなります。
①Visual Studio Code上にフォルダをドラッグします
②フォルダ内のファイルがサイドに表示されます。
Visual Studio Codeを日本語環境にする
初回起動時にポップアップで「日本語環境にする」案内が表示されますが、ポップアップから設定しなかったときには、下記の手順で日本語環境にすることができます。
①サイドバーの Extensions アイコンをクリックします
②検索窓に Japanese Language Pack と入力します
③Japanese Language Pack for Visual Studio Code を選び、Install をクリックします
④ソフトウェアの再起動後（一旦終了してもう一度起動）有効になります。
HTMLファイルをリアルタイムにプレビューする
コードを編集しているとブラウザでの実際の表示を頻繁に確認することになります。拡張機能のLive serverを使うと、ローカル環境でウェブサイトを簡単にプレビューできるようになります。
①サイドバーの Extensions アイコンをクリックします
②検索窓に Live Server と入力します
③Live Serverを選び、インストールをクリックします
Live Severを使うと、コンピュータ内でローカルウェブサーバーを立ち上げ、ウェブページをブラウザで表示できるようになります。
編集中のHTMLファイルの右下に表示される「Go Live」をクリックすると、ブラウザが立ち上がります。
ブラウザでは http://127.0.0.1:5500/ のようなURLで表示されます。この画面では、VS Codeでの編集結果が即時に反映されるようになっています。