プログラミング · 2021/04/04

HTML & CSS の開発環境を用意しよう！（Windows用）

HTML & CSS の開発環境を用意しよう！（Windows用）

この記事では、Progateのサイト上ではなく自分のPCでHTMLとCSSのコードを書き、Webページ開発をする方法を紹介します。

一般的に、自分のPCで開発をする環境のことをローカル環境、開発する環境を用意することを環境構築と呼びます。ローカル環境を構築することで、自分のPCさえあればいつでもどこでも（インターネットに接続していなくても！）HTMLやCSSのコードを書き、Webページ製作を進めることが可能です。

この記事を読みながら実際に手を動かして、Webページ製作の第一歩を踏み出しましょう！

◯ 必要なもの・知識・ PC ・ HTMLおよびCSSの基礎的な知識（Progateの「HTML & CSS 学習コース初級編」をクリアしていれば十分です）

1. テキストエディタの用意

Webページの開発を進めるために必要なツールは、主に「テキストエディタ」と「ブラウザ」の2つだけです。まずは「テキストエディタ」から用意していきましょう。
テキストエディタ（エディタ）とは、Progateのレッスンの画面では中央部分に表示されているコードを入力する部分のことです。HTMLやCSSに限らず、プログラミングをする上では必須のツールです。

Progateのレッスン画面

エディタには様々な種類のものがあります。今回は無料で使用でき、初心者から現場のエンジニアまで幅広く使用されている「Visual Studio Code（VSCode）」というエディタを使用しましょう。

（ここからVSCodeをインストールする方法を説明します。すでに自分のPCにインストールされている方は読み飛ばしても問題ありません。）

まずはVSCodeの公式サイト (https://code.visualstudio.com/) にアクセスします。画面左側に表示されている「ダウンロード」のボタンをクリックし、インストールに必要なファイルをダウンロードしてください。

VSCodeの公式サイト

インストールが完了したら、VSCodeを開きましょう。以下のようなウィンドウが表示されればOKです。

2. ブラウザの用意

次に「ブラウザ」を用意していきましょう。ブラウザとはWebページを表示するためのツールであり、今もこの記事をブラウザを用いて閲覧しているはずです。Progateのレッスン画面では画面右側の、HTMLおよびCSSの表示結果を確認する部分がブラウザになります。

Progateのレッスン画面

Windowsでは標準で「Internet Explorer」または「Microsoft Edge」がインストールされているかと思います。これらのブラウザでも問題はありませんが、今回は「Google Chrome」というブラウザをインストールして用いましょう。

Chromeの公式ページ（ https://www.google.co.jp/chrome/ ）にアクセスし、画面中央の「Chrome をダウンロード」という青いボタンをクリックしてダウンロードを開始しましょう。

Google Chrome の公式ページ

先ほどのVSCodeの時と同様の手順でダウンロードしたファイルを開き、インストールを完了させてください。以下のようにChromeを開くことができれば完了です。

これでWebページを開発するために必要な「道具」は揃いました！

3. 作業フォルダの作成

ここからは用意したVSCodeとChromeを用いて実際にWebページを作成していきましょう。まずはこれから作成するHTMLやCSSのファイルをまとめるための「フォルダ」を用意します。

以下のように、デスクトップにて右クリックで「新規フォルダ」を選択し、「html_lesson」という名前のフォルダを作成します。

このフォルダをVSCodeで開いてみましょう。まず、先ほどインストールしたVSCodeを開きます。以下の画像のように、メニューの「Open folder..」を選択し、先ほど作成したフォルダを開いてください。

これでVSCode上で「html_lesson」フォルダを開くことができました。

4. HTMLファイルの作成

まずはHTMLを記述するファイルから用意していきましょう。先ほど表示したVSCodeのサイドバーにて、「html_lesson」という文字の右側の「New File」を選択します。

入力欄が表示されますので、そこに「index.html」と入力し、Enterキーを押してファイルを作成します。

これでHTMLファイルが作成されました。右側のタブにも「index.html」という表示が増えたかと思います。

※ ファイル名を間違えて作成してしまった場合ファイル名を間違えて入力して作成してしまった場合にはファイル名を変更しましょう。サイドバーで変更したいファイル名の上で右クリックをし、「Rename」を選択することでファイル名を更新することが可能です。

作成した「index.html」にHTMLのコードを記述してみましょう。今回は以下に用意したコードをコピーして貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
  </head>
  <body>
    <h1 class="title">HTML & CSS の開発環境を用意しよう！</h1>
  </body>
</html>

Progateのサイト上でコードを書いていたときにはコードは自動で保存されていましたが、自分のPCでエディタを用いて開発する場合には自分でコードを保存する必要があります。

VSCodeではコードを記述した画面で「Ctrl」キーを押しながら「s」キーを押すことでコードを保存することができます。コードが保存されているかどうかは画面上部のファイル名の部分で確認できます。以下の画像の左側のようにファイル名の横に丸が表示されている時はまだ保存できていません。一方、右の図のように何も表示されていない場合はコードは保存されています。

開発に慣れるまではつい保存し忘れてしまうことがよくありますので、気をつけるようにしましょう。（VSCodeの設定をすることで、ファイルの自動保存が可能になります。興味がある方は「VSCode 自動保存」などで検索してみましょう。）

では、このHTMLの表示結果をブラウザで確認してみましょう。 VSCodeの「index.html」の上で右クリックをしてください。「Copy Path」という項目を選択するとファイルのパスをコピーすることができます。

コピーしたパスをChromeの検索タブに貼り付けましょう。

Chromeで以下の画像のような画面が表示されましたでしょうか？これが「index.html」の表示結果になります。

試しに「index.html」を編集してみましょう。VSCodeに戻って、「index.html」内の <h1> タグの下の行に以下の１行を追加してみてください。

<p>自分のPCでWebページを開発する方法を学習しましょう</p>

コードを入力した後は、「Ctrl + s」でファイルを保存しましょう。

それではChromeで表示結果を確認してみます。先ほど表示結果を確認したページを開き、画面左上の更新ボタン（下図参照）をクリックしてページを再読み込みしてください。

正しく「index.html」が保存されていれば、以下の画像のように表示結果が更新されるはずです。

5. CSSファイルの作成

今度はCSSファイルを用意し、先ほど作成したHTMLをCSSで装飾してみましょう。先ほど「index.html」を作成した時と同様に、サイドバーの「html_lesson」から「New File」を選択してください。表示された入力欄にはファイル名「stylesheet.css」を入力してEnterキーで確定します。

ファイルには用意した以下のコードを貼り付け、「Ctrl + s」で保存してください。

.title {
  color: #02ccba;
}

これでCSSファイルも用意できました。
「stylesheet.css」を「index.html」に適用するために、以下の1行を「index.html」の <head> タグの中に追加してください。

<link rel="stylesheet" href="stylesheet.css">

・CSSの読み込みについて忘れてしまった・どこにコードを書けばいいかわからないという場合には以下のスライドで復習してみましょう。

HTML & CSS 学習コース初級編「HTMLの全体構造（2）」

それでは表示結果を確認してみましょう。先ほどと同じように、Chromeで表示結果を確認しているページを再度読み込んでください。

上図のように見出しの文字が緑色になっていれば正しくCSSが読み込まれています。

もし変化がなく文字が黒色のままの場合には、・CSSのファイル名（stylesheet.css）を間違えている・ファイルを作成する場所（「html_lesson」フォルダ内）を間違えている・「index.html」または「stylesheet.css」のコードが間違っているなどの可能性がありますので、確認してみてください。

6. うまくいかない時のチェックリスト

うまくいかない場合は、以下のような間違いがないかチェックしてみましょう。

記事で指定したコードが貼り付けられていない
入力したファイル名やソースコードなどに誤字脱字がある
ファイルが保存されていない
記事で指定している箇所にフォルダが配置されていない
コマンドの内容や実行している場所が違う

これで「HTML & CSS」の環境構築は完了です。
ここからはProgateで学んだHTMLとCSSの知識を活かし、Webページ製作を進めてみてください！

コメントをお書きください

コメント: 0