HTMLとCSSの違いは？同じページの文字色と余白を変えて理解しよう
ショウ
まずやる。
Web制作の環境構築｜VS CodeをインストールしてHTMLを表示するまで【初心者向け】
ショウ
読む時間の目安：約15分（操作にかかる時間は含みません）
結論から言うと、Web制作を始めるために、最初から難しい環境を用意する必要はありません。
まずは次の5つができれば十分です。
- VS Codeをインストールする
- 作業用のフォルダを作る
index.htmlを作る- HTMLを書く
- 保存してブラウザで表示する
私自身、Web制作を始めたときに最初につまずいたのは、HTMLやCSSの書き方ではありませんでした。
フォルダの作り方や保存先が分からず、「今どこに保存されているの？」という状態になったことです。
一度は「フォルダが消えた」と思って焦ったこともあります。あとで確認すると、原因は単純に保存し忘れていただけでした。
今なら簡単なことですが、初心者の頃は、何が起きているのかすら分かりませんでした。
それでも、自分で入力した文字が初めてブラウザに表示されたときは、「自分もプログラミングをしている」ような気持ちになりました。
この記事では、当時の自分でも迷わないように、VS Codeのインストールから、自分で書いたHTMLをブラウザに表示するところまで順番に解説します。
難しい拡張機能や細かい設定は後回しです。
まずは、
「自分で書いたコードが画面に表示された！」
という最初の成功体験を作りましょう。
Web制作の学習順序から確認したい方は、Web制作の独学は何から始める？も参考にしてください。
この記事の操作画像は、手順を説明するためにMacのデモ用フォルダで撮影したものです。当時の失敗場面の記録ではありません。
この記事の目次
Web制作の環境構築で今回やること
今回のゴールはとてもシンプルです。
最終的にブラウザに、
「はじめてのWeb制作」
という文字を表示します。
やることは次の5つだけです。
- VS Codeをインストールする
- Web制作用のフォルダを作る
index.htmlを作る- HTMLを書く
- 保存してブラウザで確認する
JavaScript、Git、WordPressは今回は使いません。
VS Codeの拡張機能も、最初から大量に入れる必要はありません。
Web制作を始めたばかりなら、まず「HTMLを書いて表示する」という基本だけに集中した方が分かりやすいです。
そもそもVS Codeとは？
VS Code（Visual Studio Code）は、HTMLやCSSなどのコードを書くために使えるコードエディターです。
Microsoftが提供していて、Windows・macOS・Linuxで利用できます。
Web制作を始めた頃の私は、VS Codeをインストールしたとしても、
- 何を開けばいいのか
- どこにコードを書くのか
- ファイルをどこに保存するのか
- 書いたコードをどうやって確認するのか
が分かりませんでした。
でも、最初に覚える操作はそれほど多くありません。
今回使うのは主に、
- フォルダを開く
- ファイルを作る
- コードを書く
- 保存する
だけです。
VS CodeにはHTMLの入力補助なども標準で用意されていますが、便利な機能を全部覚えてから始める必要はありません。
STEP1：VS Codeをインストールする
まずはVS Codeをパソコンにインストールします。
Macの場合
VS Code公式のMac向け手順からmacOS版をダウンロードします。
公式の現在の手順では、ダウンロードした.dmgを開き、Visual Studio Code.appをApplicationsフォルダへ移して起動します。
MacにはIntel版・Apple silicon対応版などがあります。自分のMacに合うものが分からない場合は、公式ダウンロードページの案内に沿って選べば大丈夫です。
Windowsの場合
WindowsもVS Code公式のWindows向け手順からインストーラーをダウンロードします。
公式では、多くの利用者にはUser Setupが案内されています。
ダウンロードしたインストーラーを起動し、画面の案内に沿ってインストールします。
最初から細かい設定はしなくていい
VS Codeについて検索すると、
- おすすめ拡張機能
- Git連携
- ターミナル設定
- フォーマッター
- AI機能
など、たくさんの情報が出てきます。
でも、これからHTMLを初めて書く段階なら、いったん後回しで大丈夫です。
私なら、Web制作を始めた頃の自分に、
「VS Codeを開けたら、まず次へ進もう」
と伝えます。
便利な設定は、必要になったときに追加すれば十分です。
STEP2：Web制作用のフォルダを作る
次に、今回のWebページを保存するためのフォルダを作ります。
例えば、分かりやすい場所に、
my-first-site
というフォルダを作ってみましょう。
最初はデスクトップなど、自分が場所を把握しやすいところでも構いません。
MacではFinderで保存したい場所を開き、「ファイル」→「新規フォルダ」を選んで名前を付けます。Windowsではエクスプローラーで保存場所を開き、「新規作成」→「フォルダー」を選びます。
私は「どこに保存されたの？」でつまずいた
ここは、私が最初にかなり迷ったところです。
フォルダを作ったつもりでも、
「どこに保存されたんだろう？」
となりました。
VS Codeの画面だけ見ていると、今どのフォルダを開いているのかもよく分かりませんでした。
初心者のうちは、かっこいいフォルダ構成を作ることより、
「自分が今どのフォルダで作業しているか分かる」
ことの方が大切だと思います。
フォルダを作ったら、VS Codeの「フォルダーを開く（Open Folder）」から、そのフォルダを選択します。
Macでは「ファイル（File）」→「開く…（Open…）」からフォルダを選べます。Windowsでは「ファイル（File）」→「フォルダーを開く（Open Folder…）」を選びます。
VS Code左側のExplorer（ファイル一覧）にmy-first-siteが表示されれば、作業場所を開けています。
フォルダ名は分かりやすい半角英数字でOK
今回は、
my-first-site
のような名前で十分です。
Web制作では今後、CSSや画像などのファイルも同じプロジェクトフォルダ内で管理します。
最初の段階では、
「Webサイト1つにつき、作業用フォルダを1つ作る」
くらいの感覚で大丈夫です。
STEP3：index.htmlを作る
次に、HTMLを書くためのファイルを作ります。
VS Code左側のExplorerでmy-first-siteを右クリックし、「新しいファイル（New File）」を選びます。ファイル名を、
index.html
にして、Enterキーで確定します。
ここで初心者の頃の私は、
「なぜindexなの？」
「.htmlって何？」
というところから分かりませんでした。
でも、この段階では細かい理由をすべて覚えなくても大丈夫です。
まずは、
「Webページを作るためにindex.htmlというHTMLファイルを作る」
と覚えて先へ進みましょう。
大事なのは、最後の.htmlです。
.htmlはHTMLファイルであることを示す拡張子です。index.htmlはサイトの入口のページによく使われる名前ですが、今回のように直接開く場合は、他の名前でも.htmlなら表示できます。
STEP4：HTMLを書いてみる
作成したindex.htmlを開いて、次のコードを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのWeb制作</title>
</head>
<body>
<h1>はじめてのWeb制作</h1>
</body>
</html>
最初は知らない記号や英単語が多くて、難しく見えると思います。
私も、コードの種類と、それぞれが何をしているのか全く分からない状態から始めました。
でも、今回は全部暗記しなくて大丈夫です。
まず注目するのは、この部分です。
<h1>はじめてのWeb制作</h1><h1>と</h1>の間にある文字が、ブラウザでは見出しとして表示されます。
例えば、
<h1>Web制作の勉強を始めました！</h1>に変更すれば、ブラウザに表示される文字も変わります。
私は、コードを読んで覚えるより、
コードを打つ → 画面を見る → 変化を確認する
という繰り返しで少しずつ覚えていきました。
STEP5：必ず保存して、ブラウザで表示する
コードを書いたら、まず保存します。
ここは初心者の頃の私が実際に失敗したところです。
「フォルダが消えた」と思ったら、保存し忘れていただけだった
一度、作業していたものが消えたように見えて、かなり焦ったことがあります。
そのとき私はChatGPTに、
「フォルダが消えたけど、その原因を一緒に解決して」
という感じで相談しました。
確認していくと、原因は難しいトラブルではなく、ただ保存を忘れていただけでした。
今なら「保存した？」とすぐ確認できます。
でも初心者の頃は、保存されていないのか、フォルダを間違えたのか、ファイルが消えたのか、その違いすら分かりませんでした。
だから、この手順ではあえて強調します。
コードを書いたら、まず保存してください。
MacならCommand + S、WindowsならCtrl + Sでも保存できます。
ブラウザでindex.htmlを開く
保存できたら、作成したindex.htmlをFinder（Mac）やエクスプローラー（Windows）から開きます。
ダブルクリックでVS Codeが開く場合は、ファイルを右クリックし、Macでは「このアプリケーションで開く」、Windowsでは「プログラムから開く」からブラウザを選びます。
Chrome、Safari、Edgeなどのブラウザで開き、画面に、
「はじめてのWeb制作」
と表示されたら成功です。
文字を書き換えたあとは、VS Codeで保存してから、ブラウザの再読み込みボタンを押してください。
たった1行の文字でも、自分で書いたコードがブラウザに反映されます。
自分の文字がブラウザに出たとき、初めて「やってる感じ」がした
私がWeb制作を始めた頃、コードの種類も意味もほとんど分かっていませんでした。
それでも、自分で入力した文字がブラウザに表示されたときは、
「自分もプログラミングをしている」
ような気持ちになりました。
もちろん、HTMLで文字を表示しただけなので、まだスタート地点です。
でも、初心者の最初の目標はそれくらい小さくていいと思います。
Web制作を調べると、JavaScript、Git、WordPress、PHPなど、先の技術がたくさん出てきます。
それを全部見ていると、始める前から難しく感じます。
まずは、
自分で書いたコードで、自分の文字をブラウザに表示する。
ここまでできたら、今回の目標は達成です。
HTMLが表示されないときに最初に確認すること
もしブラウザに思ったとおり表示されなくても、焦らなくて大丈夫です。
まず次の項目を確認します。
1. 保存したか
最初に確認してほしいポイントです。
コードを書いても、保存していなければ変更内容はファイルへ反映されません。
私自身、保存忘れで「消えた」と思った経験があります。
2. 編集しているファイルはindex.htmlか
似た名前のファイルを複数作ると、違うファイルを編集していることがあります。
VS Codeで編集しているファイル名と、ブラウザで開いているファイルを確認します。
3. ファイルの保存場所は分かっているか
どこに保存したか分からなくなると、別のindex.htmlを開いてしまうことがあります。
VS Code左側のExplorerと、Finder・エクスプローラーの場所を確認してみてください。
4. タイポ（入力ミス）がないか
初心者の頃は、自分では小さな入力ミスになかなか気づけません。
私もタイポはChatGPTに確認してもらうことがあります。
分からなかったらAIに「分からない状態」をそのまま伝えていい
今からWeb制作を始めるなら、私は初心者ほどAIを使っていいと思っています。
環境構築では、
「何が分からないのか分からない」
という状態になりやすいからです。
専門用語を使って質問する必要はありません。
私がフォルダが消えたと思ったときも、難しい質問はしていません。
「フォルダが消えたけど、その原因を一緒に解決して」
というように、起きていることをそのまま伝えました。
例えば、こんな聞き方で十分です。
Web制作初心者です。VS Codeをインストールしましたが、次に何をすればいいか分かりません。HTMLファイルを作って、自分の文字をブラウザに表示するところまで1つずつ教えてください。
表示されないなら、
index.htmlにコードを書いたけどブラウザに反映されません。保存場所やタイポも含めて、初心者向けに一緒に原因を確認してください。
と聞けます。
人には「こんな初歩的なことを聞いていいのかな」と感じることでも、AIなら何度でも質問できます。
AIには答えだけでなく理由も聞く
ただし、AIにコードを全部作ってもらい、そのままコピペするだけでは、自分で理解しにくくなります。
例えば、
<h1>こんにちは</h1>と教えてもらったら、
<h1>は何をするコード？初心者向けに説明して。
と聞いてみます。
私は、コードの近くにコメントや説明を付けてもらう使い方も助かっています。
AIを「全部作ってもらう道具」ではなく、「何度でも質問できる先生」として使う。
これが、今のところ自分には合っています。
最初は拡張機能を入れすぎなくていい
VS Codeには便利な拡張機能がたくさんあります。
Live Server、フォーマッター、Git関連、AI関連など、調べると次々におすすめが出てきます。
でも今回は、最初から入れなくても構いません。
まず、
- フォルダを開く
index.htmlを作る- コードを書く
- 保存する
- ブラウザで表示する
という基本の流れを理解します。
その後、
「毎回の確認をもっと楽にしたい」
「コードを自動で整えたい」
と思ったときに、必要な機能を追加すれば十分です。
現在のVS CodeはHTMLを編集するための基本的な入力補助を標準で備えています。機能の詳細はVS Code公式のHTMLガイドで確認できます。
まず標準機能で始めて、必要になったものだけ足していく方が、初心者には分かりやすいと思います。
今日のゴールは「自分の文字が表示できた」で十分
今回やったことをもう一度まとめます。
- VS Codeをインストールする
my-first-siteフォルダを作る- VS Codeでフォルダを開く
index.htmlを作る- HTMLを書く
- 保存する
- ブラウザで開く
ここまでできればOKです。
最初から、
「Webサイトを完成させる」
「WordPressを覚える」
「仕事を取る」
まで考えなくて大丈夫です。
まずは、
「自分で入力した文字が、自分のブラウザに出た」
という小さな成功体験を作ってみてください。
私はその瞬間に、少しだけ「プログラミングをしている感じ」がしました。
そこから、コードを書いて画面が変わる面白さが少しずつ分かるようになりました。
まとめ｜VS Codeを入れたら、まずHTMLを1回表示してみよう
Web制作の最初の環境構築は、難しく考えなくて大丈夫です。
まずは、
- VS Codeをインストール
- 作業フォルダを作る
index.htmlを作る- HTMLを書く
- 保存する
- ブラウザで表示する
ここまで進めてみてください。
私自身、最初はフォルダの作り方や保存先が分からず、保存し忘れで「消えた」と思ったこともありました。
それでも、自分で入力した文字が初めてブラウザに表示されたときは、「自分もプログラミングをしている」という感覚になりました。
分からないことがあれば、AIにそのまま質問して大丈夫です。
コードを書く。
保存する。
ブラウザを見る。
少し変更して、もう一度確認する。
まずはこの繰り返しから始めてみてください。
次は、今回作ったindex.htmlを使いながら、HTMLとCSSがそれぞれ何をしているのかを実際に触って確認していきます。
ABOUT ME
