こんにちは、かつコーチです。
僕は現在、プログラミングを学習していて、その学習の中で理解したことを、
毎回テーマを絞ってリアルタイムで発信しています。
今回は、HTMLの5回目で、テーマは最初に必ず出て来る<meta>（メタ）と呼ばれる要素。
<meta charset=”UTF-8″>
という形で使っていますが、metaっていったいなんなのか？
メタバース！
ちゃうやろー！
というのは、当然ですが、今回はそのmetaついてご紹介します。
meta（メタ）要素とは？
meta（メタ）とは、「このWebサイトはどんな情報なのか？」ということを、
ブラウザや検索エンジンに対して示す役割があります。
例えば、「このサイトは、UTF-8という文字コードで書かれています。」とか、
「このサイトは、こういうサイトです！」と、ブラウザや検索エンジンがわかるように示しています。
meta（メタ）要素の使い方
meta（メタ）要素は、htmlのhead部分に記述します。
meta要素につく属性は主に3つあります。
- 文字コードを指定するcharset属性
- ブラウザに対して指示をするettp-equiv属性（content属性も一緒に指定することが必須）
- サイトの説明をするname属性（content属性も一緒に指定することが必須）
<meta>とタグの中にはそれぞれ1つずつしか指定できません。
複数の属性を使いたい場合は、それぞれ<meta>を書かなければいけません。
また、meta要素は空要素の為、終了タグ（</>）が必要ありません。
3種類の属性
では、実際に、3種類の属性について解説します。
charset属性
まずは、最もポピュラーなcharset属性ですが、文字コードを設定するものです。
HTML文書を書く際には、必ずと言って良いくらい必要な属性で、以下のように書きます。
<meta charset="UTF-8">charset＝character Setの略です（charasetと書かないように注意！）。
一般的に、UTF-8と記述することが多いですが、Shift-JISやEUC-JPといったシステムの場合は、
文字コードが違うので注意が必要です。
文字コードや文字化けについては、下記の記事もご覧ください。
当サイト内参考記事：文字コードとは？文字化けが起こる原因とは？初心者が知っておくべき基礎知識
http-equive属性
http-equive属性は、HTML文書の情報の動作や状態を指定するものです。
- このサイトはHTMLで作られている。
- ブラウザに対して更新を指示する。
- 一定時間経過したらページを再読み込みする。
といったことで、属性値に指定します。
また、情報の内容にはcontent属性が必要なので、必ずcontent属性と一緒に記述します。
equiv=equivalentの略です(難しい英語ですよね。。。)。
属性値は、いくつかありますが、主なものを2つご紹介します。
<meta http-equiv=”default-style”>
default-styleは、デフォルトで読み込むファイルを指定できる属性値です。
デフォルトでCSSファイルを指定する際は以下のように書きます。
<meta http-equiv="default-style" content="test.css"><meta http-equiv=”refresh”>
ページを更新する際に指示をする属性値です。
10秒ごとにページを再読み込みするには以下のように書きます。
<meta http-equiv="refresh" content="10">name属性
name属性は、文書の情報の種類を指定するものです。
また、情報の内容にはcontent属性が必要なので、必ずcontent属性と一緒に記述します。
属性値は、たくさんありますが、主なものを2つご紹介します。
<meta name=”description”>
descriptionは、サイトの簡単な紹介文を指定します。
検索エンジンの検索結果で表示されるテキストなのでとても大切です。
<meta name="description" content="～紹介文～"><meta name=”robots”>
robotsは、検索エンジンの動作を制御することができる属性値です。
content属性でに”noindex,nofollow”と指定することで、
検索エンジンがmeta要素を設定したページの巡回を防ぐことができます。
どんな時に使うか！
例えば、パスワードが必要な外にバレてはいけないようなページや、
開発中でまだ一般には公開できないようなサイトなどです。
完璧に防ぐことはできませんが、なるべく検索に引っかからないようにする意味で重要です。
書き方は以下の通りです。
<meta name="robots" content="noindex,nofollow">その他の機能
meta要素にはその他にも機能がたくさんあります。
最近では、スマートフォンだけで完結することが多く、それに対応したものを作成する必要があります。
それを指定するのには、name=”vieport”を指定します。
その他にも、
- <initial-scale>
- <width>、<height>、
- <user-scalable>
- <maximum-scale>、<minimum-scale>
などたくさんあります。
しかし、これらを一気に覚える必要はありません。
僕もまだまだ理解しきれない機能がたくさんありました。
使っている内に必要になった時に使えるようになれば良いと思います。
まとめ
以上、今回は、meta（メタ）要素についてご紹介しました。
意外と複雑なmeta要素は、よくわかっていないことも多いと思います。
meta要素に書かれている内容は、ブラウザや検索エンジンに対して、
自分のページがどんなものであるか、を示す役割をはたしているので大切です。
しかし、初心者の内は、charset属性のみ理解していて、
後は必要に応じて使えるようになれば良いと思います。
プログラミング学習において参考になれば幸いです。
学習の参考になるサイト
今やプログラミングの学習はネットで学ぶことができます。
僕もここから始めています。
ネット上にはたくさんの学習サイトがありますが、おすすめとしては、
この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です！
無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、
有料プランへ変更すれば良いと思います。
有料プランはどちらも月額980円（税込）です。
まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、
こちらからやってみることをおすすめします。
初心者へおすすめの入門書籍（※2020年5月13日追記）
ある程度、動画で学んだら、もっとしっかり学びたくなるもの。
そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。
僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。
それぞれご紹介します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
まずは、今や鉄板のプログラミングの1冊目の本です。
知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、
最後には1つのサイトを構築するまで網羅しています。
僕は後になって購入しました。
学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、
「もっと早く手にしておけば良かった。」そう思わせてくれた本です。
難しい内容がなく、3日くらいで一気に読んでしまいました。
勿論、コードを打ちながらですが、楽しくてすぐに終わりました（笑）。
その後も3周くらいして、一通り基礎を学べた本です。
プログラミング学習者で初心者の方には絶対におすすめします！
世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。
とは言っても、初心者向けですので、無理なく読めます。
知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、
動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。
こちらも最後には1つのサイトを作成するまでを学べます。
