HTMLファイルの作り方
htmlファイルは、テキストエディタを使用して簡単に作成することができます。
パソコンでhtmlファイルを作成するための一般的な手順を解説します。
1. テキストエディタを開く
まず、パソコンでテキストエディタを開きます。
ベーシックなテキストエディタとしては、Windowsであれば「メモ帳」、Macであれば「TextEdit」があります。
参考までに、Web制作でよく使われるテキストエディタには、「Visual Studio Code（VS code）」「Notepad++」「NoEditor」「Sublime Text」「Atom」「サクラエディタ」などがあります。
おすすめは、フリーエディターの「Visual Studio Code（VS code）」です。無料でダウンロードできるので、Web制作の入門者・初心者でも手軽に使うことができます。
2. 新しいファイルを作成する
テキストエディタで、新しいファイルを作成します。
ファイルを保存するときは、「ファイル名.html」とする必要があります。
末尾の拡張子を.html（ピリオドhtml）にすることで、ファイルがhtml形式として識別されます。
なお、ファイル名で使える文字の基本は3つです。
- 半角英数
- -（ハイフン）
- _（アンダースコア）
アルファベットの大文字は使えますが、基本的には小文字で統一することをおすすめします。
また、スペースやファイル名の先頭に数字を入れることはNGです。本番環境のブラウザで表示されない場合があるので注意しましょう。
3. HTMLのベースとなる基本コードを記述する
作成したHTMLファイルの最初に以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
</body>
</html>このコードは、HTMLのベースとなるもので、基本的なHTML文書の構造を定義しています。
コードの詳しい内容は、次に解説します。
4. ファイルを保存する
HTMLファイルを保存する方法は、テキストエディタによって異なりますが、基本的には、ファイルメニューから「名前を付けて保存」や「保存」を選択します。
ファイル名の拡張子が、必ず「.html」になっていることを確認してください。
これでHTMLファイルが作成できました。
作成したHTMLファイルをベースに、さまざまなHTMLタグを書いてページを構築していきます。
Webページは、このように作成したHTMLファイルをブラウザ上で開くことで、記述したコンテンツを視覚的に見ることができる仕組みです。
HTMLファイルのベースをつくる基本コード
続いて、先程書いたHTMLのベースとなる基本コードについて解説します。
はじめは難しく考えずに、HTMLファイルをブラウザに表示させるための定型のコードと思ってください。
作成したHTMLファイルにコピーペーストして利用しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
ここにブラウザに表示するコンテンツを記述します
</body>
</html>複雑に見えますが1つ1つ見ていくと簡単な内容で構成されています。
DOCTYPE（ドックタイプ）
<!DOCTYPE html>文書型宣言（DOCTYPE宣言）と言います。
htmlファイルの一番上に記述して、作成したファイルがHTMLを使用していることを示します。
ルート要素
<html>・・・</html>HTMLのルート要素と言います。全体のコンテンツを囲みます。すべのHTMLデータは、html要素の中に入れる構造になります。一般的には、グローバル属性のlangコンテンツ属性を使って、Webページが認識する言語コードを指定します。
<html lang="ja">lang="言語コード"のように書きます。例のjaは日本語を意味する言語コードです。
英語はen、フランス語はfr、ドイツ語はdeなどがあります。
ちなみに、コンテンツ属性とは、要素に記述する属性のことをコンテンツ属性と言います。
また、グローバル属性とは、コンテンツ属性の中で、いろいろな要素で共通で使える属性のことをグローバル属性と言います。
HTMLにはいろいろな属性がありますが、使用時にその都度覚えていきましょう。
head（ヘッド）
<head>・・・</head>head要素と言います。html要素の中の最初に記述します。基本的にhead要素内に書いたものはブラウザには表示されません。主に、Webページのメタデータ（メタ情報）を記述するためのセクションです。
なお、メタデータとは、Webページのコンテンツを説明するためのあらゆる情報のことです。簡単に言うと、Webページの情報をコンピューターに伝えるための専用コードのようなイメージです。
以下、head要素の中に記述する主なメタデータを紹介します。
title（タイトル）
<title>タイトル</title>title要素と言います。head要素には、title要素が必須なので必ず記述するようにしましょう。
ページのタイトルをテキストのみで指定します。
ブラウザのタブやタイトルバーに表示され、検索エンジンの検索結果やブックマークなどでも使われます。
Webサイトにおいては、重要な要素になりますので覚えておきましょう。
charset（チャーセット）
<meta charset="UTF-8">頭に<meta>が付くものをmeta要素（メタ要素）と言います。
meta要素にコンテンツ属性を付けて、いろいろな情報を指定することができます。
これは、charsetコンテンツ属性を付けて、文字エンコーディングの宣言を指定します。文字を文字コード（文字に割り当てられた数字）に変換してエンコード（符号化）することを、文字エンコーディングと言います。
このcharsetに値を設定することで、Webページのテキストをどの文字コードを使って、どのエンコード方式で表示させるかという指示を行うことができます。
Webに限らず文書やメールでもよくある文字化けは、文字エンコーディングが正しく行われていないときに起きる現象です。
文字コードやエンコード方式の種類は多くありますが、日本語を表す文字コードの一例を紹介します。
●文字コード
ASCII（アスキー）、JIS（ジス）、Unicode（ユニコード）など
●エンコード方式
ISO-2022-JP、EUC-JP、Shift-JIS、UTF-8、UTF-16、UTF-32など
基本的には、「UTF-8」を指定しておきましょう。
UTF-8は、あらゆる言語をあつかえる文字コードとして、世界で最も普及しているエンコード方式と言われています。
viewport（ビューポート）
<meta name="viewport" content="width=device-width, initial-scale=1.0">meta要素に、nameコンテンツ属性を付けて、メタ情報としてviewport（ビューポート）を指定します。
viewportとは、ブラウザにおける表示領域のことです。
例えば、デスクトップPC、ノートPC、スマートフォン、タブレットなどデバイス機器によってブラウザのサイズもさまざまです。適切なviewportを指定できていない場合、ブラウザによっては、ページの一部だけが見えたり、不要な余白ができたり見え方が不安定になります。
viewportからはみ出た部分は、スクロールバーが提供されスクロールをしてすべてのコンテンツを見ることがきますが、基本的な設定を覚えておきましょう。
viewportの基本的な設定
基本的にはどのデバイス機器でも幅を合わせられるように「width=device-width」を指定します。
あとは、未対応のIE対策として「initial-scale=1」を指定しておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">特別なサイズを指定しない限りは、こちらの書き方で問題ありません。
その他、viewportで指定できる基本的なメタ情報は以下になります。
●width（横幅）
widthは、表示領域の横幅を指定することができます。ピクセル単位の数値を設定します。
または「device-width」でビューポート幅100%（100vw）に設定することができます。
●hight（縦幅）
hightは、表示領域の縦幅を指定することができます。ピクセル単位の数値を設定します。
または「device-height」でビューポート高さ100%（100vh）に設定することができます。
通常は、特に使用する必要はありません。
●initial-scale（初期倍率）
initial-scaleは、Webページがはじめに表示されたときの画面の拡大率を設定できます。
初期値は「1」なので指定しない場合は「initial-scale=1」になります。
●maximum-scale（最大倍率）
maximum-scaleは、Webページを拡大できる最大の倍率を設定できます。
●minimum-scale（最小倍率）
minimum-scaleは、Webページを縮小できる最小の倍率を設定できます。
●user-scalable（ズーム操作の可否）
user-scalableは、ユーザーがズームすることを許可するかどうかを設定できます。
user-scalable=yesのように「yes」「no」で指定します。初期値は「yes」なので記述は不要です。
なお、値を0（no）に設定すると、ウェブコンテンツアクセシビリティのガイドライン (WCAG) に違反しますので注意しましょう。
description（ディスクリプション）
<meta name="description" content="ウェブサイトの説明文">meta要素に、nameコンテンツ属性を付けて、メタ情報としてdescription（ディスクリプション）を指定します。
書き方は、name部分に「description」を、content部分にテキスト文を入れます。
検索エンジンの結果で表示される概要文がこれに当たります。
http-equiv（エイチティーティーピー・イクイブ）
<meta http-equiv="X-UA-Compatible" content="IE=edge">meta要素に、http-equivコンテンツ属性を付けて、プラグマ指示子を指定します。
プラグマ指示子とは、ブラウザへの指示を記述したもののことです。
メタ情報の値は、contentコンテンツ属性を使って指定します。
http-equivで指定できる基本的なメタ情報は以下になります。
●content-type
文字エンコーディングを指定できます。ただし、charsetで指定しているので不要です。
●default-style
デフォルトで優先したいCSSスタイルシートを指定できます。
例えば、2つのCSSファイルが存在するとします。ここで「new-style.css」のほうをデフォルトで優先する場合はこのように書くことができます。
<meta http-equiv="default-style" content="new-style"/>
<link rel="stylesheet" href="new-style.css" title="new-style" />
<link rel="stylesheet" href="old-style.css" title="old-style" />優先するCSSのファイル名「new-style」を、link要素のtitleコンテンツ属性で「new-style」と指定しているところに注意しましょう。
●refresh
指定することで、Webページにアクセスがあったとき、再読込みまたは他のページに移動できます。
contentコンテンツ属性に秒数とURLを設定します。秒数を経過したらページを再読込みしてURLに移動します。
<meta http-equiv="refresh" content="3" URL="移動先のURL"/>この例では、3秒後に移動先のURLに移動します。
●X-UA-Compatible
IE（Internet Explorer）で使用できる互換モード機能です。
ブラウザがIEの場合は最新環境で表示させるよう「IE=edge」を指定することがありましたが、現在はIEからのアクセスを考慮する必要がなくなったので指定は不要です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">●その他
その他、CSSファイルのリンクや、解析タグ（例：Google Analyticsトラッキングコード）なども<head>内に記述することが多くあります。
実際には、Webサイトを構築する中で、いろいろなメタ要素が出てくると思いますので、その都度、意味を理解して設置しましょう。
body（ボディ）
<body>・・・</body>Webページのコンテンツを記述するためのセクションです。
html要素の中で、head要素の次に配置します。
Webサイトにおいては、基本的にはbody内にブラウザに表示するコンテンツを書いていきます。
HTMLファイルの完成例
以上のコードで最低限必要なものをまとめた完成例のテンプレートがこちらです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ここにタイトルが入ります</title>
<meta name="description" content="ここにページの説明文が入ります">
</head>
<body>
ここにコンテンツが入ります
</body>
</html>htmlファイルを新規で作成したら、まずこのコードをコピーして貼り付けて保存しましょう。
これで、htmlファイルのベースが完成しました。
次は、htmlタグの書き方と使い方を学習しましょう。
