はじめてのWeb開発 HTMLとCSSで自分のページを作ろう
準備

ソフトのインストール
― XAMPP と VS Code を用意しよう

コードを書き始める前に、2つのソフトをパソコンにインストールします。 どちらも無料で使えます。順番に進めましょう。

このページではWindowsを使う場合の手順を説明します。 インストール中に「このアプリがデバイスに変更を加えることを許可しますか？」 と表示された場合は「はい」を押してください。

インストールするソフト

今回使うソフトは次の2つです。

ソフト名 役割
XAMPP パソコンの中に「仮想のWebサーバー」を作るソフト。作ったHTMLファイルをブラウザで確認するのに使います。
Visual Studio Code
（VS Code）		 コードを書くためのテキストエディタ。色分け表示や補完機能があり、HTMLやCSSが書きやすくなっています。
サーバーって何？
Webサイトのファイルを保管して、ブラウザからの「見せて！」という要求に応えるコンピュータのことです。 XAMPPを使うと、自分のパソコンの中だけでこのしくみを再現できます。 インターネットに公開する必要はないので、安心して練習できます。

① XAMPP をインストールする

ダウンロードページを開く

XAMPP は Apache Friends（アパッチ・フレンズ）という団体が配布しています。 下のURLをブラウザのアドレスバーに入力して開いてください。 

https://www.apachefriends.org/jp/index.html

ページを開くと「Windows 向け XAMPP」というボタンが見つかります。 バージョンの数字が一番大きいもの（最新版）を選んでください。

ダウンロードの手順

  1. 「Windows 向け XAMPP」の右にある ［ダウンロード］ ボタンをクリックする。
  2. xampp-windows-x64-〇〇〇-installer.exe というファイルがダウンロードされる（数分かかります）。
  3. ダウンロードが終わったら、そのファイルをダブルクリックして起動する。

インストーラーを進める

インストールの手順

  1. 「Setup」画面が開いたら ［Next］ をクリックする。
  2. 「Select Components（インストールするもの）」画面が出たら、そのまま ［Next］。変更不要です。
  3. 「Installation folder（インストール先）」は C:\xampp のままで ［Next］。
  4. 「Ready to Install」画面で ［Next］ を押すとインストール開始。少し時間がかかります。
  5. 「Completing the XAMPP Setup Wizard」と表示されたら完了。チェックボックスにチェックを入れたまま ［Finish］ を押す（XAMPP コントロールパネルが開きます）。

動作確認をする

Apacheを起動してみよう

  1. XAMPP コントロールパネルが開いていない場合は、スタートメニューから「XAMPP Control Panel」を起動する。
  2. Apache の行にある ［Start］ ボタンをクリックする。
  3. Apache の行が緑色に変わればOK。サーバーが起動しています。
  4. ブラウザを開いて、アドレスバーに http://localhost と入力してEnterを押す。
  5. XAMPPのロゴが表示されたら成功です！
ウイルス対策ソフトに止められた場合
WindowsセキュリティやウイルスバスターなどがApacheの起動をブロックすることがあります。 その場合はウイルス対策ソフトの「許可する」「除外に追加」などの操作でXAMPPを許可してください。 わからない場合は利用しているセキュリティソフトの名前で検索すると手順が見つかります。

② Visual Studio Code をインストールする

Visual Studio Code（VS Code）は Microsoft が開発した無料のコードエディタです。 プロのエンジニアも多く使っており、HTMLやCSSが書きやすい機能が充実しています。

ダウンロードページを開く

https://code.visualstudio.com/

ダウンロードの手順

  1. ページを開くと、真ん中に大きな 「Download for Windows」 ボタンがある。クリックする。
  2. VSCodeSetup-x64-〇〇〇.exe というファイルがダウンロードされる。
  3. ダウンロードが終わったら、そのファイルをダブルクリックして起動する。

インストーラーを進める

インストールの手順

  1. 「使用許諾契約書の同意」画面で 「同意する」 を選んで ［次へ］。
  2. 「インストール先の指定」はそのまま ［次へ］。
  3. 「スタートメニューフォルダーの指定」はそのまま ［次へ］。
  4. 「追加タスクの選択」画面では、以下の2つにチェックを入れておくと便利です：
    • 「エクスプローラーのファイルコンテキストメニューに［Code で開く］アクションを追加する」
    • 「PATHへの追加」
  5. 「インストール準備完了」画面で ［インストール］ をクリック。
  6. 「セットアップ完了」画面で ［完了］ を押す。VS Code が起動します。

日本語化する（おすすめ）

VS Code は最初は英語表示です。日本語にしましょう。

日本語化の手順

  1. VS Code を起動する。
  2. 左側の縦に並んだアイコンの中から、ブロックが4つ並んだアイコン（拡張機能）をクリックする。
  3. 上部の検索ボックスに Japanese Language Pack と入力する。
  4. 「Japanese Language Pack for Visual Studio Code」が表示されたら ［Install］ をクリック。
  5. 右下に「Restart to apply」というボタンが出たらクリックして VS Code を再起動する。
  6. メニューが日本語に変わればOKです。

③ ファイルを置く場所を確認する

XAMPPでWebページを表示するには、HTMLファイルを決まったフォルダに入れる必要があります。 そのフォルダは次の場所にあります。 

C:\xampp\htdocs\

htdocs（エイチティードックス）が、Webサイトのファイルを置く場所です。 これ以降、作ったHTMLファイルはすべてこのフォルダの中に入れます。

htdocsの中に自分専用のフォルダを作ろう
htdocsの直下にファイルをたくさん置くと、後で探しにくくなります。 例えば C:\xampp\htdocs\practice\ のように、 自分の練習用フォルダを1つ作っておくとすっきりします。

準備完了！

ここまでできたら、準備は完了です。おつかれさまでした。

次の章から、いよいよWebページのしくみを学んでいきます。