前回の記事では、必ず書かなければいけないコードを紹介しました。
この記事では、head要素の中に書くべきタグを説明していきます。
head要素の中に書くタグの種類
前の記事で説明したとおり、head要素の中には各種設定をタグで記入していきます。
様々な種類のタグがあり、その分だけ設定があります。
しかし、いきなり全て覚えるのは大変なので、このページでは主要な設定に絞って説明していきます。
meta要素の役割と種類
meta要素はページの基本情報を指定します。
属性の種類は「http-equiv」または「name」属性を最初に指定します。
その後、「content」属性で詳細な値を指定します。
以下に、よく使われるmeta要素を説明していきますので、必要に応じて使い分けてください。
http-equiv属性
属性値「Content-Type」
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
この「Content-Type」という属性値は、そのサイトの文字コードを表しています。
この文字コードを指定しておかないと、間違った文字コードで表示した場合に文字化けしてしまいます。
基本的に「UTF-8」という文字コードで統一するのが望ましいとされているので、このコードをコピーして使っても大丈夫です。
属性値「Content-Style-Type」
<meta http-equiv="Content-Style-Type" content="text/css" />
「Content-Style-Type」という属性値は、そのサイトのスタイルシートの種類を表しています。
スタイルシートについては、後ほどCSS（カスケーディングスタイルシート）という項目で詳しく解説します。
この属性値も、このサンプル通りに記載すれば問題ありません。
属性値「Content-Script-Type」
<meta http-equiv="Content-Script-Type" content="text/javascript" />
「Content-Script-Type」という属性値は、そのサイトのスクリプトの種類を表しています。
スクリプトというのは、サイトにアニメーション（動き）をさせたりする言語のことです。
編集には専門知識が必要になるので、スクリプトに関する詳しい内容は別の機会に解説します。
スクリプトを使う場合も使わない場合も、念のため記載しておくと安心です。
サンプル通りに記載すれば問題なく動作します。
name属性
属性値「description」
<meta name="description" content="サイトの概要説明です。" />
「description」という属性値は、そのページの概要文を表しています。
content属性に、大まかなページの説明を記載してください。
属性値「keywords」
<meta name="keywords" content="サンプル,sample,サンプルサイト" />
「keywords」という属性値は、そのページに関するキーワードを表しています。
content属性に、関連するキーワードを単語で入力してください。
複数指定する場合は、「,」（半角カンマ）で区切って入力してください。
キーワードの数が多すぎるのは望ましくありませんので、最大5個ほどで指定してください。
属性値「author」
<meta name="author" content="ぶーにゃん" />
「author」という属性値は、そのページの製作者を表しています。
そのサイトの管理者のハンドルネーム等を記載すると良いでしょう。
属性値「copyright」
<meta name="copyright" content="copyright © サイト名" />
「copyright」という属性値は、そのページの著作権保有者を表しています。
content属性には、「copyright ©」の後にサイト名等を記載すると良いでしょう。
コピー用サンプルコード
最後に、前回の必須コードに加えて今回のhead要素を加えたサンプルを載せておきます。
慣れないうちはコピーして編集してお使いください。
title要素もほぼ必須ですので、解説前ですが併せてサンプルとして記載しました。
title要素については、次の記事で詳しく説明します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ページのタイトルを記入してください。</title> <meta name="description" content="ページの概要説明を記入してください。。" /> <meta name="keywords" content="キーワード,ワード,サンプル" /> <meta name="author" content="製作者名" /> <meta name="copyright" content="copyright © サイト名" /> <!-- 次の記事で説明するhead要素内のタグも、必要に応じて記入してください。 --> </head> <body> <!-- body要素の中身を記入してください。 --> </body> </html>
meta要素については、これで終わりです。
お疲れ様でした！
次からは、title･link･script要素と、それぞれの要素の記載順について説明していきます。
次でhead要素内のタグについては終わりますので、もう少し読み進めてみてください。
