バナー画像

HTMLファイルとは

HTMLファイルとは、HTMLのルールに沿って記述されているテキストファイルのことです。

Webサイトの中の1ページ(Webページ)の内容を記述するファイルとして使用されます。

HTMLファイルは、拡張子が「.html(.htm)」になります。

中身はただのテキストファイル(文字だけのファイル)ですが、タグを用いてマークアップします。

記述するには専用のテキストエディタ(ビューアー)を使って編集する人が多いです。

おすすめのビューアーについては、次の記事で解説していますので参考までに。

【関連記事】

▶︎【HTML】ビューアーとは?概要からおすすめのものまで徹底解説!

HTMLの種類

HTMLには「HTML(4.01)」「XHTML」「HTML5」など、いくつか種類があります。

それぞれで使えるタグに違いがあります。

近年ではHTML5を使うことが多いですが、使いたいタグに応じてHTMLのバージョンを確認したほうがよいでしょう。

HTMLファイルのサンプル

いざ「HTMLファイルを作ろう」と思っても、どうすればいいのか、何を書けばいいかわからないという場合もあるでしょう。

HTMLファイルでWebページ・Webサイトを作る際には、ある程度の雛形(テンプレート)が決まっています。

また、Webページ・Webサイトが簡単に作れるようにテンプレートの販売・無料利用可としているファイルもあります。

次の記事で、サンプル・テンプレートを紹介していますので、よければ参考にしてみてください。

【関連記事】

▶︎HTMLテンプレートの基本的な書き方&おすすめを紹介!

ここからは、HTMLファイルの作成方法について解説していきます。

HTMLファイルの作成準備

まずは、次のソースコードの<html>~</html>までをエディタに記述しましょう。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

ここに表示したい内容を記述します。

</body>
</html>

タグを使うことで、このソースコードがHTML文書であることを宣言しています。

<head>内にはこの文書の情報を、<body>内には表示したい内容を記述します。

HTMLファイルの作成

HTMLファイルを作成するには、先ほど記述した文書を「.html」として保存すればOKです。

お使いのエディタから「保存」「名前を付けて保存」を選びましょう。

例えば、「sample.txt」となっていれば「sample.html」と拡張子を変更して保存します。

拡張子を「.html」とすることで、ファイルをブラウザで読み込んだ際に、ブラウザが自動的にHTMLドキュメントであることを解釈してくれます。

先ほど作成したHTMLファイルをブラウザで読み込むと、HTMLタグ(<html>や<body>など)は画面に表示されず、<body>から</body>囲まれた内容(ここに表示したい内容を記述します。)だけが表示されるはずです。

ファイル名の基本は「index」

HTMLファイルには、半角英数字であれば好きな名前を付けられますが、Webサイトのトップページになるファイルは「index」になると覚えておきましょう。

なぜ「index.html」にするかというと、ブラウザのアドレス欄にURLを入力した際に、サーバーは次のような動作をします。

  1. index.htmlを見つける。
  2. index.htmlが見つからない場合は、index.htmを探す。
  3. index.htmが見つからない場合は、welcome.html(top.html)を探す。
  4. どのファイルも見つからない場合は、ディレクトリの一覧を表示する。

サーバーの種類や設定によっては異なる場合もありますが、基本的に上記の動きをします。

URLを入力してディレクトリの一覧が表示されてしまっては困りますよね…。

なので、トップページのHTMLファイルには「index」をつけてあげます。

リンクを作成する

先ほど作成したHTMLファイルにリンクを作成してみましょう。

リンクを作成する際は<a>タグを使います。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

ここに表示したい内容を記述します。
<a href="https://style.potepan.com/">ポテパンスタイルへのリンクです。</a>

</body>
</html>

hrefの部分にリンク先のパスを入力します。

ここではポテパンスタイルへの絶対パス(https://〜で始まるもの)を入力しています。

絶対パス以外に、相対パス(現在の位置を基準としたもの)でも記述可能です。

HTMLファイルをブラウザで確認してみると、このように表示されます。

「ポテパンスタイルへのリンクです。」の部分をクリックすると、リンクを作成した場所へページが移動するはずです。

画像を表示する

画像を表示させる場合は<img>タグを使います。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

ここに表示したい内容を記述します。
<a href="https://style.potepan.com/">ポテパンスタイルへのリンクです。</a>
<img src="https://style.potepan.com/wp-content/themes/potepan-style/images/camp-logo-ad.svg">

</body>
</html>

タグでは、srcの部分に画像の絶対パスあるいは相対パスを入力します。

<img>タグは<a>タグとは異なり、終了タグ(</img>)はありません。

HTMLファイルをブラウザで確認してみると、このように表示されます。

このように、画像が表示されていればOKです。

段落分けを行う

段落分けを行う際は<p>タグを使います。

ここまで作成したHTMLファイルは、「ここに表示したい内容を記述します。」とリンクが同じ行に表示されてしまっていますね。

見栄えがあまりよくないので、段落分けしてみましょう。

ソースコードを次のように記述します。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

<p>ここに表示したい内容を記述します。</p>
<a href="https://style.potepan.com/">ポテパンスタイルへのリンクです。</a>
<img src="https://style.potepan.com/wp-content/themes/potepan-style/images/camp-logo-ad.svg">

</body>
</html>

HTMLファイルをブラウザで確認してみると、このように表示されます。

文章とリンクが改行されているのがわかります。

ファイルのアップロードボタンをつける

ファイルのアップロードボタンをつけるには、<input>タグを使います。

<input>タグには、テキストの入力ボックスやチェックボックスなどさまざまな使い方ができます。

詳しくは知りたい場合は、次の記事を参考にしてみてください。

【関連記事】

▶︎パターンでマスターするHTMLのinputタグの使い方

先ほどのHTMLファイルに、ファイルのアップロードボタンをつけてみましょう。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

<p>ここに表示したい内容を記述します。</p>
<a href="https://style.potepan.com/">ポテパンスタイルへのリンクです。</a>
<img src="https://style.potepan.com/wp-content/themes/potepan-style/images/camp-logo-ad.svg">
<form action="#">
	<p>アップロードするファイルを選択して下さい。</p>
	<p><input type="file" name="s_file"></p>
</form>

</body>
</html>

よく見るファイルのアップロードボタンが表示されました。

ファイルのアップロードボタンをつける

ファイルのダウンロードボタンをつけるには、<a>タグを応用させることで可能です。

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>

<p>ここに表示したい内容を記述します。</p>
<a href="https://style.potepan.com/">ポテパンスタイルへのリンクです。</a>
<img src="https://style.potepan.com/wp-content/themes/potepan-style/images/camp-logo-ad.svg">
<form action="#">
	<p>アップロードするファイルを選択して下さい。</p>
	<p><input type="file" name="s_file"></p>
</form>
<a href="sample.csv" download="sample.csv">CSVファイルをダウンロード</a>

</body>
</html>

hrefにファイルのパスを指定し、downloadにダウンロードさせたいファイル名を記述しましょう。

リンクをクリックすることで、CSVファイルをダウンロードできます。

HTMLファイルの開き方

作成したHTMLファイルはどうやって開けばよいですか?ダブルクリックしても、ブラウザに表示されるだけで編集できません…

HTMLファイルはテキストエディタから開くか、「このアプリケーションで開く」から開けます。もしくは開くアプリケーションの指定もできますので、開き方について解説しますね。

HTMLファイルの開き方は、大きく分けて次の3つがあります。

ひとつずつ解説しますね。

テキストエディタから開く

HTMLファイル編集時に使っているテキストエディタを起動します。

ここでは、Visual Studio Codeで解説しますが、どのテキストエディタでも基本的に同じ流れになるはずです。

画面左上にある「ファイル」をクリックしましょう。

3段目あたりに「開く」があるので、クリックするとファイル選択画面が表示されます。

ここで開きたいHTMLファイルを選択すればOKです。

「このアプリケーションで開く」から開く

開きたいHTMLファイルを右クリックします。

そうすると「このアプリケーションで開く」という項目があるので、そこから開きたいテキストエディタを選択しましょう。

これで、選択したテキストエディタでHTMLファイルが開きます。

デフォルトで開くアプリケーションを指定する

ダブルクリックしたときにテキストエディタでHTMLファイルを表示させたい場合は、デフォルトで開くアプリケーションを変更しましょう。

開きたいHTMLファイルを右クリックします。

「情報を見る」という項目があるのでクリックしましょう。

そうすると「このアプリケーションで開く」という欄があるので、ここから開きたいテキストエディタを設定します。

これでダブルクリックした際に、指定したテキストエディタでHTMLファイルが開きます。

まとめ

HTMLファイルの概要や作成方法について解説しました。

HTMLファイルは、Webサイトを作る上で必須の知識・ファイルです!

ぜひこの記事を参考に、HTMLファイルについての理解を深めてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。