Web制作の第一歩として欠かせないのがHTMLとCSSの習得です。
HTMLはウェブページの骨組みを作る言語で、CSSはそのページを美しく装飾する言語です。
これから学び始める方にとっては、何を揃え、どのように環境を整えればいいのか戸惑うことも多いでしょう。
本記事では、学習に必要な機材やソフトウェア（パソコンで使うアプリケーションのこと）、そして具体的な準備手順を、できる限りわかりやすく解説します。
この記事はこのような人におすすめ！
- HTML や CSS をこれから学び始める方
- Web デザイン / Web 制作に興味があるが、何を揃えればいいのかわからない人
HTMLとCSS学習に必要な「もの」リスト
まずは学習に必要なアイテムを確認し、どんな環境を用意すればスムーズに勉強を進められるかを押さえましょう。
1. ハードウェア・ネット環境
HTMLとCSSのコーディング（プログラムを書くこと）は、基本的にパソコン一台あれば始められます。
ノートPCでもデスクトップPCでも構いませんが、画面が小さいと複数のウィンドウを並べたときに操作がしづらい場合があります。
そのため、可能であれば13インチ以上のディスプレイを備えたものを選ぶと安心です。
また、オンライン教材やドキュメント（技術的な説明書）を参照しながら学ぶことが多いため、安定したインターネット回線は必須です。
特に動画を活用して学ぶ場合は、有線LANや高速Wi‑Fiを利用するのがおすすめです。
2. テキストエディター
実際にコードを書くためにはテキストエディタ（文字を入力・編集するためのソフトウェア）が必要です。
Visual Studio Code（VS Code）、Sublime Text、Atomなど、無料で使えるものがいくつかありますが、拡張機能（追加でインストールできる便利な機能）が充実しており日本語にも対応したVS Codeがおすすめです。
3. ブラウザ
書いたコードの仕上がりをすぐに確認できるよう、Google ChromeやMozilla Firefox、Safariなどの最新ブラウザをインストールしておきましょう。
より本格的に学びたい場合は、MAMP（マンプ）やXAMPP（ザンプ）などを用いてローカルサーバー環境を構築するのも良い準備です。
4. 学習教材
効率よくHTMLとCSSを学ぶには、信頼できる教材が欠かせません。
MDN Web Docs（モジラが提供する公式の技術文書サイト）は公式ドキュメントとして情報が豊富で、初心者向けに丁寧に解説されているページも多くあります。
また、短時間で基本をつかめるドットインストール（3分動画で学べるプログラミング学習サイト）やYouTubeの無料動画、Udemy（ユーデミー：有料のオンライン学習プラットフォーム）などのオンライン講座を併用すると学習の幅が広がります。
手元に書籍を用意するなら、「いちばんやさしいHTML5＆CSS3の教本」のような初心者向けのものが、基礎からしっかり学べて便利です。
困ったときはStack Overflow（プログラマー向けの質問・回答サイト）やQiita（キータ：エンジニア向けの技術情報共有サービス）で検索し、同じ悩みを持つ人の質問と回答を参考にしましょう。
Web制作初心者向けにHTML5とCSS3の基本を丁寧に解説した入門書。
見開きごとに「説明＋図解・コード例」がセットで構成されていて、視覚的にも理解しやすいのが特徴です。専門用語もかみくだいて説明されており、初学者でも安心です。
HTMLとCSSの基本をやさしく解説していて「スラスラ」と読めます。
初心者がつまずきやすいポイントを丁寧にフォローしながら、HTMLとCSSの基本を学べる入門書です。実際に手を動かしながらWebページを作るステップ式の解説が魅力です。
人気ブログ「Webクリエイターボックス」の運営者であるMana氏による、初心者にもわかりやすいWeb制作の入門書です。現場で使える知識を豊富に持つMana氏が、長年Webに関する情報をやさしく丁寧に解説してきた経験を活かし、読み手にスッと理解できるように構成されています。
試し読みなどで、学習スタイルに合ったものを選ぶとより安心だね！
スムーズに学ぶための「準備」ステップ
アイテムが揃ったら、実際に手を動かす前に環境を整えることから始めます。
ここでの準備が、学習の効率を大きく左右します。
1. テキストエディタをインストールしよう
テキストエディターには以下のものがあります。
好みのテキストエディタを公式サイトからダウンロードし、インストールします。
- Visual Studio Code（おすすめ）
Visual Studio Code ダウンロードはこちら
マイクロソフト製の無料エディターで、拡張機能（追加でインストールできる便利な機能）が豊富にそろっており、ボタンひとつでテーマ（画面の色合いやデザイン）や便利ツールを追加できます。
HTML/CSSだけでなくさまざまなプログラミング言語の学習にも適しています。 - Phoenix Code
Phoenix Code ダウンロードはこちら
作成中のページをリアルタイムで確認できる「ライブプレビュー機能」や、間違いを自動で見つけてくれる「エラーチェック機能」などがあり、初心者でも扱いやすいテキストエディターです。 - Sublime Text
Sublime Text ダウンロードはこちら
起動やファイル操作が非常に速く、マルチカーソル編集（複数の場所を同時に編集できる機能）やコマンドパレット（キーボードで素早く機能を呼び出せるメニュー）など直感的にコードを書ける機能が揃っています。
無料版でもほぼ無制限に使えますが、時々ライセンス購入を促すメッセージが出る点だけ覚えておきましょう。
筆者は「Visual Studio Code」と「Phoenix Code」をメインに使ってるよ！
Visual Studio Code（VS Code）の場合はインストーラーを起動し、画面の指示に従うだけで簡単に導入が完了します。
初期設定として、日本語入力やテーマ（画面の色合いやデザイン）の切り替え、拡張機能のインストールなどを行っておくと、快適にコードを書き進められます。
特に「Live Server」という拡張機能は、HTMLやCSSファイルを保存するたびにブラウザが自動リロードされるため、学習効率が格段にアップします。
以下の記事では、Visual Studio Codeをインストールする手順を紹介しています。
インストーラーのダウンロード方法から初期設定、拡張機能の導入方法などの詳しいやり方はこちらをご覧ください。
2. ブラウザをダウンロードしよう
次に、実際に書いたコードを表示・検証するためのブラウザを用意します。
Web制作では、自分で書いたコードがどのように表示されるか、Google Chrome ・Firefox・Safari・Edgeなど複数のブラウザで動作チェックするのが一般的です。
これは、ブラウザによって表示の仕方やCSSの解釈が微妙に異なることがあるためです。
ブラウザーは主には以下のものがあります。
- Google Chrome（グーグル・クローム）
Google Chrome ダウンロードはこちら
利用者数が世界的に最も多いブラウザ。
表示スピードが速く、拡張機能（プラグイン）が豊富で、開発者向けの「デベロッパーツール」も非常に使いやすいです。 - Mozilla Firefox（モジラ・ファイアフォックス）
Mozilla Firefox ダウンロードはこちら
セキュリティとプライバシー保護に力を入れているブラウザです。
開発者向けの「開発者ツール」は、CSSグリッドやアニメーションの可視化など、Web制作者向けの細かな機能も豊富です。 - Opera（オペラ）
Opera ダウンロードはこちら
独自の機能が豊富なブラウザ。広告ブロック機能などが標準搭載されています。
個人ユーザーを中心に根強い人気があります。
WindowsにはMicrosoft Edge（マイクロソフト・エッジ）
macOSやiPhoneにはSafari（サファリ）が標準搭載されているよ！
Google Chromeなら公式サイトにアクセスし、「Chromeをダウンロード」ボタンをクリックしてインストーラーを実行するだけで完了です。
FirefoxやOperaも同様に公式ページから最新版を入手し、常に最新バージョンを維持するよう心がけましょう。
3. ローカルサーバー環境を構築しよう(任意)
より本格的にWeb制作を学びたい場合は、ローカルサーバーを構築しておくとよいでしょう。
MAMP（マンプ）やXAMPP（ザンプ）を導入すると、本番環境に近い形でWebサイトの動作確認ができます。
VS Codeであれば「Live Server」の拡張機能を有効化すれば、追加のソフトをインストールせずに簡易的なローカルサーバーを利用できます。
HTML/CSSの学習ならVS Codeの「Live Server」 で十分ですが、PHPやWordPress、ログイン・投稿などの機能を含むサイトを作るなら XAMPP が必要です。
目的に応じて使い分けましょう。
以下の記事では、MAMPやXAMPPを使ったローカルサーバーの構築方法を紹介しています。
Visual Studio Code（VS Code）の「Live Server」の拡張機能のダウンロードや使い方はこちらをご覧ください。
準備完了
以上で学習に必要なものの準備は完了です。
