誰でも分かる！HTMLの環境構築方法

今回はプログラミング経験ゼロの方でも分かる、HTMLの環境構築を解説していきます！

「そもそもプログラミングでやりたい事が決まってない…」

という方はまず「プログラミング初心者が最初にやるべきことがわかる」を読んで下さい。

環境構築とは

PCを買ってプログラミングを始めようと思っても、すぐにはできるわけではありません。

そこで、プログラミングを始められるように環境を整える必要があります。それが「環境構築」です。

今回はHTMLの環境構築をしますが、今回用意する「Google Chrome」と「Atom」は他の言語を勉強する時にも使います。

ですから、プログラミングを始めようと思っている方は、ぜひこの記事を参考にして環境構築をやってしまいましょう！

Webブラウザを用意する

Webブラウザとは

Webブラウザとは、「ホームページなどを見るときに使う道具」です。

今このサイトが見れているのも、Webブラウザが動いているからです。

例えば、

• Google Chrome
• Internet Explorer(IE)
• Microsoft Edge
• Mozilla Firefox
• Safari (iPhoneやMacなどのApple製品)

などなど、たくさんあります。

なかでも「Google Chrome」がオススメです。

さっそくGoogle Chrome をダウンロードしましょう！

準備手順

１．ダウンロード

Google Chromeの公式サイト（https://www.google.co.jp/chrome/）にアクセスして「CHROMEをダウンロード」をクリックしてダウンロードしてください。

２.インストール

ダウンロードの際に、デスクトップかどこかに以下のようなChromeSetup.exeファイルができると思います。これをクリックしてインストールを済ませてください。インストール後はこの ChromeSetup.exe は消しましょう。

すると、以下のようなアイコンがデスクトップにできるので、クリックしましょう。

以下のように、Google Chromeの検索画面が開けていれば完了です。

­テキストエディタを用意する

テキストエディタとは

テキストエディタとは、「文書を編集するためのソフト」です。

これを使うことでプログラムを書くことができます。

エディタにはあらゆる種類がありますが、今回は無料で使え現役エンジニアにも使われている人気の高い「Atom」を使っていきましょう！

準備手順

準備手順はテキストエディタと同じです！

１．ダウンロード

Atomの公式サイト（https://atom.io/）にアクセスして黄色の「Download」をクリックしてダウンロードしてください。

※Windowsの方は黄色いボタンの上に「Windows」、Macの方は黄色いボタンの上に「Mac」と書かれてあることを確認してください。

２．インストール

ダウンロードの際に、デスクトップかどこかに以下のような AtomSetup-x64.exe ファイルができると思います。これをクリックしてインストールを済ませてください。インストール後はこの AtomSetup-x64.exe は消しましょう。

­

すると、以下のようなアイコンがデスクトップにできるので、クリックしましょう。

これをクリックして起動したら完了です。最初は起動するのに数分かかりますがゆっくりと待ちましょう。

以上で準備は終わりです。

さっそく使っていきましょう！

HTMLファイルの作成

次はAtomでファイルを編集して、Google Chromeで表示してみましょう！

フォルダの作成

まずはデスクトップに、ファイルをまとめるためのフォルダーを作ります。

次のようにデスクトップを右クリックしてフォルダを作成してください。

右クリック→新規作成>フォルダー
名前は「html_lesson」にしています。

ファイルの作成

­次にファイルを作成します。

右クリック→新規作成>テキストドキュメント
名前は「hello.html」にしています。

次にAtomでファイルを開きます。

File>Open Fileをクリックした後に、デスクトップ上にある hello.html を選択してください。

※英語表記になっていますが、日本語表記にする方法は別の記事でご紹介します。また、Atomに最初に入れておくべき便利な機能なども別の記事でご紹介します。

以下のコードをコピーしてAtomに貼り付けてください。

貼り付けたらCtrl+Sを押して保存してください。Atomでは下の青い丸が消えたら保存完了です。

HTMLをブラウザで表示

ここまで出来たら後はブラウザ上で表示するだけです。

次のようにGoogle Chromeで表示してみましょう！

hello.htmlを右クリック→プログラムから開く>Google Chrome

以下のように表示されていたら成功です。

­まとめ

いかがでしたか？

HTMLの環境構築を解説しました。

これでHTMLを書く準備は整ったので、どんどん進めていきましょう！

次のステップ

HTMLの入門編はこちら

 

­