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

HTMLの簡単な開発環境と実行

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

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

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

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

スポンサーリンク

HTML開発に必要なもの

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

  • テキストエディタ(メモ帳など)
  • WEBブラウザ(Google Chromeなど)

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

HTMLのファイル作成~実行まで

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

  1. テキストドキュメントを作る
  2. 拡張子が表示されない場合のみ、拡張子の表示設定を行う(拡張子が表示されている場合は飛ばす)
  3. HTMLのコードを記述する
  4. ファイルの拡張子を「.html」に替える
  5. ファイルを実行する

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

①テキストドキュメントを作る

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

ファイルを作る

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

②拡張子が表示されない場合のみ、拡張子の表示設定を行う

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

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

スタートからコンピューターを選択

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

整理とフォルダー検索のオプション

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

表示タブから拡張子設定

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

③HTMLのコードを記述する

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

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

④ファイルの拡張子を「.html」に替える

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

新しいテキストドキュメント.txt

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

拡張子を変更する

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

新しいテキストドキュメント.html

⑤ファイルを実行する

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

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

ファイルを実行する

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

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

タブ

テキスト部分

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

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

プログラミングの第一歩を踏み出した!

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

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

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

プログラミング初心者がHTML&CSSを学ぶのにおすすめの書籍

タイトルとURLをコピーしました