HTMLを学習するための環境を整えていきましょう。
とは言っても、他のプログラミング言語のように複雑な環境構築は必要ありません。
必要なものはHTMLを書くソフトとHTMLを表示するソフトの二つで大丈夫です。
それぞれ解説していきます。
HTMLを書くソフト
HTMLコードはテキストエディターというソフトを使って書いていきます。エディターと略されて呼ばれることもあります。
テキストエディターとは？
テキストエディターとは簡単に言うと、高機能なメモ帳のようなものです。
普通のメモ帳だと以下のように、全ての文字が同じ色で表示されます。
プログラミング用のテキストエディターだと以下のようにコードの役割ごとに色分けしてくれ、もしエラーがあれば教えてくれたりもします。
メモ帳でも問題ないのですが、テキストエディターを使うことで大幅に作業効率を上げることが可能ですし、スペルミスなどのエラーに苦しめられることが少なくなり、コードの意味を理解するという本来の目的に忠実に学習を進めることが可能です。
テキストエディターはたくさんの種類がありますが、モダンコードでは無料のテキストエディター「Atom」を使っていきます。
Atomをインストールしよう
以下のリンクよりAtomの公式サイトを開きます。
トップページの[Download]をクリックし、Atomをダウンロードしてください。
ダウンロードが完了したら、「AtomSetup-x64.exe」をダブルクリックで開いてください。
するとこのような表示になると思います。しばらく待ちましょう。
しばらくすると、Atomが自動で立ち上がってくれます。
「untitled」以外のタブは今回不要ですので全て閉じましょう。
右下の[Plain Text]をクリックし「HTML」と入力してみてください。
「HTML」「HTML(GO)」「HTML(Rails)」など、複数出てくると思いますが、一番上の「HTML」を選択します。
この設定は、どの言語を書くのかによって変更します。CSSを書く場合は「CSS」を、PHPを書く場合は「PHP」を検索して選んでください。
以上でHTMLを書くためのソフトであるテキストエディターのダウンロード、インストール、設定が完了しました。
HTMLを表示するソフト
HTMLを表示するためのソフトは、WEBブラウザです。
WEBブラウザとは？
皆さんも普段からネットサーフィンや動画閲覧などで良く使われていると思います。
ブラウザには、ウィンドウズに標準で入っている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」ファイルをどのソフトで開くか設定していきます。順番に見ていきましょう。
学習を行うフォルダの作成
学習で作成するファイルを保存するフォルダを作成しましょう。
PC内のどこに作成しても大丈夫ですが、今回はデスクトップに作成することにします。
デスクトップで右クリックし、[新規作成]＞[フォルダー]をクリックします。ファイル名を「practice」と記載して保存してください。
これで学習を行うためのフォルダの作成が完了しました。
HTMLファイルの作成
先ほどインストールしたHTMLを書くためのソフトであるテキストエディターの「Atom」をたちあげてください。
右下の「Plain Text」をクリックし、検索窓に「HTML」と入力し、一番上にでてくる「HTML」を選択しておきましょう。
次に、以下のコードを書いていってみてください。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルサイト</title>
</head>
<body>
<h1>Hello World</h1>
サンプルサイトのトップページです。
</body>
</html>
[/html]
書き終わったら先ほど作成した「practice」フォルダに「index.html」という名前で保存してください。
「index」というファイルができたと思います。PCの初期設定では「.html」などの拡張子が表示されません。
これだと、なんのファイルか一目で判断が付かないので、ファイルフォルダの[表示タブ]＞[ファイル名拡張子を表示]にチェックを入れましょう。
これで、拡張子が常に表示される状態になりました。
先ほど保存したファイルが「index」から「index.html」になっていると思います。
HTMLを開くソフトを指定
次にこの「index.html」をどのソフトで開くか設定していきましょう。
「index.html」をクリックして選択された状態で右クリックし、[プログラムから開く]＞[別のプログラムを選択]をクリックします。
[Google Chrome]を選択し、[常にこのアプリを使って.htmlファイルを開く]にチェックを入れてて[OK]をクリックしてください。
「index.html」ファイルをダブルクリックして開いてみてください。
HTMLを表示するためのソフトであるウェブブラウザの「Google Chrome」が開かれ、このような画面になればOKです。おめでとうございます。初めてのWEBページです。こんな中途半端な感じで初めてのウェブページを表示させてしまってすみません。でもおめでとうございます。
これで「.html」の拡張子がついたファイルは常に「Google Chrome」が開かれるように設定できました。
以上でHTMLを学習する準備が整いました。
まとめ
これでHTMLを書くためのソフトであるテキストエディター「Atom」と、HTMLを表示するためのウェブブラウザ「GoogleChrome」の準備が整いました。
テキストエディターやウェブブラウザは他にもたくさんの種類があります。興味が出たら色々と試してみてください。
また、ファイルの拡張子が見えるように設定し、「html」ファイルをGoogleChromeで開く設定も行いました。
次回から、実際にHTMLの書き方を具体的に解説していきます。