ページ関係のタグ．こひつじの家

　ページ関係のタグ

ホームページ作成の部屋－タグの使用法と使用例

　機能がページ全体にかかわる要素（タグ）を集めました。

1．`<!doctype>`	ドキュメントタイプを宣言する
2．`<html>，<head>` 等	HTMLの基本構造
3．`<title>`	ページにタイトルを付ける
4．`<meta>`	メタ情報を書き込む
5．`<body>`	ページ本体を定義する

記：2002-8-18

　1．ドキュメントタイプを宣言する

　<!doctype>

このページのトップへ

　doctypeは，どのバージョンのHTMLを基準に作ったページであるかを宣言する要素で，HTML文書の最初に置きます。

　時代とともにHTMLもバージョンアップを続けていますので，同じ要素（タグ）でもバージョンによって働きが違ったりする場合があります。!doctypeはブラウザにHTMLのバージョンを知らせて，作者が希望する表示をさせる働きをします。ただし現時点ではブラウザの対応が十分ではなく，この働きは必ずしも明瞭ではありません。

　!doctypeを使用しなくても，ブラウザは適切に認識して表示してくれます。逆に，!doctypeを使用すると，思ったような表示をしない場合もあります。

　<!doctype>の使用例

　HTML4.01を使用する場合は次の3種類のうちから選びます。

<!doctype html public "-//w3c//dtd html 4.01//en">
　バージョン4.01に忠実に従うという宣言です。非推奨（廃止予定）の要素やフレームは使用できません。

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
　非推奨（廃止予定）の要素が使用できます。ただしフレームは使用できません。

<!doctype html public "-//w3c//dtd html 4.01 frameset//en">
　transitional にフレーム使用が加わったものです。

　2． HTMLの基本構造

　<html>⇔</html> 　<head>⇔</head> 　<body>⇔</body>

このページのトップへ

　これらの要素（タグ）はHTML文書の構造を決める働きをします。

　<html>　<head>　<body>の使用例

　通常のHTML文書（フレームを使用するとき以外）では次のような構造になります。

<html>
  <head>
    ページの情報やタイトルなど
  </head>
  <body>
    表示するページの内容
  </body>
</html>

　3．ページにタイトルを付ける

　<title>⇔</title>

このページのトップへ

　Webページのタイトルを付けます。付けたタイトルはブラウザのタイトルバーに表示されるとともに，「お気に入り」や「ブックマーク」に登録したときに付けられる「ページの名前」にもなります。

　<title>の使用例

　次のように，<head>の要素として書き込みます。

<head>
  <title>
    今が旬の果物「季節と食べ物」
  </title>
</head>

4．メタ情報を書き込む
`<meta>`
このページのトップへ

　HTML文書に対する付加情報を記述します。

　使用文字コードの宣言

<meta http-equiv="content-type" content="text/html; charset=☆">

　HTML文書を記述する文字コードを宣言します。
　<head>と</head>の間で使用します。

　☆ ： shift_jis　　　文字コードとしてSHIFT-JISを使用
　☆ ： euc-jp 　　　　文字コードとして日本語EUCを使用
　☆ ： iso-2022-jp 　 文字コードとしてJISを使用

　基本的にブラウザは文字コードを自動的に判別しますが，ブラウザの設定やHTML文書の内容などによっては正しく判別できなくて文字化けすることがあります。しかし使用している文字コードを宣言することによって，文字化けしないようにできます。

　注意　

　使用した文字コードと宣言した文字コードが異なっていると必ず文字化けします。

　次の例のようにタイトルに日本語を使用する場合は，先に文字コードの宣言をしてください。

<head>
  <meta http-equiv="content-type" content="text/html;
     charset=shift_jis">
  <title>
    今が旬の果物「季節と食べ物」
  </title>
</head>

　別のページにジャンプする

<meta http-equiv="refresh" content="☆;url=★">

　☆秒後に★で指定したページにジャンプします。
　これを記述したページには，<html>，<head>，<body> タグは使用しません。

　応用例

(1) WebサイトのURLが変わったときに旧ページでこの記述を使用すれば，
　　自動的に新しいページへジャンプさせることができます。
(2) 導入用のページを少しだけ表示させてから，メインページを表示させる。

　次の例では 3 秒間だけ「いらっしゃいませ」と表示して，メインページにジャンプします。

<meta http-equiv="refresh" content="5;url=web-023.htm">
<title>
  最初のページ
</title>
<center>
  <br>
  <h1><font color="#339933">いらっしゃいませ</font></h1>
<br><br>
自動的に次のページにジャンプします。<br>
<br>
5秒待ってもジャンプしないときは
<a href="web-023.htm"><b>ここ</b></a>
をクリックしてください。
</center>

　⇒サンプル

　文書情報を書き込む

<meta name="☆" content="★">

　☆に情報の種類，★に情報の内容を書き込みます。
　情報の種類には次のようなものがあります。その他任意の名前を付けてもかまいません。

author 著者

build ページ開設日

classification 内容の種類

date ページ更新日

description 内容の説明

generator HTMLを作成したソフト

keywords キーワード

publisher 出版社

robots

検索ロボットに対する指示
index,follow ：このページも下位フォルダも公開可
index,nofollow ：このページは公開可，下位フォルダは禁止
noindex,follow ：このページは禁止，下位フォルダは公開可
noindex,nofollow ：このページも下位フォルダも禁止

　robotsの記述に対する対応は，各検索サイトによって異なります。ですからこの記述が必ず守られるという保証はありません。

　これ等の情報は必ず書き込まなければいけないものではありません。しかしWebページが情報を効率良く提供するために，今後この記述が重要になるといわれています。

　使用例

<head>
  <meta http-equiv="content-type" content="text/html;
     charset=shift_jis">
  <meta name="author" content="Y. Isokane">
  <meta name="keywords" content="ホームページ,HTML,タグ">
  <meta name="description"
    content="要素（タグ）ごとの説明と使用例">
  <meta name="generator" content="Lamb ver.3.12">
  <meta name="robots" content="index,nofollow">
  <title>
    タグ辞典
  </title>
</head>

　5．ページ本体を定義する

　<body>

このページのトップへ

　実際に表示されるページを<body>と</body>の間に置きます。

　ページの背景に色を付ける

　<body bgcolor="☆">　　　廃止予定　

　［☆ ：色の指定］　ページ全体に背景色を付けます。
　bgcolor属性を省略した場合は，ブラウザで設定した背景色（たとえば白や薄灰色など）になります。

　<body bgcolor="☆">の代わりに，スタイルシートで
　body {background-color:☆}とすることが推奨されています。

　ページの背景に画像を張り付ける

　<body background="☆">　　　廃止予定　

　［☆ ：画像のURL］　ページ全体に画像を張り付けます。
　ページの画面サイズよりも画像のサイズが小さい場合は，画像がタイル状に張り付けられます。
　background属性を省略した場合は，背景画像なしになります。ただしブラウザで標準の背景画像を設定してある場合は，その画像が表示されます。

　<body background="☆">の代わりに，スタイルシートで
　body {background-image:☆}とすることが推奨されています。

　標準の文字色を設定する

　<body text="☆">　　　廃止予定　

　［☆ ：色の指定］　標準の文字色を設定します。
　IE以外のブラウザでは，画像にborderで枠を指定してあるときの枠の色も，この色になります。
　text属性を省略した場合は，ブラウザで設定した色（たとえば黒）になります。

　<body bgcolor="☆">の代わりに，スタイルシートで
　body {color:☆}とすることが推奨されています。

　リンクアンカーの色を設定する

　<body link="☆">　　　廃止予定　

　［☆ ：色の指定］　リンクアンカーになっている文字や画像の枠の色が，この色になります。
　link属性を省略した場合は，ブラウザで設定した色（たとえば青）になります。

例外

ソース	Webページの表示
`<font color="red">では<a href="splm.html"> ここ</a>をクリックしてください。</font>`	ではここをクリックしてください。
`では<a href="splm.html"><font color="red"> ここ</font></a>をクリックしてください。`	ではここをクリックしてください。

解説
　上の例のように，<FONT>タグによって文字の色を指定してあっても，<a>タグの中の文字の色はリンクアンカーの色で表示されます。しかし表の2番目の例のように<A>タグの中で<font>タグによって文字の色を指定すると，リンクアンカーの色は「すでに見たページ」と「まだ見てないページ」にかかわらず，<font>タグで指定した色になります。

　<body link="☆">の代わりに，スタイルシートで
　a.link {color:☆}とすることが推奨されています。

　すでに見たことがあるページについてのリンクアンカー色を設定する

　<body vlink="☆">　　　廃止予定　

　［☆ ：色の指定］　リンク先のページをすでに見たことがある場合（Visited Link），リンクアンカーになっている文字や画像の枠の色が，この色になります。
　vlink属性を省略した場合は，ブラウザで設定した色（たとえば紫）になります。

　<body link="☆">の代わりに，スタイルシートで
　a.visited {color:☆}とすることが推奨されています。

　ページにアクセス中のリンクアンカー色を設定する

　<body alink="☆">　　　廃止予定　

　［☆ ：色の指定］　リンクアンカーをクリックした瞬間から，リンク先のページが表示されるまでの間（Active Link），リンクアンカーになっている文字や画像の枠の色が，この色になります。
　alink属性を省略した場合は，ブラウザで設定した色（たとえば青）になります。

　<body bgcolor="☆">の代わりに，スタイルシートで
　a.active {color:☆}とすることが推奨されています。

　<body>の使用例

<body color="#ffcccc" text="#333333"
    link="#0000ff" vlink="#9900ff">

↓スタイルシートを使用した例

<head>
  <style type="text/css">
    <!--
    body {background:#ffcccc; color:#333333}
    a.link {color:#0000ff}  /* まだ見てないページ */
    a.visited {color:#9900ff} /* すでに見たページ */
    a:hover {color:#ff0000}   /* リンクにマウスが乗った */
    -->
  </style>
  <title>
    タグ辞典
  </title>
</head>
<body>

このページのトップへ