自宅のパソコンにHTMLとCSSの開発環境を設定する方法を紹介します。
今回紹介するのは、OSがWindowsの場合になります。
必要な作業として、
・テキストエディタ（Visual Studio Code）のインストール
・ブラウザ（Google Chrome）のインストール
の2点になります。
それでは早速やっていきます。
まず最初に、テキストエディタのVisual Studio Code（VSCode）のインストールを行います。
公式サイトはこちらになります。
サイトを開くと、ダウンロードのボタンがWindows用になっているので、そのままクリックしてダウンロードしてください。
インストールが完了したら、このような画面になっていると思います。
これでVSCodeの準備は完了です。
次にブラウザのGoogle Chromeのインストールを行います。
既にインストールをされている方が多いと思いますので、公式サイトのリンクだけ貼っておきます。
もし初めてインストールされる方は、公式サイトを開いたらダウンロードが表示されているので、それをクリックして下さい。
これで準備は整いました。
とても簡単に設定できたと思います。
VSCodeとGoogle Chromeで作業環境は整いましたが、このままでは作業領域がないので、作業用のフォルダを作成します。
名前は自分が分かれば何でも良いのですが、今回は「test」と名前を付けたフォルダをデスクトップに保存しました。
フォルダが作成できれば、VSCodeの画面に戻って、「Open folder」から先ほどのtestフォルダを開いて下さい。
すると、VSCode上でデスクトップに作成したtestフォルダを開く事ができました。
VSCodeにtestフォルダが作成できましたので、testフォルダの中にHTMLとCSSのファイルを作成します。
testフォルダの右側に並んでいるアイコンの1番左にあるNew Fileを開きます。
New Fileを開くと、入力欄が出てくるので、「index.html」と入力します。
これでHTMLファイルが作成されました。
HTMLファイルの作成と同じ手順で、CSSのファイルも作成します。
CSSのファイルには、「stylesheet.css」と入力します。
これでHTMLとCSSの2つのファイルを作成する事ができました。
開発環境は整ったので、後はコードを書くだけになります。
HTMLとCSSの学習は、無料で学習できるサイトがたくさんあります。
プログラミングの無料お勧め学習サイト3選にお勧めを書いていますので、参考にして頂ければと思います。
＊HTMLとCSSの学習はコードクロニクルには執筆時はありません。
プログラミングの記事一覧はこちら
