バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#02  コーディングに必要なものを揃えよう

web兄さん

この次の講座ではいよいよ「HTML」と「CSS」の書き方について学習していきますが、その前にコーディングに必要な環境を揃えていきましょう。

コーディングに必要な2つのアイテム
コーディングに必要な2つのアイテム

コーディングをするにあたり必要なものは

  1. テキストエディタ
  2. WEBブラウザ

の2つです。

コーディングに必要なアイテム|テキストエディタとWEBブラウザ
コーディングに必要なアイテム|テキストエディタとWEBブラウザ

実際の写真で見るとわかりやすいのですが、テキストエディタとはコードを書いていくノートのようなものです。そして、テキストエディタで書いたコードをWEBブラウザで表示をします。

この「❶テキストエディタでHTMLやCSSのコードを書いて」→「❷WEBブラウザで表示する」という流れがコーディングの流れになります。

本講座の2つの目的

  1. コーディングする上で欠かせない「Google Chrome」というWEBブラウザのダウンロード
  2. 日本でシェアの高い「Visual Studio Code」というテキストエディタダウンロード

今回の講座ではコードを書くための環境を完璧にすることを目的にしていきます!

Google Chromeのダウンロード

前回の講座で説明した通り、WEBブラウザはHTMLやCSSといったコンピューター言語を変換してくれるツールで、WEBサイトを表示する上で欠かせないものでしたよね。

WEBブラウザは以下のような種類があり、みなさんいずれかのブラウザを利用しているのではないでしょうか?

Google ChromeFireFoxSafariInternet ExplorerMicrosoft Edge
アイコン
読みグーグルクロームファイヤー
フォックス
サファリインターネット
エクスプローラー
マイクロソフト
エッジ
開発元GoogleMozillaAppleMicrosoftMicrosoft
初期設定
されている端末
Android端末/ChromebookなしMac/iPhoneなどApple製品Windows搭載端末Windows搭載端末

今回はこの中から、WEB制作者の必須ブラウザである「Google Chrome(読み:グーグルクローム)」をみなさんのパソコンにダウンロードしてもらいます。

すでに「」のアイコンがPCにある人は、Chromeが入っている証拠なので、ダウンロードは不要です。

まだの人は次のステップでダウンロードをしていきましょう。

Windows・MacどちらでもOK

Google ChromeはどちらのPCにも対応しているので安心してダウンロードに進んでください。

Windowsでの手順は若干省いてありますが、ダウンロード方法も非常に簡単なので、3分程度で設定完了までいくことができます。

手順01

Google Chromeの公式ページへ

https://www.google.co.jp/chrome/

Chromeの公式サイトを開き、「Chromeをダウンロード」をクリックします。

自動でダウンロードが開始されます。

手順02

ページが切り替わる

MacとWindowsそれぞれインストール後の案内が表示される

ダウンロードが開始されるとページが切り替わります。

ページをスクロールすると上記のようにダウンロード後の案内がでるのでこれに沿って行動します。

Chromeをすぐに開けるようにする

いまの状態だとWindowsもMacもダウンロードしたアプリ一覧からいちいちGoogle Chromeを開かなければいけません。すぐに何かを検索したい時にこれでは面倒ですよね。ということでWindowsとMacでそれぞれ、すぐにChromeを開けるように設定をしていきましょう。

Windowsの場合

Windowsの場合
  1. Google Chromeを開きます。
  2. 下のバーに現在開いているChromeのアイコンがあるので右クリック
  3. 「タスクバーにピン留めする」をクリック

windowsでは下のバーを「タスクバー」と呼びます。このタスクバーにアプリをピン留めすることですぐに開けるショートカットを作成できます。

Macの場合

Macの場合
  1. 「Applications(アプリケーション)フォルダ」を開きます
  2. 「Chrome.app」を下のアイコンが並んでいる部分に追加

アイコンが並んでいる部分は「Dock」といいます。MacではこのDockにアプリを追加することでショートカットを作成できます。

Chromeをデフォルトブラウザに設定する

今回Chromeを初めてダウンロードした方の場合、自動で以前のブラウザが開いてしまうことがあります。デフォルト(最初から)でGoogle Chromeを開く設定をしていきましょう。

手順01

設定メニューを開く

設定を開く
  1. Google Chromeを開く
  2. ブラウザの右上にある「3つの点のマーク」をクリック
  3. 開いたパネルの「設定」をクリック

手順02

規定のブラウザを変更

設定画面が開き下にスクロールすると「既定のブラウザ」という項目があるのでクリックします。

「デフォルトに設定」をクリックすると「変更するかの確認画面」が出るのでOKとすれば完了です。

Visual Studio Codeをダウンロードしよう

VScodeのインストール

Macの場合

手順01

Visual Studio Codeの公式ページへ

今すぐダウンロードをクリック

Visual Studio Code

Visual Studio Codeの公式サイトを開き、「今すぐダウンロード」をクリックします。

手順02

「Mac」をクリックし、ダウンロードを開始

「Mac」をクリックするとページが移動します。

ページが移動すると自動でアプリのダウンロードが始まります。

手順03

ダウンロードしたファイルを開く

Finderをクリックし、ダウンロードフォルダの中に入っているVSCode-darwin-universal.zipをクリックします。

VSCode-darwin-universal.zipをクリックするとダウンロードフォルダ内に「Visual Studio Code.app」が開きます。

web兄さん
(何かをダウンロードするとダウンロードフォルダに入ります。そのため、フォルダの中身がパンパンになってしまう時があるので必要ないフォルダは積極的に削除していきましょう

手順04

Visual Studio Code.appをアプリケーションフォルダに移動し、Dockに追加

Visual Studio Code.appをアプリケーションフォルダに移動。

アプリケーションフォルダの中からVisual Studio Code.appを選択し、Dockにドラッグアンドドロップします。

Dockに追加する事ですぐにVisual Studio Codeを開くことができるようになります。

これにてVisual Studio Codeのダウンロードは完了です。

Windowsの場合

手順01

Visual Studio Codeの公式ページへ

今すぐダウンロードをクリック

Visual Studio Code

Visual Studio Codeの公式サイトを開き、「今すぐダウンロード」をクリックします。

手順02

「Windows」をクリックし、ダウンロードを開始

「Windows」をクリックするとページが移動します。

ページが移動すると自動でアプリのダウンロードが始まります。

手順03

Visual Studio Codeインストーラを起動

Windowsアイコンをクリックし、ドキュメントをクリックするとダウンロードフォルダがあります。

ダウンロードフォルダ内のVSCodeUserSetup-x64-1.64.2をクリックし、インストーラを起動します。

web兄さん
「VSCodeUserSetup-x64-1.64.2」をクリックすると自動でインストーラが起動します!

手順04

インストールの設定を行い、インストール開始

使用許諾契約書の同意画面が出たら、内容を確認し、「同意する」を選択し、「次へ」をクリック

インストール先を選択し、「次へ」をクリック

web兄さん
特にこだわりがなければそのまま次へ進もう!

スタートフォルダメニューを選択して「次へ」をクリック

web兄さん
こちらも特にこだわりがなければそのまま次へ進もう!

追加タスクを設定して「次へ」をクリック

web兄さん
「デスクトップ上にアイコンを作成する」を選択するとデスクトプにショートカットアイコンが作成されるのでチェックしておきましょう!

設定内容の確認をし、「インストール」をクリック。

手順05

完了をクリックし、ダウンロード終了

「完了」をクリックしてダウンロード終了になります。

手順04でデスクトップに追加を選択している場合、デスクトップにショートカットアイコンが表示されているはずです。

VSCodeの日本語化設定【Max・Windows共通】

web兄さん
初期設定が日本語ではないので、日本語に設定しましょう!
簡単に終わるのでぜひこのタイミングで行ってください!

手順01

VSCodeを開き、右下のメニューをクリック

VSCodeを開くと右下にインストールメニューが出てくるので、「インストールして再起動」をクリックします。

web兄さん
インストールメニューが出ない場合は、ブラウザで「VSCode 日本語化」と検索して設定してみよう!

手順02

再起動し、日本語になっていれば完了

手順01で「インストールして再起動」を選択すると自動で再起動されます。

再起動後日本語になっていれば設定完了です。