前回、はじめてのHTMLに挑戦しました。もっとHTMLを覚えたい！早くホームページを形にしたい！と思っている方もいらっしゃると思います。
今回はメタ要素、メタ情報、メタタグ、いろいろな呼ばれ方をするmetaタグについて、metaタグとは何なのか？初心者でも失敗しないように実際の操作もしながら書き方をゆっくり解説します。あせらずに、一緒にひとつずつできることを増やしていきましょう！
前回はじめて書いたHTMLのおさらいと応用
まずは、前回記事「はじめてのHTML：初心者が最初に覚えたい書き方の基本とタグ」で記述したHTMLをもう一度。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ホームページのタイトル</title>
<meta charset="UTF-8">
</head>
<body>
<h1>はじめてのホームページ</h1>
<p>HTMLについて一緒に覚えていきましょう</p>
</body>
</html>
上記のHTMLで、一部を書き換えてみたいと思います。
まず、<title>ホームページのタイトル</title>の「ホームページのタイトル」の部分の文章を別の言葉に書き換えてみましょう。これからつくりたいホームページの名前などにしてみるといいですね。
次に、<h1>はじめてのホームページ</h1>の「はじめてのホームページ」の部分の文章を別の言葉に書き換えてみましょう。
さらに、<p>HTMLについて一緒に覚えていきましょう</p>の「HTMLについて一緒に覚えていきましょう」の部分の文章を別の言葉に書き換えてみましょう。
ここまで完成したら、上書き保存をして、ブラウザで表示してみます。
うまくいきましたか？
最初は誰でもうまくいかないことが多いです。気落ちせず、のんびりやっていきましょう。
もしうまくいかなかったときは、前回記事「はじめてのHTML：初心者が最初に覚えたい書き方の基本とタグ」を、もう一度ゆっくり読み直してみるといいかもしれません。
metaタグって何ですか？
実は、私たちはすでにmeta（メタ）タグを書いています。
青い枠で囲んだ部分がmetaタグです。
文書に関する情報のことをメタ情報といいます。metaタグは、文書に関する情報を指定して、ブラウザや検索エンジンに知らせるためのタグです。
WEBページのタイトルを意味している<title>～</title>タグは、<head>～</head>タグの中に前回書きましたね。<head>タグで囲まれている部分は、<title>タグなど一部を除き基本的にブラウザ画面上では表示されません。
metaタグも<head>～</head>タグの中に書きます。書く場所を間違えると、ブラウザや検索エンジンに正しく情報が届かなくなってしまいます。
metaタグには種類があるので、代表的なものを順番に見ていきましょう。
<meta charset="UTF-8">とは？
前回記事にも説明があったので繰り返しになりますが、復習でもう一度解説します。
<meta charset="UTF-8">でブラウザに用いる文字コードを指定しています。
文字コードの指定「UTF-8」は、ISOの規格で世界標準です。HTMLは「UTF-8」で記述することになっています。
<meta name="viewport" content="width=device-width, initial-scale1.0">とは？
はい、一気に呪文のようなものになりました。でも安心してください。ゆっくり見ていけば必ずわかるようになります。一緒に少しずつ見ていきましょう。
「viewport」とは、サイトを閲覧するユーザーが使うデバイスのことです。ホームページはパソコンで見るひとも、スマートフォンやタブレットで見るひともいます。画面の幅が違うデバイスで表示しても、せっかく作ったホームページのデザインが崩れないようにしたいですよね。
だから、「ユーザーが使うデバイス（viewport）の幅（width）にあわせて、ページの表示を100％（initial-scale1.0）にする」という記述をします。これが、さきほどの呪文のような文字の意味です。
どんなデバイスの画面でも、画面サイズに最適化して表示するWEBデザインのことを「レスポンシブデザイン」といいます。作る側の利便性だけでなく、ホームページを見に来てくれる人の利便性をよくするための大切な考え方です。
<meta name=”description” content=”～”>とは？
ホームページについての説明文を「～」の部分に書きます。日本語の文章で大丈夫です。検索結果の説明文や、SNSでシェアされるときに説明文として表示されます。
ホームページを検索してくれたひとが、どんなサイトなのかがわかるように、必要なキーワードを混ぜて文章を作るといいです。
長すぎても全部が表示されなくなってしまうので、最大120文字程度に収めるようにしましょう。
覚えたmetaタグを<head>タグの中に書き加えてみよう！
ではさっそく、今回覚えたmetaタグを<head>タグの中に書き加えてみましょう。
HTML記述のルールは覚えていますか？英文字、数字、記号、スペースはすべて半角で書いてください。
今回説明したmetaタグの部分を青い文字にしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale1.0">
<title>ホームページのタイトル</title>
<meta name=”description” content=”サイトの説明文が入ります”>
</head>
<body>
<h1>はじめてのホームページ</h1>
<p>HTMLについて一緒に覚えていきましょう</p>
</body>
</html>
ここまで完成したら、上書き保存をして、ブラウザで表示してみます。
うまくいきましたか？不安になった方もいるかもしれないので説明すると、今回書き加えたmetaタグの部分は、基本的に画面上には表示されないものなので、表示されていない状態が正しいです。
HTMLを書くときによくある失敗は、記号がたったひとつ全角になっているだけでうまく表示できなくなります。「”」の記号が全角になっていたりしませんか？
もしうまくいかなかったときは、HTML記載部分<!DOCTYPE html>から</html>の部分をすべてそのままコピーして、Visual Studio Codeにそのままペーストして上書き保存しましょう。
そして再度、Google Chromeで開いてみましょう。うまくいったでしょうか？
今回書いたHTMLは、これからもずっと使えるテンプレートとして保存しておくと便利です。
まとめ
今回は、metaタグとは何なのか？初心者でも失敗しないように実際の操作もしながら、<head>タグの中への書き方をゆっくり解説しました。
新しいことをひとつ覚えることで、もっともっとやりたいことが増えてきたかもしれません。
今回作ったHTMLは、ぜひテンプレートとして保存して今後も利用しましょう。
いま活躍しているWEBデザイナーも、みんな最初は初心者です。いまは初心者でも、かっこいいホームページを作れる日はきます！一緒に少しずつできることを増やしていきましょう。
