「 HTML や CSS を始めたいけど、まず何を準備したらいいの？」
「パソコンだけあればできるの？専門的なソフトが必要？」
そんな疑問のせいで、最初の一歩が踏み出せない人は意外と多いです。
でも安心してください。
HTML ・ CSS は、パソコン1台あれば今日から始められます。
この記事では、 HTML ・ CSS を始めるうえでなにが必要でなにがいらないのかを整理して、無料で使えるエディタ（ VS Code ）の準備方法から、実際にファイルを作ってブラウザで開くところまでを、初心者でもつまずかないように”最小限”にしぼって解説します。
読み終わるころには、あなたのパソコンで HTML ファイルを作って、それをブラウザで表示できる状態になっています。
「とりあえず書ける環境がほしい！」という人は、このページさえ読めばOK。
それでは、まず「パソコンだけで本当にできるの？」というところから見ていきましょう。
HTML・CSSは”パソコンだけ”で始められる？
結論から言うと、 HTML ・ CSS はパソコン1台あれば今日から始められます。
お金のかかるソフトも、特別な設定も必要ありません。
まずはここで”何が必要で、何はいらないのか”を整理しておきましょう。
必要なのは”パソコンとブラウザ”だけ
HTML や CSS は、ただの”文字のファイル”です。
- 書く
- 保存する
- ブラウザで表示する
という仕組みなので、最低限あればいいのは次の2つだけ。
- パソコン（ Windows でOK）
- ブラウザ（ Chrome / Edge など）
特別なマシン性能もいりません。
よくある誤解「専門的なソフトって必要？」
Web制作というと、「高いソフトを買わないとできないのでは？」と思われがちですが…
結論は不要です。
- 有料ツール → なくてもOK
- 大きな設定 → 初心者は不要
- 難しいプログラム → HTML ・ CSSでは使わない
昔は専用ソフトが必要な時代もありましたが、今はぜんぶ無料＆シンプルに始められます。
最初に準備するのは”エディタ”だけ（無料）
エディタとは、 HTML ・ CSS の”文字を書く場所”のことです。
普段のメモ帳でも書けますが、書きやすさを考えると VS Code （無料）を選ぶのがいちばん。
- 色分けで見やすい
- 間違いに気づきやすい
- ファイル管理がラク
- 初心者でも使いやすいUI
このあと一緒にインストールしていきます。
ここまでのまとめ
- HTML ・ CSS はパソコンとブラウザがあれば始められる
- 高いソフトや難しい設定は不要
- 無料のエディタ（ VS Code ）を入れるだけで準備OK
まずはVS Codeを用意しよう
HTML ・ CSS を書くときにいちばん使われている無料エディタが Visual Studio Code（通称：VS Code）です。
はじめて聞く名前でも大丈夫。
インストールして開くだけで、すぐに使えるようになります。
難しい設定は不要なので、このページの流れ通りに進めればOKです。
なぜVS Codeがおすすめなの？
初心者にとって VS Code が便利な理由は、ざっくりこの3つです。
- コードが色分けされて見やすい
- どこがタグで、どこが文字なのか一目でわかる
- スペルミスなどの間違いに気づきやすい
- 初心者がつまずく”閉じタグ忘れ”なども見つけやすい
- 無料なのにプロも使うレベルの高機能
- 将来の学習にもそのまま使える
“とりあえずこれを入れれば大丈夫”という安心感があります。
VS Codeをダウンロードする手順
問題がなければ”同意する(A)”を押してください
特にこだわりがなければ”次へ(N)”を押してください。
特にこだわりがなければ”次へ(N)”を押してください。
全部チェックを入れて”次へ(N)”を押してください。
下の画像のようになっていたら”インストール(I)”を押しましょう。
下の画面になれば終わりです。
“完了(F)”を押してください。
インストール時に迷いやすいポイント
VS Code のインストールでは、初心者がひっかかりやすい場所が2つあります。
- ” PATH に追加”というチェックは入れたままでOK？
入れたままで大丈夫。
特に深い意味はなく、初心者は気にしなくてOK。
- ショートカットを作るかどうか
作っておくと楽。
デスクトップにアイコンがあるとすぐ起動できて便利です。
ここまでのまとめ
- VS Code は無料で使えて初心者でも扱いやすい
- ダウンロード → ファイル開く →同意する → 次へ → 次へ → 次へ → インストール でインストール完了
- 迷いやすい場所も”基本そのまま”で問題なし
VS Codeを日本語化して使いやすくする
VS Code をインストールした直後は英語表示になっています。
英語のまま使っても問題はありませんが、日本語化しておくと圧倒的にラクです。
ここでは、たった1つの拡張機能を入れるだけで VS Code を日本語表示にする方法を解説します。
英語のままだと何が困る？
- メニューの意味が直感的にわからない
- 最初の設定で迷いやすい
- ネット上の日本語解説と見た目が違う
など、細かいところで戸惑うポイントが増えてしまいます。
最初は”使いやすさ優先”で日本語にしておくのが安心です。
日本語化するための拡張機能を入れる
日本語化は、拡張機能（ Extension ）を入れるだけで完了します。
ここまでのまとめ
- VS Code は最初が英語表示
- ” Japanese Language Pack “を入れるだけで日本語化できる
- 再起動するとメニューが日本語に変わる
VS Codeでフォルダとファイルを作ってみよう
日本語化までできたら、いよいよ自分の手で HTML ファイルを作る準備です。
ここでは、
- 作業用フォルダを作る
- VS Code でそのフォルダを開く
index.htmlを作る
という最初の一歩を一緒にやっていきます。
難しい操作は一切ありませんので安心してください。
まずは”作業用フォルダ”を1つ作ろう
HTML ・ CSS を勉強するときは、1つのフォルダの中にファイルをまとめるのが基本です。
- デスクトップで右クリック
- “新規作成” → “フォルダー”
- 名前を
html-cssなど、わかりやすいものにする
このフォルダの中に、これから作る HTML ファイルや CSS ファイルを入れていきます。
VS Codeでフォルダを開く手順
特に見た目に変化はないですが、ファイルは開けています。
左側のエクスプローラーの下に、作成したフォルダーの名前が書いてあればOKです。
新しく HTML ファイルを作ってみよう
フォルダを開いたら、次はファイル作成です。
- 左側のフォルダ名の右にある”新しいファイル”アイコンをクリック
- ファイル名を
index.htmlと入力して Enter
これで最初の HTML ファイルができました！
最初の基本形を入れておく
index.html を作ったら、まずは HTML の基本形を入れておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
</body>
</html><!DOCTYPE html>HTML ですよ！と宣言
<html>HTML 全体を囲むタグ
<head>画面に表示されない設定を書く場所
<meta charset="UTF-8">文字化けしないための設定
<title>ブラウザのタブに出る名前
<body>画面に見える内容を書く場所
これでファイルの準備はバッチリです。
ここまでのまとめ
- デスクトップに作業用フォルダを作る
- VS Code は”フォルダごと”開く
index.htmlを新規作成- HTML の基本形を入れてスタートライン完成
Live Serverで”すぐ結果が見える”ようにする
通常、 HTML を書いたら
- 保存する
- ブラウザでファイルを開く
- また編集して保存する
- またブラウザを更新する
という流れになりますが…
Live Server を使うと、書いたそばから画面が更新されるので、初心者でもすぐ”結果を見ながら”進められます。
ここでは、VS Code の拡張機能” Live Server “を使ってプレビューできるようにしましょう。
Live Serverって何？
簡単に言うと、HTML を編集 → 保存すると、ブラウザが自動で画面を更新してくれる機能のことです。
メリットはこんな感じ
- 書いたものがすぐ見える
- 反映されない問題に気付きやすい
- 学習スピードがかなり速くなる
Web 制作ではほぼ必須の便利ツールです。
“Live Server”をインストールしよう
実際にライブプレビューしてみよう
- VS Code で
index.htmlを開く - 右下にある” Go Live “をクリック
- ブラウザが自動で立ち上がり、 HTML が表示される
これでライブプレビューの開始です！
反映されるか試してみよう
<body> の中に、ためしに” Hello! “と書いてみます。
<body>
Hello!
</body>そして Ctrl + S （保存）。
ブラウザが自動で更新されて、画面にも” Hello! “と表示されれば成功です。
うまく表示されないときのチェックポイント
- ファイルを保存している？（ Ctrl + S ）
- index.html を開いた状態で” Go Live “を押した？
- 拡張機能が正しくインストールされている？
- ファイル名が
index.htmlになっている？（スペルミス注意）
このあたりを確認するとたいてい解決します。
ここまでのまとめ
- ライブプレビュー ＝ 編集内容がすぐ見える便利機能
- Live Server をインストールして” Go Live “で起動
- 保存すると自動でブラウザが更新される
ここまでできたら準備完了！次に進もう
ここまでの手順がすべてできていれば、もうあなたは HTML ・ CSS を書ける環境が整った状態 です。
少し長く見えたかもしれませんが、実際にやっていることはシンプルで、
- フォルダを作る
- VS Code を入れる
- 日本語化する
- HTML ファイルを作る
- ライブプレビューする
という5つのステップだけです。
「もう書ける状態になった！」というのが、今回のゴールです。
- パソコンだけで HTML ・ CSS が始められることを知った
- VS Code の公式版をインストールできた
- 日本語化して使いやすい状態になった
- 作業用フォルダと
index.htmlを自分で作れた - ライブプレビューで、書いた内容をブラウザで確認できた
確認問題
用語ミニクイズ
VS Code は、 HTML を書くためのなんのような役割？
- ブラウザ
- メールソフト
- エディタ
答え：3. エディタ
反映されないときにまず確認することは？
HTML を書いてもブラウザに反映されないとき、最初に確認すべき基本の1つはなんでしょう？
答え：保存（Ctrl + S）したかどうか
実際にやってみる問題
VS Code を開いて、自分の作業フォルダの中に新しい HTML ファイルを1つ作ってみましょう。
名前は test.html など、なんでも OK です。
作れたら、もうあなたは” HTML が書ける人”です！
次は”初めてのHTML”に進もう
次はいよいよ、手を動かしながら“はじめての HTML を触る”に進みます。
- HTML ファイルを作る
- ブラウザで開く
- Hello World を表示する
- 基本形の意味を知る
など、実際に動かしながら進めていくので”書いて覚える”感覚が一気につかめます。