02.HTMLの学習準備

HTMLの学習をする準備

HTMLを学習するための環境を整えていきましょう。
とは言っても、他のプログラミング言語のように複雑な環境構築は必要ありません。
必要なものはHTMLを書くソフトとHTMLを表示するソフトの二つで大丈夫です。
それぞれ解説していきます。

 

HTMLを書くソフト

HTMLコードを書くためのソフトは、テキストエディターといいます。エディターと略されて呼ばれることもあります。
テキストエディターとは簡単に言うと、高機能なメモ帳のようなものです。
普通のメモ帳だと以下のように、全ての文字が同じ色で表示されます。

テキストエディターだと以下のようにコードの役割ごとに色分けしてくれ、もしエラーがあれば教えてくれたりもします。

メモ帳でも問題ないのですが、テキストエディターを使うことで大幅に作業効率を上げることが可能ですし、スペルミスなどのエラーに苦しめられることが少なくなり、コードの意味を理解するという本来の目的に忠実に学習を進めることが可能です。
テキストエディターはたくさんの種類がありますが、モダンコードでは無料のテキストエディター「Atom」を使っていきます。

 

Atomのインストール

以下のリンクよりAtomの公式サイトを開きます。

Atom(https://atom.io/)

 

トップページの[Download]をクリックし、Atomをダウンロードしてください。

 

ダウンロードが完了したら、「AtomSetup-x64.exe」をダブルクリックで開いてください。
するとこのような表示になると思います。しばらく待ちましょう。

 

しばらくすると、Atomが自動で立ち上がってくれます。
「untitled」以外のタブは今回不要ですので全て閉じましょう。

 

右下の[Plain Text]をクリックし「HTML」と入力してみてください。

 

「HTML」「HTML(GO)」「HTML(Rails)」など、複数出てくると思いますが、一番上の[HTML]を選択します。
この設定は、どの言語を書いていくかによって変更します。CSSを書く場合は「CSS」を、PHPを書く場合は「PHP」を検索して選んでください。

 

以上でHTMLを書くためのソフトであるテキストエディターのダウンロード、インストール、設定が完了しました。

 

HTMLを表示するソフト

HTMLを表示するためのソフトは、ウェブブラウザです。
皆さんも普段からネットサーフィンや動画閲覧などで良く使われていると思います。
ブラウザには、ウィンドウズに標準で入っているInternet ExplorerやMicrosoft Edge、Macに標準で入っているサファリなど、様々な種類のものがあります。
今回はGoogleが提供している「Google Chrome」を使用します。こちらも無料です。

 

Google Chromeのインストール

以下のリンク先より、公式サイトを開きます。

Google Chrome(https://www.google.com/intl/ja/chrome)

 

[Chromeをダウンロード]をクリックしてください。

 

利用規約が表示されますので一通り目を通し、[同意してインストール]をクリックしてください。ダウンロードが始まります。

 

インストーラの「ChromeSetup.exe」がダウンロードされるので、これダブルクリックで実行します。ユーザーアカウント制御のダイアログが表示されたら[はい]を選択するか、Windowsの管理者アカウントで認証してください。
インストールが完了したら、Google Chromeのウェルカムページが開かれます。

 

以上でHTMLを表示するソフト、ウェブブラウザのダウンロード、インストールが完了しました。

 

まとめ

これでHTMLを書くソフトであるテキストエディターと、HTMLを表示するためのソフトのウェブブラウザの準備が整いました。
テキストエディターやウェブブラウザは他にもたくさんの種類があります。興味が出たら色々と試してみてください。
次回から、実際にHTMLの書き方を解説していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です