HTMLファイルの作り方

HTMLファイルは誰でも簡単に作成できます

HTMLは、誰でも簡単にウェブページを制作できるように設計されたマークアップ言語です。基本的には全てがテキストだけで構成されているため、高性能なパソコンや特別なソフトウェアは必要ありません。

HTMLファイルを作る手順はとても簡単です。テキストファイルを新規で作成し、その中にHTMLを記述したら、その内容を保存して拡張子を「.html」に変えるだけです。さっそく詳しい手順を見ていきましょう。

HTMLファイルを作る準備

まずは、次のサンプルの<html>～</html>までを選択してコピーして下さい。


<html>
	<head>
		<title>ここにタイトルを書きます</title>
	</head>
	<body>

		ここが内容です。
		自由に文章を書いてみましょう。

	</body>
</html>

コピーできたら、一旦デスクトップに戻って右クリック（Macはcontrol+クリック）のメニューを開き、「新規作成」から、「テキストドキュメント」を選びます（普通のメモ帳です）。ファイルを作ったら、先ほどコピーしたソースを貼り付けて上書き保存しておいて下さい。

デスクトップのメニューにテキストエディタが表示されない場合は、アプリケーション・フォルダや一覧画面からパソコンにインストールされているエディタを起動して下さい。新規作成する文書のフォーマットは、何の装飾もされない標準的なプレーンテキストです。

テキストファイルをHTMLにする

先ほど保存したファイルの名前が「新規テキスト.txt」となっていたら、「新規テキスト.html」に変更して下さい。拡張子が「.html」になっているファイルをウェブブラウザで読み込むと、自動的にHTMLドキュメントであると解釈してくれます。

これでHTMLファイルは完成です。先ほどコピーした内容をブラウザで開いてみてください。HTMLのタグは画面には表示されずに、<body>から</body>の間に書かれた文章だけが表示されます。

ここで、日本語がおかしな記号で表示される「文字化け」が発生してしまった場合は、ファイルを保存した時の文字コードとブラウザが解釈に使った文字コードが異なっていることになります。この現象については、少し慣れてきた頃に覚えれば問題ありません。今は気にせず先へ進みましょう。

ファイルの拡張子が表示されない場合は、パソコンの設定を調整して下さい。全てのファイルにはドット（.）の後に続く拡張子が割り当てられています。それが初期設定では非表示になっている事があります。

初めて作るHTMLのファイル名は「index」

ここまでの作業で、あなたのパソコンのデスクトップには、HTMLファイルが保存されていると思います。それでは、このファイルに名前を付けてみましょう。新しくHTMLファイルを作った際に、一体どんなファイル名にすればいいのか迷ってしまう事があります。せっかくなので、ここでHTMLに関するルールをひとつ紹介します。

将来あなたがインターネット上に公開するウェブサイトを作ろうと思った時、パソコン上で作ったファイルをサーバーにアップロードする作業が発生します。その時、トップページになるファイル名は、必ず「index（インデックス）」という名前になる、ということを覚えておいて下さい。

トップページ以外のファイル名は、自由に決めてしまって構わないのですが、トップページだけは「index.html」にしなければなりません。今は「そういう決まりがあるんだな」と覚えておけば大丈夫です。詳しい理由は、もう少しHTMLに慣れてきた時にゆっくり調べてみましょう。

ファイル名に使える文字

HTMLのファイル名に使える文字は、半角英数字と一部の記号です。日本語のファイル名も許可されていますが、文字エンコードの仕組みを理解するまでは採用を控えた方が良いでしょう。

半角アルファベット（半角英語）: a b c d e f g
h i j k l m n
o p q r s t u
v w x y z
半角数字: 0 1 2 3 4 5 6 7 8 9
半角記号（限定的）: -（ハイフン）
_（アンダーバー）

HTMLファイル名の参考例

index.html
page.html
page-name.html
page_name.html
article-123.html
article_123.html
20451010-filename.html
20451010_filename.html

HTMLって何？初心者が最初に学ぶべき基礎知識

HTMLの書き方をわかりやすく解説

最初に覚えるべきHTMLタグ

ヘッダー情報について

ハイパーリンクについて理解する

改行や半角スペースを連続で表示させる方法

グローバル属性の一覧

コンテンツ・モデルとコンテンツ・カテゴリ

文書のアウトライン

ディレクトリの意味と使い方を詳しく解説

HTMLとXHTMLの違い