HTMLの一番簡単な開発環境&実行方法！一瞬でできます！

HTMLはコードを自分で記述するタイプのプログラミング言語の中でもっとも簡単で、なおかつ初めてのプログラミングに選ばれることが多いです。これからプログラミングを勉強したいから、とりあえずまずはHTMLからやってみよう、といった感じです。

実際HTMLは誰でも簡単に試せる言語なので、とりあえずプログラミングをやってみるのにおすすめです。

しかしいざHTMLをやろうと思って調べると、いろいろなツールのインストールや設定がおすすめされていて何から手を付けて良いのかわからない、といったこともあるかもしれません。

そこでこのページでは、インストールや設定作業なしで、すぐにHTMLを試せる方法をご紹介します。パソコンが苦手な方でも簡単かつ早くできるのでご安心ください。

HTML開発に必要なもの

HTML開発に必要なものは以下です。

以上です。上記のツールがあればすぐにHTMLを書いて実行することができます。おそらくどちらもすでにパソコンに入っている方が多いと思うので、新たに何かインストールする必要はないということです。

HTMLのファイル作成から実行の手順は以下です。

これだけです。それでは実際にやってみましょう。

まず適当な場所で右クリックして、「新規作成」→「テキストドキュメント」と選択します。

ファイル名はそのままで問題ないので、「新しいテキストドキュメント.txt」ができました。

拡張子が表示されていれば良いのですが、表示されていない場合Windowsなら以下のように表示させてください。

まず「スタート」から「コンピューター」を選択します。

左上の「整理」→「フォルダーと検索のオプション」と選択します。

「表示」タブを選択し、「登録されている拡張子は表示しない」のチェックを外します。

これで拡張子が表示されたはずです。

とりあえず意味はよくわからなくても良いので、先ほど作成したファイルに以下のコードを記述して保存してください。

<html>
  <head>
    <title>ここはタブです</title>
  </head>
  <body>
    <h1>ここは見出しです</h1>
    <p>ここはテキストです</p>
  </body>
</html>

先ほど作ったファイルの状態は以下です。

この拡張子を「新しいテキストドキュメント.html」に変更します。以下のようなポップアップが出てくるかもしれませんが、「はい」を選択して変更して問題ありません。

そうするとWEBブラウザのアイコンに変身します。

最後にファイルを実行します。手順は以下です。

ファイルを右クリック　→　プログラムから開く　→　Google ChromeなどのWEBブラウザを選択する（ダブルクリックやブラウザへのドラッグ&ドロップでも良い）

アイコンが自分の開きたいWEBブラウザになっている場合、そのままダブルクリックかブラウザへのドラッグ&ドロップでもで問題ありません。

そうすると、以下のようにWEBページが開きます。

これでWEBページができました。

HTMLを編集する場合、ファイルを右クリックしてメモ帳などのテキストエディタで開くか、テキストエディタを開き、そこにファイルをドラッグ&ドロップして開くことも可能です。

これでプログラミングの第一歩を踏み出せました。今まで「プログラミングやってみたいけれど難しそうだな」「面倒だな」と思っていた方はこれでスタートが切れたのではないでしょうか。

もちろんここからいろいろ試行錯誤して上達していくのですが、0と1では随分違います。少なくとも簡単なWEBページを表示することができたので、ぜひここからスキルアップしていってください。

HTMLを勉強するための書籍は以下の記事で紹介しているので、ご参照ください。