[Sponsor]「プログラミングに興味はあるけど難しそう」
という方のための無料講座を渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

1-2. Visual Studio Code のインストールと初期設定

HTMLとCSSを記述するための準備として、エディタ(Visual Studio Code)のインストール方法を解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/04/10最終更新日:2019/04/10

1.開発に必要な「テキストエディタ」について

HTMLとCSSはテキストエディタで簡単に作成することができます。エディタはどんなものを使っても作成できますが、このカリキュラムではVisual Studio Code を使って開発を進めていきます。Visual Studio Code は無料で使うことができ、拡張機能も充実しているのでおすすめです。エディタは他の自分が気に入ったものを使っても問題ないです。ただし、文字化けなどの心配があるので、できるだけ文字コードutf-8を扱えるエディタを使用しましょう。

2.Visual Studio Codeのインストール方法

Visual Studio Code のインストール方法を説明します。

Visual Studio Code はMacOS版、Windows版、Linux版があるので環境に合わせてダウンロードをおこなってください。

筆者の環境はMacOS版なので、以下の説明、画像はMacOS版です。エディタの基本的な動作は変わりません。

Visual Studio Code インストール方法

まず、ブラウザからVisual Studio Code のサイト(https://code.visualstudio.com/)へアクセスしましょう。

サイトにある「Download」ボタンをクリックしてインストールファイルをダウンロードしてください。

Visual Studio Code のウェブサイト

ダウンロード後、インストールファイルをクリックしてインストールしましょう。

Visual Studio Code 起動方法

インストール後はファイルを解凍しアイコンをクリックして起動しましょう。

Visual Studio Code インストールファイル

クリックすると起動して、スタート画面が表示されます。

Visual Studio Code 起動後画面

Visual Studio Code ファイル作成方法

メニューの「File」>「New File」から新しいファイルが作成できます。 「File」>「Save」を選択すると、新しいファイルを保存できます。

Visual Studio Code ファイルメニュー

保存するときに、ファイル名のあとに「.html」をつけるとHTMLファイルに、「.css」をつけるとCSSファイルを作成することができます。

このエディタを使って、コーディングの章で開発をおこなっていきましょう。

3.Visual Studio Codeの初期設定

「Visual Studio Codeのインストール方法」では簡単なファイルの作成方法を解説しました。
今度は簡単な初期設定などをおこなっていきましょう。

Visual Studio Codeの画面構成

まずは、Visual Studio Codeの簡単な画面構成を説明します。

Visual Studio Code 全体画面

開いて右側の大きな画面領域はエディタになります。この箇所でHTMLやCSSを入力する作業をおこなっていきます。

Visual Studio Code エディタ

開いて一番左側はアクティビティバーになります。アクティビティバーで「EXPLORER」や「SEARCH」など他の機能に切り替えることができます。

Visual Studio Code アクティビティバー

アクティビティバーの隣がサイドバーになります。サイドバーには現在開いているファイル名が表示されます。この箇所をクリックすることで、エディタに表示するファイルの切り替えをおこなうことができます。ワークスペースの追加方法は別途説明します。

Visual Studio Code サイドバー

ワークスペースの追加

作業用のファイルを参照しやすいようにワークスペースの追加をおこないましょう。

まず自分の作業用に新規フォルダでフォルダを作成しましょう。仮にフォルダの名前を「html-lesson」とします。

サイドバーのEXPLORERから「Open Folder」をクリックしてください。

Visual Studio Code サイドバーから開く

クリック後、先程作成した「html-lesson」フォルダを選択して「開く」をクリックしてください。これでワークスペースが追加できました。

Visual Code  Studio ワークスペース追加

新規ファイルを作成すると「html-lesson」フォルダ内に保存することができます。また「html-lesson」フォルダ以下のファイルが一覧で表示されるので、作成したファイルを参照しやすくなります。今後はこのフォルダ以下で作業をおこなっていきましょう。

Visual Studio Code 新規ファイル追加後

基本的な設定

Visual Studio Code エディタの設定をおこないましょう。
設定は「⌘ + ,」で表示できます。メニューバーからは「Code > Preferences > Settings」で表示できます。

Visual Studio Code 設定画面

この設定画面では「User Settings」と「Workspace Settings」で設定を変更することができます。今回は「User Settings」を設定しましょう。「Workspace Settings」は複数人で開発するときなどに設定します。今回は特に設定を変更しません。

エディタはデフォルトは折返しがされません。多く文字を入力すると表示されなくなるので、ウィンドウで折り返すように設定しましょう。「Commonly Used > Editor: Word Wrap」の「off」を「on」に変更すると、折返しされるようになります。

Visual Studio Code Word Wrap

エディタは空白スペースがデフォルトでは表示されません。空白文字がはいってることに気づかずにバグをおこす可能性があるので、表示するように設定しましょう。「Text Editor > Render Whitespace」の「none」を「all」に変更すると、空白スペースを「・」に置き換えてくれます

Visual Studio Code Render Whitespace

空白のみの行や行の末尾に空白は不要なスペースなので、自動で削除されるように設定しましょう。「Text Editor > Files > Trim Trailing Whitespace」のチェック欄にチェックをいれると、不要なスペースが保存時に削除されるようになります。

Visual Studio Code Trim Trailing Whitespace

他にも、文字サイズを見やすいように変更したりできるので、色々設定を変更してみましょう。

基本的な拡張機能

インストールすると基本的にはすぐにエディタとして使用することができます。しかし、更に便利に開発したい場合は拡張機能(EXTENSIONS)をインストールしましょう。

拡張機能はサイドバーのタブのEXTENSIONSをクリックすると、拡張機能を確認することができます。

Visual Studio Code EXTENSIONS

検索すると、使える拡張機能が表示されます、現在インストールしてるもの、おすすめ、削除のものも確認できます。

筆者のおすすめは「Trailing Spaces」という拡張機能です。不要な空白が残ってるとバグが起こりやすいのですが、この機能をいれると不要な空白をハイライトしてくれるのでオススメです。

EXTENSIONS Trailing Spaces

様々な拡張機能があるので、調べてインストールして色々試してみましょう。

日本語化の対応方法

Visual Studio Codeは初期設定では言語は英語で設定されています。しかし、拡張機能をインストールすることで言語を日本語に変更することができます。英語でエディタを使うのが慣れない場合は日本語に変更しましょう。

まずは、タブから拡張機能をクリックしましょう。拡張機能の検索窓に「japanese language pack」と文字を入力してください。

Visual Studio Code Japanese Language Pack 検索画面

検索結果に「Japanese Language Pack for Visual Studio Code」が表示されます。選択して、拡張機能をインストールしましょう。

Visual Studio Code Japanese Language Pack インストール画面

インストール後は、「⌘ + Shift + p」をクリックしてコマンドパレットを表示させましょう。コマンドパレットに「config」と文字を入力してください。検索結果に「Configure Display Langage」が表示されるので、選択してください。

Visual Studio Code Japanese Language Pack Config

その後、「ja」が表示されるので、選択してください。

Visual Studio Code Japanese Language Pack 日本語選択画面

設定するとメニューバーが日本語に変わります

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者