本記事では、
HTMLを開発する環境を自宅のPCに構築する手順を
ご紹介いたします。
本記事は、
- HTMLの勉強をしたいが始め方が分からない方
が、
HTMLの開発を始められる記事となっております。
ぜひ、ご覧ください。
ちなみに、
HTMLって何？という方は、
HTMLについてご説明した記事をご覧ください。
開発に必要なツール
HTMLを開発するのに必要なツールは、
- テキストエディタ
- ブラウザ
の2つです。
えっ、これだけ？
と思った方も多いのではないでしょうか？
はい、これだけです(笑)
基本的に、
ブラウザがあれば動作確認が出来てしまうのが、
HTMLの最大の魅力かなと思っています。
ただ、これだけだとあんまりなので、
私が使用している開発環境をご紹介いたします。
テキストエディタ
テキストエディタは、
プログラミングを行うために使用する、
テキスト編集用のツールです。
(Windosのメモ帳はデフォルトのテキストエディタです)
ちなみにテキストエディタでおすすめなのは、
です。
用途に応じてカスタマイズでき、
MacOSユーザーも使用することが出来ます。
ただ、ぶっちゃけ、初心者の方は、
Windowsにデフォルトでついている
”メモ帳”
とかでなければ何を使っていただいても問題ありません(笑)
メモ帳だけは、
プログラミングに向いていないため
やめてください(笑)
私は今後も
Visual Studio Codeを使用して記事を作成していくので、
一緒に学ぶ方で、特にこだわりのない方は、
こちらから
インストールしてください。
ブラウザ
ブラウザは、
HTMLで出来たプログラムを表示するために使用するツールです。
と、分かりづらい言い方をしましたが、
皆さんがインターネットを見るために使っている、
- Internet Explorer
- Micro Soft Edge
- Google Chrome
- Safari
- Fire Fox
- など。。。
になります。
そのため、プログラミング初心者は、
どのツールを用いていただいても大丈夫です。
私は
Google Chrome
を使用するため、
もし同じ環境で行いたい場合は
こちらから
インストールをお願いします。
おまけ
ツールというわけではありませんが、
設定しておいた方が良いPCの設定を一つご紹介いたします。
その設定とは、
拡張子を表示させる
です。
拡張子とは、
ファイルの種類を判別するための文字列で、
初期設定ではユーザーから見えないようになっています。
しかし、プログラミングを行う場合、
作成したプログラムがどの言語であるかを判別するために、
拡張子を修正することは必須となります。
そのため、拡張子が表示されるように設定を修正してください。
＜Windows＞
＜Mac＞
WebページのHTMLを見てみる
次に、一般のWebページのHTMLをのぞいてみましょう。
えっ、インターネットのページのHTMLって見れるの？
と思った方も多いかと思います。
はい、見れます(笑)
今から見る方法をご説明いたします。
① ”Google Chrome”を起動
② 右クリック
③ “ページのソースを表示”をクリック
これだけです(笑)
おそらく皆さんも、
謎の文字列が表示されたかと思います。
現時点では、内容は分からなくても問題ありませんが、
ブラウザを使用すると、
HTMLが見れることは覚えておいてください。
作成したHTMLを表示してみる
続いて、簡単なHTMLを表示してみましょう。
下記の手順を実行してみてください。
① 拡張子が”.html”の空ファイルを作成
② 下記のコードをコピーして貼り付け
<html><body>hello world</body></html>③ 作成したHTMLファイルをGoogle Chromeにドラッグ＆ドロップ
下記のような表示がされていれば成功です。
さいごに
ここまで来た方は、
HTMLを用いて、Webページを開発する環境が整ったと思います。
今回作成した環境を使用して、
ぜひ、Webページ作成の勉強をしていきましょう！
本記事をご覧いただきありがとうございました。
