【HTML&CSS】開発環境を構築しよう！用意が必要なツールとは？

必要なツール

WebページはHTMLやCSSを記述して作成していきます。

HTMLやCSSのファイルを作成して内容を記述をするための「テキストエディタ」と作成したページを確認するための「ブラウザ」を準備します。

テキストエディタ

テキストエディタとは文字や記号などのテキストを作成したり編集したりするソフトウェアです。

テキスト（文字）をエディタ（編集）するという名前そのままの機能を持ったソフトウェアです。

HTMLファイルやCSSファイルの内容の作成や編集などは、このテキストエディタを使って行います。

Macでは「テキストエディット」、Windowsでは「メモ帳」といったテキストエディタが標準でインストールされています。

テキストエディタにも種類がたくさんありますが、ソースコードを記述することに特化したテキストエディタを選びます。

おすすめのテキストエディタ

おすすめは、使いやすくて拡張機能が豊富な「Visual Studio Code（VS Code）」というテキストエディタです。

ソースコードを記述するときに手助けをしてくれる便利な拡張機能が豊富にあります。
使いやすいためコーダーやプログラマーが好んで使っているエディタになります。

Mac、Windowsどちらでも利用できるので、特にこだわりがなければこちらのエディタをインストールしましょう。

テキストエディタをインストールする方法

おすすめである「Visual Studio Code（VS Code）」をインストールする方法を解説します。

日本語対応にする

最初は英語表記になってしまいます。

日本語表示にするには専用の拡張機能をインストールする必要があります。

手順は簡単なので以下手順でインストールしてみてください。

おすすめの拡張機能

ブラウザ

「ブラウザ」とはWeb上の情報を閲覧するためのアプリやソフトウェアのことです。

絵を書くときはペイントアプリ、写真を撮るときはカメラアプリを使うように、
Webにある情報を見るためにもその専用のソフトウェアを使います。

Macだとコンパスマークの「Safari」、Windowsだと「e」マークの「Edge」という名前のブラウザが標準でインストールされています。

WebページはHTMLファイルで作っていきますが、その作成したファイルの動作確認をするときにブラウザを使います。

おすすめのブラウザ

ブラウザであれば基本的に機能が同じなのでどれを使っても構いません。
標準でインストールされているブラウザでも良いでしょう。

その中でもGoogle社が開発提供している「Chrome」というブラウザをおすすめします。

世界的にも1番使われていて、使いやすく拡張機能も充実しているので便利に使うことができます。

ブラウザをインストールする方法

おすすめである「Chrome」をインストールする方法を解説します。

ツールを用意したら

テキストエディタとブラウザの準備ができたらWebページを作成できるようになります。

用意したツールを使ってHTMLファイルを作成してみましょう。

まとめ