こんにちは！ProgRiroです。
今回のテーマは「HTMLの環境構築」です。
Webサイトを作成するにあたって、必ず学習すると言えるHTMLについて、画像を交えながら簡単に解説していこうと思います。
Contents
1. 環境構築とは
ズバリ、環境構築とは特定のソフトウェアが動作する環境を整える作業を意味します。
つまり、HTMLの環境構築とはHTMLが動作する環境を整える作業を意味しているのです。
環境構築をすることによって作業速度（学習速度）が格段に上がります。
2. 環境構築をしよう
ここから実際に環境構築をしていきます。以下の手順に沿って構築してみてください。
2-1. 環境構築に必要なもの
- テキストエディタ
- ブラウザ
- フォルダ
- ファイル
以上4つがあれば可能です。早速、始めていきましょう！
2-2. テキストエディタとは
テキストエディタとは、テキストのみが記載されたファイルを作成、編集、保存するためのソフトウェアです。
初めから標準でダウンロードされているテキストエディタは
- （Mac）テキストエディット
- （Windows）メモ帳
です。
これらでも編集可能ですが
- 補完機能（文字不足分を自動で補完する）
- 視覚補助（文字を見やすく表示する）
といった機能を利用できるテキストエディタが存在します。
より効率的に学習が進められるように新たにテキストエディタを入手しましょう。
このブログでは「Visual Studio Code」（無料）というテキストエディタを使用します。
既にご自身でお気に入りのエディタがあれば、そちらで進めていってもOKです！
2-3. Visual Studio Code の導入
Visual Studio Code には
- 無料
- Mac でも Windows でも可
- 開発が楽になる拡張機能
- 動作が軽い
といった特徴があります。
以下のURLにアクセスして Visual Studio Code をダウンロード後インストールしてください。
https://code.visualstudio.com/download
2-4. Visual Studio Code の起動
インストールした Visual Studio Code を起動してみましょう。
起動後は以下のように表示されるかと思います。
次に ①「フォルダを開く…」をクリックします。
すると、新規フォルダーを作成する画面が現れます。新規フォルダーを作成したい任意の場所で ②「新規フォルダ」をクリックします。
新規フォルダの名前の入力を求められるので ③任意のフォルダ名に変更して、④「作成」をクリックします。
これでフォルダが作成されたので、⑤「開く」をクリックします。
左のバーナーに、先程作成したフォルダの名前（大文字）が表示されていれば、完了です。
2-5. ブラウザ（Google Chrome）の導入
プログラマにとって便利な機能が備わっている Google Chrome を以下のURLからインストールしてください。
https://www.google.com/intl/ja_ALL/chrome/
正常にインストールが終わったら環境構築完了です。
3. 最後に
HTMLを学習する準備が整いました。お疲れ様でした！
次回から、プログラムについて学習を進めていきます。ここから楽しくなってくるので頑張っていきましょう！
最後までお読みいただき、ありがとうございました。
