web制作をするにあたって、まずはパソコンを開発可能な状態に整えましょう。
と言っても、web制作の基本的な領域においてはあまり準備はいりません。コードを書くために必要なテキストエディタを用意すれば良いです。
そのテキストエディタですが、いくつか種類がありやや迷うかもしれません。
本メディアにおいては筆者がVisual Studio Code(VSCode)を使用していることもありVSCodeに関する解説が中心になりますので、VSCodeのインストール手順・使い方を紹介します。
まずはVSCodeのダウンロードページにアクセスします。https://code.visualstudio.com/download
![](https://eclair.media/wp-content/uploads/2022/03/code.visualstudio.com_downloadNest-Hub--1024x600.png)
アクセスしたら、お使いの環境に合わせてダウンロードするものをお選びください。(以下Macの場合で解説します。)
ロゴの下のボタンを押すと、ファイルがダウンロードできます。
![](https://eclair.media/wp-content/uploads/2022/03/vscode-2-1024x600.jpg)
次の画像のようなファイルがダウンロードできたと思います。
![](https://eclair.media/wp-content/uploads/2022/03/スクリーンショット-2022-03-07-12.52.25.png)
ダウンロードしたファイルを開くとアプリケーションのファイルが展開されます。そのファイルを「アプリケーション」フォルダに配置すれば完了です。
![](https://eclair.media/wp-content/uploads/2022/03/ezgif-2-a28b404536.gif)
VSCodeを開くとこんな画面になると思います。
新規ファイルは「ファイル」→「新規ファイル」から作成できます。
![](https://eclair.media/wp-content/uploads/2022/03/スクリーンショット-2022-03-11-11.10.11-1024x577.png)
サイト制作においては、HTMLファイルとCSSファイルを両方触ることが多いと思います。
そんな時に、2つのファイルを同時に開いて編集すると効率が良いです。
![](https://eclair.media/wp-content/uploads/2022/03/vscode-double-1-1024x335.png)
画像のように2つ以上のファイルを開いている状態で、右上の赤枠で示したボタンを押すと・・・
![](https://eclair.media/wp-content/uploads/2022/03/スクリーンショット-2022-03-11-11.31.34-1024x624.png)
このように画面に2つのファイルを表示させることができます。
これならHTMLを見ながらCSSを書けます。
お使いのPCのスペックによってはVSCodeの動作が重く開発しにくい場合があります。その場合は軽量なテキストエディタを選びましょう。
代表的なものに「Sublime Text」がありますので、VSCodeを試してみて動作が重い場合はそちらもお試しください。
Sublime Textダウンロードページ→https://www.sublimetext.com/download
ということでテキストエディタの導入でした。コーディングを始める前に、まずは自分のパソコンの環境を整えましょう。
また、より上手にVSCodeを使いこなしたい方はこちらの記事もご覧ください。
![](https://eclair.media/wp-content/uploads/2022/03/eyecatch-vscode-160x160.png)