HTML プログラミング

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

投稿日:2019年1月2日 更新日:

今回はプログラミング経験ゼロの方でも分かる、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 をダウンロードしましょう!

準備手順

1.ダウンロード

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

2.インストール

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

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


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

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

テキストエディタとは

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

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

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

準備手順

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

1.ダウンロード

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

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

2.インストール

ダウンロードの際に、デスクトップかどこかに以下のような 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の入門編はこちら

 

­

-HTML, プログラミング
-,


comment

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

関連記事

【初心者向け】HTMLの基本的なタグの使い方

今回はHTMLの基本的なタグの使い方を解説していきます! 前提条件 HTMLの環境構築が済んでいること 「HTMLはタグを使って書く。」の意味が分かる HTMLの環境構築が済んでいない方はまずこちらの …

【初心者向け】HTMLとは?【入門】

­プログラミングを始めてやる方やホームページを作りたい方がまず目にするのが「HTML」だと思います。 しかし、 「そもそも、HTMLって何?なにができるの?」「ちょっと使ってみたけど、なんだかよくわか …

【初心者向け】HTMLの基礎知識【入門】

入門編ではHTMLがどのようなものか概要を解説しました。 今回はHTMLを書くにあたっての基礎知識をご紹介します。 入門編をまだご覧になっていない方はこちらからどうぞ 自分でHTMLを書きながら学習を …

プログラミング初心者が最初にやるべきこと

「プログラミングを始めたいけど、何から勉強すればいいかわからない…」「プログラミング言語?なにそれ、おいしいの?」 そのように悩んでいる方も多いのではないでしょうか。 そこでこの記事では、 …