Visual Studio Codeを使ってみよう | HTML / CSS入門

ここまで、

HTML
CSS
画像
リンク
フォルダ整理

などを学んできました。

しかし現在は、Windows標準のメモ帳などで編集している人もいるかもしれません。

実際のWeb制作では、

コードエディタ

という専用ソフトを使って開発することがほとんどです。

今回は、その中でも非常によく使われている VS Code を使ってみます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
├── css/
│   └── style.css
└── images/
    └── image.jpg

VSCodeとは？

VS Code は、

Visual Studio Code

というコードエディタです。

Microsoft が提供しており、多くの開発現場で使われています。

なぜメモ帳ではなくVSCodeを使うの？

メモ帳でもHTMLを書くことはできます。

しかし VS Code には、

色分け表示
入力補助
自動保存
エラー表示
ファイル管理

など、多くの便利機能があります。

特にHTML/CSS学習では、かなり学習しやすくなります。

VSCodeをインストールする

まず、以下の公式サイトを開いてください。

https://code.visualstudio.com/

Windows版をダウンロードしてインストールします。

基本的には、

次へ
次へ
インストール

でOKです。

VSCodeを起動する

インストール後、VS Code を起動してください。

最初は英語表示になっている場合があります。

今はそのままでも問題ありません。

フォルダを開く

VS Code では、

フォルダ単位

で作業することが多いです。

今回は、

sandbox/html-practice

フォルダを開きます。

GUIでフォルダを開く

VS Code の上メニューから、

ファイル
フォルダーを開く

を選択してください。

その後、

sandbox/html-practice

を選択します。

左側にファイル一覧が表示される

フォルダを開くと、左側に、

index.html
profile.html
css
images

などが表示されるはずです。

これを「エクスプローラー」と呼びます。

index.html を開いてみよう

左側の、

index.html

をクリックしてください。

コードが表示されるはずです。

色が付いて見やすくなる

VS Code では、

HTMLタグ
CSS
文字列

などが色分けされます。

これを「シンタックスハイライト」と呼びます。

保存してみよう

HTMLを書き換えたあと、

Ctrl + S

で保存できます。

自動保存も便利

VS Code には「自動保存」機能があります。

設定すると、

ファイルを書き換えたら自動保存

できます。

自動保存をONにする

上メニューから、

ファイル
自動保存

をクリックしてください。

チェックが付けばONです。

ブラウザ更新との関係

現在は、

HTMLを書き換える
保存
ブラウザ更新

という流れです。

この流れは、Web制作の基本になります。

VSCodeは今後ずっと使う

今後学ぶ、

JavaScript
PHP
Laravel
Docker
Git

などでも、VS Code を使っていきます。

つまり、

開発の土台になるツール

です。

便利機能は少しずつ覚えればOK

VS Code には非常に多くの機能があります。

ですが最初は、

ファイルを開く
編集する
保存する

だけできれば十分です。

便利機能は、必要になったタイミングで少しずつ覚えていきましょう。

次のページでは

次のページでは、

Live Server
自動リロード
保存するとブラウザが更新される仕組み

などを学んでいきます。

開発効率がかなり上がっていきます。