htmlファイルの実践的な作り方を覚えよう!

作り方
htmlファイルの作り方

webページを作るためにまずやらなければならないこと、それはhtmlファイルを作成する事です。 そしてhtmlファイルにタグを記述することが、webページを作成するための記念すべき第一歩になります。

このページでは htmlファイル(htmlドキュメント)の作り方、 head要素やbody要素の作り方、 meta要素の記述の方法、 ブラウザでの表示のやり方 などを紹介します。(詳しくは目次をご覧ください)

「head要素、meta要素?なんか難しそう・・・」 と思うかもしれません。 ですが、実際やってみるととっても簡単です。 数分で終わっちゃいますw

では、一緒にやってみましょう!

目次
作成したhtmlファイル(ドキュメント)を保存しよう

htmlファイル(ドキュメント)を作ってみよう

htmlファイルを作ってみよう

このページではTerapad(無料)を使ってhtmlファイルを作成していきます。 TeraPadは下記のページからダウンロードできます。

Terapad-窓の杜ライブラリ

TearaPadを起動しましょう。

TeraPad起動画面

起動すると、上の画像のような画面が表示されます。 ここにhtmlタグを記述していきましょう!

まずはhtmlのバージョンを記述します。

htmlのバージョンを記述しよう

htmlファイルのバージョンを書こう

最初にhtmlファイル(htmlドキュメント)が、どのバージョンのhtmlで書かれたものかを示さなければなりません。 まずは、そのためのタグを記述します。

ちなみにこれを「DOCTYPE宣言(ドックタイプ宣言)」と呼びます。

まあ、簡単にいうと「htmlファイルの初めに下記の事をコピペしてね」ってことです。

<!DOCTYPE html>
doctype宣言の記述例

htmlファイル(ドキュメント)の1行目にDOCTYPE宣言を記述します。 画像のように記述(コピペ)して下さい。

DOCTYPE宣言について「もっと詳しく知りたい」という時は下の記事へ

htmlファイル(ドキュメント)の構造を決めよう!

HTMLファイルの構造を決めましょう。 構造っていうと難しく聞こえますが、すごいシンプルで簡単です。

htmlファイルは、html要素とhead要素、そしてbody要素で構成されてます。 簡単にいうと「下のような構成で記述しよう」ということ。

<html>・・・・・htmlの始まりを伝えるタグ

<head>・・・・・head要素の始まりを伝えるタグ
</head>・・・・・head要素の終わりを伝えるタグ


<body>・・・・・body要素の始まりを伝えるタグ

(bodyの間の部分がwebページの本体になります)

</body>・・・・・body要素の終わりを伝えるタグ

</html>

では、実際にhtmlファイルに記述してみましょう!

下が記述の参考例になります。(コピペすればok) ここでは、見やすいようにheadの始めと終わりに空白を入れています。(実際には入れる必要ありません)

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>
</html>

<html>~</html>を記述する意味

<html></html>を記述する事で、<html>から</html>内の内容が「HTMLだよ」という事を示します。

<html>から</html>までの部分を「html要素」と呼びます。
ちなみにhead要素とbody要素は「html要素」の中に書く必要があります。

<head>~</head>を記述する意味

<head>~</head>内は、htmlファイル(ドキュメント)の種類やタイトル、そのページに関する情報などを記述する部分です。
簡単にいうと、webページとして表示するための情報を書く部分という意味。

この部分に書いた内容はブラウザ(画面)には表示されません。

<body></body>を記述する意味

ここに書いた内容がブラウザ(画面)に表示されます。

webページの本体という意味です。

これらを書くことで、検索エンジンにwebページの正しい内容が伝わります そうする事で検索結果の順位が上がります

ちなみに記述しなくてもwebページは表示されます。でも検索結果で1位を取りたいですよね? なので記述するようにしましょうね!

これでhtmlファイルの大まかな構造は完成しました。 次は作ったhtmlファイルに情報を書いていきましょう!

htmlファイルの情報を書いてみよう!

head内にhtmlファイルの情報を書いていきましょう!

ここに書いた情報は、基本的にはブラウザに表示されません。 ですが、htmlファイルがどういう内容なのか示すために必要な部分ですので、しっかり入力しましょう。 それと検索エンジンに、そのページの内容を伝えてあげる役割もあります。

検索結果で上位表示させるためにも、しっかり入力しましょうね。

meta要素を記述しよう

meta要素(メタ要素)とは、ページの紹介文やタイトル、webページ全体に関する情報を伝えてあげる要素の事です。 どの情報(メタデータ)を書くかは、下のようなプロパティ(属性)を使って指定します。

基本的にコピペでokなので難しく考えなくて大丈夫です。 ちなみにコピペとはコピー&ペーストの事で、簡単にいうと「書いてある事をコピーして貼るだけだよ」って事。

プロパティ メタデータの内容
name ページに関する情報
charset htmlファイル(ドキュメント)で使っている文字コード

書き方の例です。

<meta プロパティ名="値">

<!--値はメタデータの内容とでも考えて下さい。
この後、詳しく説明するのでご安心を-->

meta要素には<h1></h1>のような終了タグ(/の部分)は必要ありません。 meta要素はmetaデータを要素としてではなく、プロパティとして書き込みます。 なので、meta要素にはタグで囲まれた要素部分はありません。

まあ簡単にいうと「終了タグはいらないよ」ということです。 ちなみにこういう要素を空要素と呼びます。

ではmetaを使って「文字コード」から記入してみましょう!

文字コードを記述してみる

文字コードを記述しよう

文字化けを防止するために文字コード書きましょう!

このページでは作成したhtmlファイルの文字コードを、UTF-8に設定して保存する所まで説明します。 なので使っている文字コードがUTF-8だという事を伝えるため、下のように書きましょう!

<!--書き方の例-->
<meta charset="文字コードの名前">

<!--実際に書いた場合の例-->
<meta charset="utf-8">

この場合だと「charset」の部分がプロパティ名「UFT-8」の部分が「値」となります。

では、htmlファイルのhead内に入力してみましょう! 下が参考例です。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>
</body>
</html>

これで文字コードの入力は完了です。 次はmetaを使ってwebページに関する情報を書きます。

webページに関する情報を記述しよう!

web情報を記述しよう

タイトルやwebページの紹介文などの情報を設定しましょう。

nameプロパティに属性値を入力し、contentプロパティに内容を記述します。 簡単にいうと下記をコピペして入力するだけでokということ。

<!--ページに関する情報の書き方の例-->
<meta name="属性値" content="内容">
nameプロパティの属性値 設定する情報
keywords ページに関するキーワード
description ページの内容の説明(検索結果で表示)
author ページの作者名

「属性値」の部分にnameプロパティの属性値を入力し、「内容」に設定する情報を記述しましょう。 では、それぞれの書き方の参考例をご紹介しますね。

keywords

検索エンジン向けにキーワードを入力する場所です。

ページに関連するキーワードを入力しましょう。

「キーワード1,キーワード2,キーワード3」 のように「,」(カンマ)で区切って書きます。

ちなみに、ここに入力するキーワードは多くても5個までにしときましょう。
何個も書いてしまうとグーグルからペナルティを受け、検索順位が下がってしまう可能性があります。

<meta name="keywords" content="キーワード1,キーワード2">
<!--キーワードを二つ書きたい場合-->
<meta name="keywords" content="キーワード1">
<!--キーワードを一つだけ書きたい場合-->
description

ページの紹介文を書く場所です。

検索結果で、タイトル下の説明文として表示されるので、気合を入れて書きます。

ここを真面目に書くことで、アクセス数が変わるのでしっかり書きましょう。
ちなみに検索結果には120文字までしか表示されません。 なので120文字以内に収めるように書いて下さい。

<meta name="description" content="ここにページの説明文を書く">
author

ページの作者名を書く場所です。

個人で運営しているのならハンドルネーム、企業や団体ならその名称を書きます。

<meta name="author" content="作者名">

それぞれの役割はわかりましたね。 では実際に記述してみましょう。

head内に記述します。

下が実際に記述した参考例です。 また「author」「keywords」は書かなくても大丈夫です。 「description」だけは気合を入れて書きましょう!

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
</head>

<body>
</body>
</html>

ページのタイトルを入力しよう

タイトル表示場所

ページのタイトルはブラウザのタブに表示されます。 他にも「お気に入り」に登録した時に使われます。

そして「タイトル」次第で検索結果の順位が変わるので、とっても重要です。 これについては(SEOについて)は別記事で紹介します。 とりあえずは、ページの内容を合うようなタイトルを付けましょう。

<title>ここにタイトルを入力</title>

ではhead内に記述してみましょう!

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>

<body>
</body>
</html>

以上でmeta要素については完了です。

一応、良く使われるものだけをピックアップしました。 meta要素については他にもありますが、基本的にはここで紹介したものだけで十分です。

ページの本体部分を作ろう!

head要素の記述も完了しましたね。 次はいよいよwebページの本体部分(body)の作成です!

まずはページに表示したいテキストを入力していくわけですが、 テキストと言っても色々あります。 例えばタイトルやメニューだったり、本文だったりと色々ありますね。

これから入力するテキストがどこに表示されるのか、まずはご紹介します。

テキストの配置位置

ヘッダーって何?

ヘッダー(header)とは、ページ上部に表示する部分のことです。
タイトルやタイトルに関連するイメージ画像などを書く場所とお考え下さい。

フッターって何?

フッター(footer)とは、ページ下部に表示する部分のことです。
webページに関連する情報や連絡先などを書く場所と考えて下さい。

body構成

bodyの構成は上の画像のようになってます。

一番上には必ず「ヘッダー」
真ん中には「本文やメニューなどのメインコンテンツ」
一番下には必ず「フッター」

テキストを書く時はこの順番で書いていきます。 簡単にいうと「webページに表示する順番で入力しようね」ということです。 「ヘッダー」「フッター」の意味がイマイチわからなくても、この後に詳しく紹介しますのでご安心を。 とりあえず場所だけ覚えておいてもらえれば大丈夫です。

では実際にテキストを入力してみましょう!

ここでは先ほど紹介した画像のように、2カラムでサイトを作ることを想定して入力していきます。 hederやfooterなどは入力せずテキストのみ入力します。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>

<body>

安月給さよなら!本当に稼げるか実験記   <!--ヘッダー用テキスト-->

ホーム                <!--ここからメニュー用テキスト-->
遊び
仕事
パソコン
アフィリエイト      <!--ここまでがメニュー用テキスト-->

「2016年07月」一覧    <!--大見出し用のテキスト-->

狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ      <!--ここから本文用テキスト-->
スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ

稼げるスマホ広告をパソコンでチェック!便利なツールご紹介
アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
今はパソコンより

アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは
良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、始める前に注意しなければならない落と

スマホで副業するならアフィリエイト!稼ぐための新戦略
スマホで副業するならアフィリエイトがオススメです。 なぜ?って、それは失敗してもリスクがなく    <!--ここまでが本文用テキスト-->


Copyright© 安月給さよなら!本当に稼げるのか実験記 All Rights Reserved.        <!--フッター用テキストです。長くなるので省略させてもらいました-->

</body>
</html>

入力が完了したらブラウザで確認しましょう!

ブラウザでの確認方法はhtmlファイルを保存後、ファイルをダブルクリック
保存の方法は次の見出しの「htmlファイルを保存しよう」を参考にして下さい。
また、文字化けする場合も「htmlファイルを保存しよう」を参考にして下さい。

ブラウザ表示例

今はまだ入力したテキストがそのまま表示されているだけですね。 でもこれからする作業で見れるページに変わるのでご安心下さい。

ではここで一度htmlファイルを保存しましょう!

作成したhtmlファイル(ドキュメント)を保存しよう

htmlファイルとして保存します。 次の2つだけは忘れずに設定して下さい。

  • ファイルの拡張子を「.html」にする
  • 文字コードを「utf-8」にする

これだけは忘れないで下さいね。

ではhtmlファイルの保存のやり方を説明します。

左上にある「ファイル」をクリック。 名前を付けて保存をクリック。

名前を付けて保存画面の例

ファイル名を「index.html」と入力。 ファイルの種類が「HTMLファイル」となっている事を確認してから保存。

文字コード選択画面の例

次に文字コードを選択します。

画像のようにファイルをクリック。 文字コード指定再読込(D)をクリック。 UTF-8を選択。

そして再度保存します。

次は「header」「footer」などを使ってページの構造化をしたいと思います。 続きは下のページをご覧ください。

また「html・css入門!初心者でも見るだけで自由自在に」「htmlドキュメントを作成しよう」の章の続きからでも 上記のページへ移動できます。

以上、「htmlファイルの実践的な作り方を覚えよう!」でしたー。 続きのページでお待ちしております(^^)/

頂いたコメント

  1. 莉緒 より:

    はじめまして。ランキングからきました。

    とても分かりやすく、PCが苦手な私でも出来そうな気になりました。
    勉強になり有難うございます。

    またお邪魔します。
    ランキングも応援です!!

    • ゆう。 より:

      こんにちわー(^^♪

      そういってもらえるとすごい嬉しいです!
      html・cssは難しくないので、きっとすぐ出来るようになりますよ(^◇^)

      というより、マスターして下さいね(*^-^*)
      出来る限りわかりやすく書いてみますw

      応援ありがとうございます!!