HTML・CSSで準備するものとは？
プログラミングの学習を始める前にツールの準備を行う必要があります。
初心者の方は、どんなツールが必要か準備段階で戸惑う人も多いのではないでしょうか？
実はプログラミングを行う上で準備するものは2つだけなんです！
そこで今回は、初心者でも簡単に準備できる方法を解説します。
テキストエディタ
「テキストエディタ」は、HTMLなどのプログラミング言語を書くために必ず必要になるツールです。
一般的にテキストデータを入力するものと同じであることから、
パソコンに入っているメモ帳機能を使用することも可能です。
しかし、効率的に使用するためにはコードを書く専用のテキストエディタを使用することがおすすめでしょう。
テキストエディタの主な機能として
- 予測変換
- 自動インデント機能
- 入力補完機能
- 文字列検索
などさまざまな機能がついているので、慣れてくると効率的にコードを打つことができますよ！
ブラウザ
「ブラウザ」は、テキストエディタを使用して書いたコードを見るために使用します。
ブラウザの中には、インターネットエクスプローラーやSafariなど
みなさんがインターネットに接続するために使うツールのことを呼んでいます。
自分が書いたHTMLなどをブラウザを使用して確認することで、
Webページとしてどのように見えるかを表示してくれます。
Webデザインをする人には「Google Chrome」が使いやすくおすすめです。
無料で使うことができるので、ダウンロードしておきましょう！
テキストエディタの準備方法
テキストエディタの中には、さまざまな種類がありますが
今回はMicrosoft社開発「Visual Studio Code」（VSCode）を使って
実際にダウンロードしてみましょう！
VSCodeは、公式ホームページから無料でダウンロードすることができます。
公式ホームページを開き、「Download」を押します。
使用しているパソコンに合わせてダウンロードファイルを選択しましょう。
- MacOS
- ダウンロードボタンを押すと「VSCode-darwin.zip」がダウンロードされます。
- ダブルクリックし、解凍しましょう。
- アプリケーションフォルダへ移動して、ダウンロード完了です。
- WindowsOS
- ダウンロードボタンを押すと「VSCodeUserSetUp.exe」がダウンロードされます。
- 案内に沿ってインストールを進めましょう。
- 「Visual Studio Code セットアップウィザードの完了」の画面が表示されたらインストール完了です。
ブラウザの準備方法
GoogleChromeも無料でダウンロードすることが可能です。
以下のURLからダウンロードを行いましょう！
- MacOS
- お使いのMacに対応したChromeバージョンを選択します。
- Macのプロセッサを確認してから、
手順に従ってダウンロードを行いましょう。 - Chromeのバージョンを選択できたら、
「googlechrome.dmg」ダウンロードが開始します。 - 「googlechrome.dmg」を開き、アプリケーションフォルダへ
ドラックしましょう。 - 移動が完了したら、ブラウザインストールの完了です。
- WindowsOS
- ダウンロードボタンを押し、利用規約に進んでいくと「ChromeSetUp.exe」がダウンロードされます。
- 「ChromeSetUp.exe」をクリックすると、
自動的にダウンロードとインストールが始まります。 - Chromeのインストールが終了すると自動的にChromeが起動し、
インストール完了になります。
HTML・CSSを勉強しよう！
エディタやブラウザのインストールが完了すると、
いよいよHTML・CSSの勉強を始める準備が揃います。
これらのツールはコードを書く際にたくさん使うため
使い方もコードを書きながらマスターできると良いでしょう！
自分で使い比べてみるのこともおすすめです！
