【初心者・未経験者向け】HTMLファイルを作ろう

HTMLの概要を勉強したら、実際にHTMLファイルを作成してみましょう。

実際に自分でコードを書くことで知識が定着していくと思います。

最初のうちはわからないことが多いと思いますが、ゆっくりでも継続して学習していくことが大切です。

tomo

今回は実際にHTMLファイルを作成してみよう

ひろ

はい、よろしくお願いします

HTMLファイル作成の準備
HTMLの基本構造

HTMLファイル作成の準備

実際にHTMLファイルを作って行く前に準備をしましょう。

まずは自分のPCに新しく練習用のフォルダーを作りましょう。

新しくフォルダーを作ったらテキストエディターで開きます。

次に新しくファイルを作成します。

index.htmlというファイルを作成します。

index.htmlが作れたらいよいよこのindex.htmlファイルの中にHTMLを記述していきましょう。

HTMLの基本構造

HTMLファイルにはルールがあり、そのルールに則って記述していきます。

ではまずHTMLの基本構造を記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

では今記述したHTMLの基本構造について解説します。

!DOCTYPE html

!DOCTYPE htmlはドキュメント宣言です。
ドキュメント宣言とは、文書のバージョンを宣言するメタ情報で、＜ !DOCTYPE html ＞と記述することでこの文書はHTML5で書かれた文書ですと宣言することができます。

HTMLファイルを作成するときは、HTMLタグを書く前に先頭にドキュメント宣言を書きましょう。

htmlタグ

＜html＞は、この文書がHTMLの文書でHTMLの文章を書くエリアを決めます。

「lang=”ja”」は日本語で書かれた文書であるという意味です。

全ての要素はこのhtmlタグの中に記述します。

headタグ

headタグ内には、メタ情報を記述します。

例えば、Webページの内部設定だったり、外部ファイルの設定、SNSの表示設定などです。

今回はHTMLファイルを作成して、ブラウザで表示させることが目的なので最低限必要なものを解説します。

metaタグ

metaタグは、実際にこのHTMLファイルのメタ情報を記述するのに使います。

「charset=”UTF-8″」は、文字コードを設定しています。

文字コードには様々なものがありますが最もスタンダードなのがUnicodeの「UTF-8」です。

文字コードによっては文字化けに繋がることもあるので気をつけてください。

「X-UA-Compatible」は、IE（インターネットエクスプローラー）での表示に関する記述ですが、現在ではすでに不要と考えられているので、古いWebページを表示する必要があるなどの特別な理由が無いようなら記述は不要です。

「viewport」は、表示領域についての記述になります。
「content=”width=device-width”」とすることでブラウザに合わせた値を返します。
「initial-scale」は、初期倍率を設定しています。
スマホ対応をする場合、デバイスの解像度やウィンドウサイズによって、デザインを指定する「CSS」を切り替えて適応させるメディアクエリという機能を使用します。その際「viewport」の設定は必須になって来るので、しっかり記述しておきましょう。

「title」は、そのページの題名を表しています。
例えばWebサイトのトップページで指定すると、そのサイトのサイト名になり、下層ページに指定すれば、そのページのタイトルになります。
そして、そのサイト名やタイトルはブラウザ上部のタイトルバーや検索結果のタイトルなどに表示されます。