環境設定
VSCode > コース別設定

HTML & CSS

目次
  • 解説
  • 1. 前提
  • 2. Emmetの言語設定を「ja」にする
  • 3. 拡張機能：Live Serverのインストール
進捗を変更する


このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！


利用ＯＳ

解説

1. 前提

このページの手順は、下表の各環境設定・手順を完了していることが前提となります。

前提環境設定

(1)環境設定：VSCode（インストール）
(2)環境設定：VSCode（基本設定）

2. Emmetの言語設定を「ja」にする

Emmetとは

Emmet とは、VSCode に標準で備わっているコードを補完してくれる機能のことです。プログラムにはお決まりで入力するコードが多くありますが、Emmet の補完機能を利用することで、コーディングを効率化することができます。

Emmetの利用例

VSCode でHTMLファイルを開き、「html:5」と入力してからEnterキーを押すと、自動でHTMLのひな型を生成してくれます。

例）HTMLのひな型を生成する

html:5

↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Emmet の初期設定でHTMLのひな型を生成すると、HTMLの言語設定が英語（English）を表す「<html lang="en">」として生成されます。（掲載コードの2行目）

次の手順では、コード補完で生成されるHTMLのひな型の言語設定を、日本語（Japanese）を表す「<html lang="ja">」とする設定を解説します。

winmac

Emmetの言語設定を「ja」にする手順

(1)VSCode を起動し、サイドメニューの「管理」（歯車のアイコン）をクリックして、「設定」を選択してください。
(2)「設定」画面上部の検索バーに、「emmet.variables」と入力してください。設定の候補が表示されます。
(3)「Emmet: Variables」の「項目の追加」ボタンをクリックし、項目「lang」の値を、「ja」と入力して「OK」ボタンをクリックしてください。
(4)設定が完了したら、画面上部のタブから「設定」画面を閉じてください。

Emmetの言語設定を「ja」にする手順

(1)VSCode を起動し、サイドメニューの「管理」（歯車のアイコン）をクリックして、「設定」を選択してください。
(2)「設定」画面上部の検索バーに、「emmet.variables」と入力してください。設定の候補が表示されます。
(3)「Emmet: Variables」の「項目の追加」ボタンをクリックし、項目「lang」の値を、「ja」と入力して「OK」ボタンをクリックしてください。
(4)設定が完了したら、画面上部のタブから「設定」画面を閉じてください。

3. 拡張機能：Live Serverのインストール

VSCode の拡張機能「Live Server」をインストールする手順を解説します。

Live Server は、PC上で編集したHTMLファイルやCSSファイルを、手軽にブラウザで表示させることができる拡張機能です。

winmac

Live Server のインストール手順

(1)VSCode を起動し、サイドメニューの「拡張機能」をクリックしてください。
(2)検索バーに「live server」と入力し、検索候補に出てきた「Live Server」を選択してください。
(3)画面中央の「インストール」ボタンをクリックし、拡張機能をインストールしてください。
(4)インストールが完了したら、画面上部のタブから「拡張機能」画面を閉じて、画面左の「拡張機能」ボタンをクリックしてサイドメニューを閉じてください。

Live Server のインストール手順

(1)VSCode を起動し、サイドメニューの「拡張機能」をクリックしてください。
(2)検索バーに「live server」と入力し、検索候補に出てきた「Live Server」を選択してください。
(3)画面中央の「インストール」ボタンをクリックし、拡張機能をインストールしてください。
(4)インストールが完了したら、画面上部のタブから「拡張機能」画面を閉じて、画面左の「拡張機能」ボタンをクリックしてサイドメニューを閉じてください。

以上で VSCode に 拡張機能「Live Server」をインストールすることができました。

※Live Server の使用方法は、『HTML & CSS』コースの『Live Serverの起動・停止手順』で解説します。