メモ帳でできる!!簡単なHTMLの作り方を解説する【初心者向き】

  • PR
  • WEB制作
メモ帳でできる!!簡単なHTMLの作り方を解説する【初心者向き】
HTMLってどうやって作ることができるの?誰か詳しく教えてください!
お任せください!現役Web制作者のみやしもが簡単なHTMLの作り方を解説します!

PCやスマホを通じて日常的に見るWebサイトが『HTML』で作られていることは知っていても、実際にHTMLを作成する方法や手順を知らない方も多いのではないでしょうか。



そこで今回は『メモ帳』を使ってお手軽に実践できるHTMLの作成方法を詳しく解説していきます。この記事の内容は次の方におススメできます。



▼この記事が向いている方

  • HTMLの作成に必要なものや詳しい手順が知りたい
  • Webサイトの制作やプログラミングに興味がある
  • 自分がWebサイト制作に向いているか確認したい
記事の通りに作業を進めれば【約5分】でHTMLファイルが作成できますよ。
特別なツールが無くても作業できる内容です。気軽にサクッと試していって下さいね!!

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

HTMLの作り方を5ステップで解説

それではさっそくHTMLを作成する方法を解説します。今回はHTMLの作成方法を次の5ステップに分けて順番に解説していきます。



▼HTML作成方法5ステップ

  1. 空のテキストファイルを作成する
  2. HTMLのコードを貼り付ける
  3. 拡張子を表示できる様にする
  4. ファイルの拡張子を.htmlに変更する
  5. WebブラウザでHTMLファイルを開く

手順①:空のテキストファイルを作成する

まずは何も書かれていない『空のテキストファイル』を用意しましょう。



テキストファイルとは中身が文字だけでできた文章ファイルのことです。PCでは次の様にすると空っぽのテキストファイルが作成できます。またファイルを作成する場所はどこでも良いので、ひとまずデスクトップ上で作業を行いましょう。

HTMLの作り方_空のテキストファイルを作る方法1
空のテキストファイルを作成する①

▼Windowsの操作手順

  1. デスクトップ上で右クリック
  2. メニュー[新規作成->テキストドキュメント]を選択


▼Macの操作手順

  1. テキストエディットを起動して[新規書類]をクリック
  2. 何も書かれていない状態でデスクトップに保存する



以上の様に操作を行いデスクトップ上に空のテキストファイルが作成できればOKです。また作成したファイルの名前は、ひとまず「index」に変更しておきます。

HTMLの作り方_空のテキストファイルを作る方法2
空のテキストファイルを作成する②
以上の操作を行い、デスクトップに空のテキストファイルが作成出来たら次に進みましょう。

手順②:HTMLのコードを貼り付ける【コピペでOK】

空のテキストファイルが用意出来たら、今度はテキストファイルにHTMLのコードを貼り付けましょう。



HTMLのコードとは具体的に次の内容で実際のHTMLファイルの中身にあたります。



▼HTMLのコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>自分のホームページ</title>
  </head>
  <body>
    <p>こんにちは<p>
  </body>
</html>



上記をまるごとコピーしたら、そのまま先ほど作成したテキストファイルに貼り付けて保存しましょう。

HTMLの作り方_HTMLのコードを貼り付ける1
テキストファイルに貼り付けた状態

上記で貼り付けたコードは実際のHTMLの中身を表しています。色々とごちゃごちゃ書いてあるので意味不明だと思いますが、はじめは一つ一つは理解しなくても大丈夫ですよ。

空のテキストファイルにHTMLコードを貼り付けて保存すればここでの作業は終わりです。

手順③:拡張子を表示できる様にする

今度は自分のPCで拡張子を見える様に設定しましょう。



拡張子とはPCがファイルの種類を識別するために使う情報のことです。拡張子は具体的にファイル名の後ろに「ドット記号(.)」をはさむ形で3文字前後の文字列で表現されます。例えばJPEG画像の拡張子は次のようになります。

ファイルの拡張子
拡張子を表示できる様にする①
ただしWindowsやMaなどの標準設定では拡張子は非表示に設定されています。なのでまずはPC上の拡張子を見れる様にOSの設定を変更する必要があります。

PC上の拡張子を見れる様にするには次の様に操作します。

HTMLの作り方_拡張子を見える様にする
拡張子を表示できる様にする②

▼Windowsの操作手順

  1. エクスプローラーを開く
  2. メニュー[表示]を選択して[ファイル名拡張子]にチェックを入れる



▼Macの操作手順

  1. Finderを開く
  2. メニュー[Finder->環境設定]を選択する
  3. [すべてのファイル名拡張子を表示]にチェックを入れる



上記の操作が上手くいけば初めに作成したテキストファイルの名前が「index.txt」に変わると思います。ファイル名の後ろに付く「.txt」が、テキスト形式のファイルを表す実際の拡張子にあたります。

HTMLの作り方_拡張子を見える様にする_2
拡張子を表示できる様にする③

拡張子を知らない方にとっては不慣れな変化だと思いますが、様々なファイルを扱うWebサイト制作やプログラミングでは設定はほぼ必須とも言える重要な設定です。拡張子についてもう少し詳しく知りたい方には次の記事もおススメです。

手順④:ファイルの拡張子を.htmlに変更する

続けてテキストファイルの拡張子を次の様に変更します。



▼拡張子の変更内容

  • 【変更前】index.txt
  • 【変更後】index.html
HTMLの作り方_拡張子を変更する_1
ファイルの拡張子を.htmlに変更する①
拡張子を変更する際には『拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?』というメッセージが表示される場合がありますが、続けて『OK』を押せば問題ありません。

また拡張子を変更すると、ファイルを表すアイコンの見た目が次の様に変化します。

HTMLの作り方_拡張子を変更する_2
ファイルの拡張子を.htmlに変更する②

何故アイコンが変わったかというと、ファイルの拡張子を変更したことでファイルの種類が「テキストファイル」から「HTMLファイル」に変わったからです。このためPCがファイルの種類を識別しなおしたことで、結果としてアイコンもHTMLに対応したアイコンに変更されたのです。



また「index.html」という名前は、そのファイルがWebサイトのトップページである事を意味する特別なファイル名です。今回は1つのHTMLファイルしか作りませんが、意味のあるファイル名だと理解しておきましょう。

上記の通りデスクトップ上に『index.html』というファイルが作成できればHTMLファイルの作成は終わりです。

手順⑤:WebブラウザでHTMLファイルを開く

最後にWebブラウザを使ってHTMLファイルを開いてみましょう。



HTMLファイルを開く方法は簡単で、作成したHTMLファイルをダブルクリックすれば、そのままWebブラウザで開く事ができます。

HTMLの作り方_Webブラウザで開く_1
HTMLファイルをダブルクリック

ここまでの作業がうまくいけば、Webブラウザを通じて次のような画面が開けるはずです。

HTMLの作り方_Webブラウザで開く_2
Webブラウザで開いたHTMLファイル

またHTMLファイルを開く際にはPCでデフォルトで設定されているWebブラウザが使用されます。今回の場合だと『GoogleChrome』を使用しています。Webブラウザには他にも様々な種類がありますが、基本的にHTMLファイルを開くことができれば何を使っても問題ありません。

以上でHTMLファイルの作り方の解説は終わりです。

HTML作成のポイント解説

ここからは作業過程で登場した用語の説明や、実際のWebサイトの制作で役立つ情報など、HTML作成のポイントを引き続き解説していきます。

ファイルの拡張子について

HTMLファイルの拡張子について

今回はPC上で『拡張子』を見える様にしてテキストファイルの拡張子をHTMLに変更するという作業を行いました。



WindowsやMacのデフォルトでは非表示になっている拡張子ですが、とはいえ実際のWeb制作やプログラミングの作業は拡張子を表示させて行うことがほとんどです。実際にファイルの拡張子を判別したり変更するといった作業も頻繁に行われます。

このためWeb制作やプログラミングを行う上では、ファイルの拡張子はあらかじめ見える様に設定しておくのが推奨です。

拡張子の仕組みについてもう少し詳しく知りたいという方には拡張子とは?意味や役割を分かりやすく解説次の記事もおススメです。

テキストエディタについて

HTMLの編集にはテキストエディタを使おう

HTMLファイルの編集は『テキストエディタ』を使って行いましょう。



テキストエディタとは文章ファイルを編集するために特化したソフトのことで、利用すればHTMLをはじめ複雑なコードの編集も見やすく効率的に行うことができます。

テキストエディタのイメージ
テキストエディタのイメージ

今回は簡単にWindowsの『メモ帳』を使った解説でしたが、実際のWeb制作やプログラミングではテキストエディタを使用するのが標準的です。



またテキストエディタにはMicrosoftが提供するVisual Studio Codeが定番です。Visual Studio Codeのインストール方法については次の記事で詳しく確認できます。

HTMLを閲覧するWebブラウザについて

HTMLを閲覧するWebブラウザについて

自分が作成したHTMLファイルの内容は最終的にWebブラウザを使って閲覧できます。Webブラウザには次のものが代表的です。



▼代表的なWebブラウザ

  • Google Chrome
  • Microsoft Edge
  • FireFox
  • Safari



Webブラウザは通常インターネット上のWebページを閲覧するソフトですが、一方ではローカルPC上で自分が作成したHTMLの内容も閲覧できます。



このためWebブラウザを使えば、自分作成したHTMLが「実際にどのようにWebページとして表現されるのか?」という事を知ることが出来ます。

HTMLの編集では『テキストエディタ』『Webブラウザ』を組み合わせて使うのが一般的です。同じファイルでもツールによって見え方が違うことを覚えておきましょう。

HTMLをインターネットに公開する方法

自分が作成したHTMLをインターネットに公開するには、例えば次のイメージでHTMLファイルの一式をWebサーバーにアップロードする必要があります。

アップロード作業のイメージ
アップロード作業のイメージ

上記の作業では『FTPソフト』『Webサーバー』といった専門的なツールを使うの難易度は高めです。しかし覚えれば自分で作成したHTMLファイルをインターネットに公開して"自分だけのWebサイト"を構築することも可能となります。

スキルとしても有用なので、今回の作業を通じてWebサイト制作に興味が出た方はHTMLのアップロードにも挑戦すると良いでしょう。

HTMLをアップロードする詳しい手順については次のHTMLファイルをアップロードする方法の記事から確認できます。

この記事のまとめ

この記事ではHTMLの作り方が知りたいという方に向けて、誰でもできる簡単なHTMLの作成方法について解説しました。



▼HTML作成方法5ステップ

  1. 空のテキストファイルを作成する
  2. HTMLのコードを貼り付ける
  3. 拡張子を表示できる様にする
  4. ファイルの拡張子を.htmlに変更する
  5. WebブラウザでHTMLファイルを開く



いずれもWebサイト制作やプログラミングの学習にご活用いただきたい情報です。



このほか当ブログでは【Web制作】で役立つ情報を掲載しています。あわせてご活用くださいませ。



▼関連記事を探す

Web制作の記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!