Web初心者のホームページを作ろう~第3回~「ヘッダーの主な役割と機能」

 皆さんこんにちはKUJIRAです。ここ最近、涼しい日が何日か続きましたが、今日はまた暑いですね。KUJIRAは、未だにエアコンが手放せないでいます。

 前回は<body>タグ内に好きな文章を書き込むのと同時に、リンクを張りました。今日は、ヘッダー部分(<head>タグ内)の記述について簡単に説明していきます。

 ホームページにおいてヘッダーは直接ブラウザには表示されません。表示されないのに何であるの?と思う人もいるかもしれませんが、ちゃんと重要な役割を担っているのです。

 ヘッダーの例を以下に挙げます。

———————————————————————————–

<html>
 <head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  <link rel=”stylesheet” href=”./css/design.css” type=”text/css” />
  <title>KUJIRA STATION</title>
  <meta name=”Keywords” content=”クジラステーション,KUUJIRA STATION,KUJIRA’s notes,spy hopping,KUJIRA’s library” />
  <meta name=”description” content=”習得した技術の紹介から日々の出来事まで、KUJIRAの日常、身の回りに起こった出来事をコンテンツにしました。皆様楽しんでいってください。” />
 </head>
 <body>
 </body>
</html>

———————————————————————————–

 では順に説明していきます。

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

 これは表示する文字エンコードを指定しています。使用しているエディタのエンコード設定と、一緒の設定にしてください。ここの記述を間違えると、閲覧時の文字化けの原因となるので注意しましょう。

<link rel=”stylesheet” href=”./css/design.css” type=”text/css” />

 これはCSSファイルを指定するための項目です。CSSを使用する人は必ず記入してください。「href=”~”」以外のところは提携文なので覚えてしまったほうがいいです。「href」属性の部分には、パラメータとしてCSSファイルの相対パス、もしくはURLを書きましょう。

<title>KUJIRA STATION</title>

 これはタイトルです。この部分がブラウザのタイトルバーに表示されます。今はタブ形式のブラウザが主流になっていて、タブ部分にもこの表示が出ます。

<meta name=”Keywords” content=”KUJIRA,STATION,kujira,鯨,くじら,クジラ,KUUJIRA STATION,KUJIRA’s notes,spy hopping,KUJIRA’s library” />

 これは、キーワードです。ここに入力された単語が検索エンジンの検索対象として選ばれます。キーワード数は10以下になるように心がけて設定しましょう。

<meta name=”description” content=”習得した技術の紹介から日々の出来事まで、KUJIRAの日常、身の回りに起こった出来事をコンテンツにしました。皆様楽しんでいってください。” />

 これは、検索エンジンで検索した際にサイトの説明として現れる文です。文の長さは100文字程度を目安に書くと良いでしょう。

 この他にも、自動更新を行うための記述や、自動ジャンプ等色々書き込むことができます。ヘッダーを正しく入力する事は、SEO対策にもなりますので興味のある方は、他の機能についても勉強してみてください。

 次回はtableとdivについて説明します。それでは、KUJIRAでした。