HTML・CSSを勉強の下準備「コードエディタとブラウザのインストール」初心者におススメの環境を解説

公開：2022/11/02最終編集：2023/09/02

はじめまして、もちです！
今回はこれからWeb開発を勉強しようとしている方向けの下準備について解説していきます！
よろしくお願いします！
うおおおおおおおおおおおお！

ここではHTML・CSSを勉強する為に必要な下準備の説明をします、HTMLやCSSのコーディングをするにはまず

最新のブラウザ
コードエディタ

の2つが必要です。

ブラウザはWebページを表示するために使うソフトウェアのことです、コードエディタはHTMLやCSSなど各種コードを打ちこんだり閲覧するソフトウェアです。

Web開発をしていくにはどちらも必ず必要になるのでまとめて導入していきましょう！

ブラウザのインストール

おすすめのブラウザ

Google Chrome

まずはブラウザから準備していきましょう、オススメは「Google Chrome」です。

Google ChromeはWeb開発に便利なツールを拡張機能としてインストールでき、シェア率もトップのブラウザです。
Webブラウザは一般的に使われているブラウザの見た目を確認しながら開発するためにもマイナーなものは避けましょう。

約半分のユーザーがChromeを使用しています！Windows 10などに標準で搭載されているEdgeなどのブラウザでも使う事もできますが、Chromeを使う事をおすすめします！

(日本でのPC＋モバイル向けブラウザのシェア率)

ランキング	ブラウザ名称	2022年7月のシェア率
第1位	Chrome	49.61%
第2位	Safari	26.98%
第3位	Edge	14.03%
第4位	Firefox	4.82%

gs.statcounter.com より引用

Chromeのダウンロードとインストール

まずはここ(ダウンロードページ)にアクセスしてChromeをダウンロードしてください。
ここではWindowsの場合のインストール手順を解説しています、他のOSを使用している場合はGoogleサポートページを参照してください。

ダウンロードページからダウンロードしたら左下にあるダウンロードリストから、ChromeSetup.exe ファイルを開きます。

警告メッセージが表示された場合は [インストールする] をクリックして [はい] を選択します。
開いたら自動でインストールされすぐに使える状態になります。

✅Windowsを使っているとやたらMicrosoft Edgeを推奨されますがすべて無視しましょう！

コードエディタのインストール

TODO メモ帳とコードエディタを比較した画像

次にHTMLファイルの中身やCSS見れるようにコードエディタを用意していきましょう。
メモ帳など初期アプリでもコードを確認したり書き換えたりできますが、コーディングには向きません。
メモ帳などでは一つのファイルを一つのウィンドウで開いてしまうため複数のファイルを扱うには非常に効率が悪いです。
既に使っているエディタがない方や特にこだわりのない方はVisual Studio Codeをダウンロードしましょう！

おすすめのエディタ