制作環境を準備しよう

Webサイト制作を始めるために、コードを書くエディタと、完成したページを確認するブラウザを準備します。

このLessonのゴール

• エディタ、ブラウザ、ファイル管理ツールの役割を説明できる
• Visual Studio Codeとブラウザを起動できる
• デベロッパーツールを開き、ElementsとConsoleの場所を確認できる

用意するもの

ツール	このカリキュラムでの役割
Visual Studio Code	HTML、CSS、JavaScriptを書く
Google Chrome または Firefox	制作したページを表示する
Finder または Explorer	フォルダとファイルを管理する

Visual Studio Codeは公式サイトからインストールできます。ブラウザは普段使っているものでも構いませんが、カリキュラムではChromeを例に説明します。

Visual Studio Codeを起動する

インストール後、Visual Studio Codeを起動してください。メニューや説明を日本語にしたい場合は、Extensionsから「Japanese Language Pack」を追加できます。

拡張機能は必要になってから追加します。最初から多くの拡張機能を入れる必要はありません。

デベロッパーツールを開く

ブラウザには、HTMLの構造やCSSの適用状態、JavaScriptのエラーを確認するデベロッパーツールがあります。

• macOS: Command + Option + I
• Windows: F12 または Ctrl + Shift + I

ElementsパネルではHTMLとCSS、ConsoleパネルではJavaScriptの実行結果やエラーを確認できます。

実際に試してみよう

Visual Studio Codeとブラウザを起動し、ブラウザのデベロッパーツールを開いてElementsとConsoleの位置を確認してください。