●HTMLのサンプル例→ >
№01 >
№02 >
№03 >
№04 >
№05 >
№06 >
№07 >
№00 >
END
№２．DOCTYPE宣言文、META、CSS・JAVASCRIPT記載例)
《02.DOCTYPE宣言文》
●0101.<!DOCTYPE>...HTMLのバージョンやDTDについて宣言します
●02①HTML4.01 Transitional DTD URI無し（互換モード）
●03②HTML4.01 Transitional DTD URI有り（標準モード）
●04③HTML4.01 Strict DTD URI無し（ 標準モード）
●05④HTML4.01 Strict DTD URI有り（標準モード）
●06⑤HTML4.01 Frameset DTD URI無し
●07⑥HTML4.01 Frameset DTD URI有り
●08⑦XHTML1.0 Transitional DTD
●09⑧XHTML1.0 Strict DTD
●10⑨XHTML1.0 Frameset DTD
●11⑩XHTML Basic 携帯端末向け
●12⑪XHTML Mobile Profile1.0 DTD 携帯端末向け
●13⑫XHTML1.1 Strict DTD
●14⑬XHTML Appendix1 PHPファイルでXML宣言をする場合
●15⑭HTML5
《03.META》
●1601.<meta>...ページの情報（概要やキーワード等）を記述します
《04.CSSスタイルシート・JAVASCRIPT記載例》
●1701.<style>...スタイルシートの記述例（<link>タグ含む）を紹介します
●1802.<script>...JavaScriptの記述例を紹介します
●
END
№２．DOCTYPE宣言文、META、CSS・JAVASCRIPT記載例)
DOCTYPE宣言文とは、HTMLのバージョンやDTDについて宣言することです。
W3C（HTMLの規格を制定する機関）ではすべてのHTML文書にDOCTYPE宣言文を記述するよう勧告しています。
HTML 4.01以降、使用するDTDを宣言する必要があるためDOCTYPE宣言文は必須となります。
以下HTML、XHTMLのDOCTYPE宣言文の記述例です。
なお、XHTMLではDOCTYPE宣言文の前にXML宣言を記入する必要があります
（文字コードがUTF-8の場合省略可）。また、HTMLとXHTMLでは要素のLANG属性の書き方が異なります。
▲Ｔｏｐ
HTML4.01 Transitional DTD URI無し（互換モード）
| ※ |
HTML4.01 Transitional DTD URI無し（互換モード）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
HTML4.01 Transitional DTD URI有り（標準モード）
| ※ |
HTML4.01 Transitional DTD URI有り（標準モード）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
HTML4.01 Strict DTD URI無し（ 標準モード）
| ※ |
HTML4.01 Strict DTD URI無し（ 標準モード）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
HTML4.01 Strict DTD URI有り（標準モード）
| ※ |
HTML4.01 Strict DTD URI有り（標準モード）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
HTML4.01 Frameset DTD URI無し
| ※ |
HTML4.01 Frameset DTD URI無し
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html" marginwidth="0" marginheight="0" noresize
frameborder="0" scrolling="no">
<frameset cols="300,*,300">
<frame src="left.html" marginwidth="0" marginheight="0" noresize
frameborder="0">
<frame src="main.html" marginwidth="0" marginheight="0" id="main" noresize
frameborder="0">
<frame src="right.html" marginwidth="0" marginheight="0" noresize
frameborder="0">
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
|
▲Ｔｏｐ
HTML4.01 Frameset DTD URI有り
| ※ |
HTML4.01 Frameset DTD URI有り
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html" marginwidth="0" marginheight="0" noresize
frameborder="0" scrolling="no">
<frameset cols="300,*,300">
<frame src="left.html" marginwidth="0" marginheight="0" noresize
frameborder="0">
<frame src="main.html" marginwidth="0" marginheight="0" id="main" noresize
frameborder="0">
<frame src="right.html" marginwidth="0" marginheight="0" noresize
frameborder="0">
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
|
▲Ｔｏｐ
XHTML1.0 Transitional DTD
| ※ |
XHTML1.0 Transitional DTD
<?xml version="1.0" encoding="utf-8"?>
<!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>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
XHTML1.0 Strict DTD
| ※ |
XHTML1.0 Strict DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
XHTML1.0 Frameset DTD
| ※ |
XHTML1.0 Frameset DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html" marginwidth="0" marginheight="0" noresize
frameborder="0" scrolling="no" />
<frameset cols="300,*,300">
<frame src="left.html" marginwidth="0" marginheight="0" noresize
frameborder="0" />
<frame src="main.html" marginwidth="0" marginheight="0" id="main" noresize
frameborder="0" />
<frame src="right.html" marginwidth="0" marginheight="0" noresize
frameborder="0" />
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
|
▲Ｔｏｐ
XHTML Basic 携帯端末向け
| ※ |
XHTML Basic 携帯端末向け
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
XHTML Mobile Profile1.0 DTD 携帯端末向け
| ※ |
XHTML Mobile Profile1.0 DTD 携帯端末向け
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=Shift_JIS" />
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
XHTML1.1 Strict DTD
| ※ |
XHTML1.1 Strict DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
XHTML Appendix1 PHPファイルでXML宣言をする場合
| ※ |
XHTML Appendix1 PHPファイルでXML宣言をする場合
<?php echo '<?xml version="1.0" encoding="utf-8"?>'."\n" ?>
|
▲Ｔｏｐ
HTML5
| ※ |
HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<p>参考資料：HTML5・ページ作成の基本</p>
<p>参考資料：HTML5・要素と属性</p>
</body>
</html>
|
▲Ｔｏｐ
<meta>要素は、ページの情報（使用する言語や文字コード、概要、キーワード等）を示す要素です。（終了タグがない空要素です。）
<meta>要素は、<head>～</head>の中に記述します。
Content-Type属性で文字コードを指定する際は、<title>要素等で日本語を使用するよりも前に必ず記述して下さい。
★XHTMLを宣言した場合の注意点
●文字コードの指定（Content-Type）
●スタイルシートの指定（Content-Style-Type）
●スクリプト言語の指定（Content-Script-Type）
●ページのリロード、ジャンプ（Refresh）
●ページキャッシュ（Pragma、Cache-Control、Expires）
●ページキーワード（keywords）
●ページ概要（description）
●検索エンジン用（ROBOTS）
●レンダリングモード（X-UA-Compatible）
| strict dtd○ |
tranasitional dtd○ |
frameset dtd○ |
xhtml 1.1○ |
xhtml basic○ |
汎用属性：id（XHTML 1.0、XHTML Basicのみ）、lang、dir、xml:lang
| 属性名 |
値 |
解説 |
| http-equiv |
Content-Type |
charset属性にHTML文書で使用する文字コードを指定。シフトJISは、Shift_JIS。日本語EUCは、EUC-JP。JISは、iso-2022-jp等です。 |
| Content-Style-Type |
使用するスタイルシート言語を指定 |
| Content-Script-Type |
使用するスクリプト言語を指定 |
| Refresh |
ページのリロードやジャンプ。秒数やURLを指定します。 |
| Pragma |
キャッシュの無効化 |
| Cache-Control |
キャッシュの無効化 |
| Expires |
キャッシュの削除日時を指定 |
| X-UA-Compatible |
ドキュメント互換モードを指定。Webページが特定のバージョンのIEの動作に関連付けられます。 |
| name |
author |
作者情報を記述 |
| copyright |
コピーライトを記述 |
| date |
作成日や更新日等を記述 |
| description |
ページの概要を記述 |
| generator |
編集に使用したアプリケーションを記述 |
| keyword |
ページのキーワードを記述 |
| replay-to |
連絡先（メールアドレス）を記述 |
| robots |
検索エンジンのロボットへの指示を記述 |
| ※ |
①サンプルコード（文字コードの指定）
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp" />
<meta http-equiv="Content-Type" content="multipart/alternative;
charset=iso-2022-jp" />
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=Shift_JIS" />
②サンプルコード（スタイルシートの指定）
<meta http-equiv="Content-Style-Type" content="text/css" />
③サンプルコード（スクリプト言語の指定）
<meta http-equiv="Content-Script-Type" content="text/javascript" />
④サンプルコード（ページのリロード、ジャンプ）
<meta http-equiv="Refresh" content="5" />
<meta http-equiv="Refresh" content="5;URL=http://shin-sapporo.com/" />
⑤サンプルコード（ページキャッシュ）
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Expires" content="Fri, 31 Dec 2010 23:59:59 GMT" />
<meta http-equiv="Expires" content="86400" />
⑥サンプルコード（ページキーワード）
<meta name="keywords" content="キーワードは、カンマ（ , ）で区切って
複数指定することができます" />
⑦サンプルコード（ページ概要）
<meta name="description" content="ページの概要を記述します" />
⑧サンプルコード（検索エンジン用）
<meta name="ROBOTS" content="ALL" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<meta name="ROBOTS" content="INDEX, NOFOLLOW" />
<meta name="ROBOTS" content="NOINDEX, FOLLOW" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="ROBOTS" content="NONE" />
⑨サンプルコード（レンダリングモード）
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=5" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
|
▲Ｔｏｐ
スタイルシートの記述には、いくつかの方法があります。
<head>～</head>内に直接スタイルシートの定義を記述する方法、各要素に直接指定する方法、<link>を使って外部スタイルシート指定する方法の記述例を紹介します。（CSS詳細説明はこちらを参照下さい。）
スタイルシート記述例
要素に直接指定
外部スタイルシートの指定
外部スタイルシート（メディアタイプ）の指定
固定・優先・代替スタイルシートの指定
| ※ |
スタイルシート記述例
①サンプルコード（<style>要素使用）
<html>
<head>
<style type="text/css">
p {
color: #333333;
font-size: 10pt;
}
</style>
</head>
<body><p>本文</p></body>
</html>
②サンプルコード（<style>要素に直接指定）
<html>
<head>ヘッダ</head>>
<body>
<p style="color: #333333;">xxxx</p>
<p style="font-size: 1em; color: #777777;">xxxx</p>
</body>
</html>
③サンプルコード（外部スタイルシートの指定）
<html>
<head>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>本文</body>
</html>
④サンプルコード（外部スタイルシート（メディアタイプ）の指定）
<html>
<head>
<link rel="stylesheet" type="text/css" href="example1.css" media="all" />
<link rel="stylesheet" type="text/css" href="example2.css" media="screen,
tv" />
<link rel="stylesheet" type="text/css" href="example3.css" media="print" />
</head>
<body>本文</body>
</html>
⑤サンプルコード（固定・優先・代替スタイルシートの指定）
<html>
<head>
<link rel="stylesheet" type="text/css" href="example1.css" />
<link rel="stylesheet" type="text/css" href="example2-base.css"
title="base" />
<link rel="alternate stylesheet" type="text/css" href="example2-alt.css"
title="alt" />
</head>
<body>本文</body>
</html>
|
▲Ｔｏｐ
JAVASCRIPTの記述には、いくつかの方法があります。
<head>～</head>、<body>～</body>内にJAVASCRIPTを記述する、外部JAVASCRIPTを指定する、
スクリプトを利用できないブラウザ向けに代替内容（<noscript>）を表示する場合の記述例を紹介します。
JAVASCRIPTの指定
外部JAVASCRIPTファイルの指定
NOSCRIPTの指定
| ※ |
JAVASCRIPT記述
①サンプルコード（JAVASCRIPT記述例）
<script type="text/javascript">
document.write("name:");
</script>
②サンプルコード（外部JAVASCRIPTファイルの指定）
<script type="text/javascript" src="example.js"></script>
③サンプルコード（NOSCRIPTの指定）
<noscript>
ここにスクリプトを利用できないブラウザ向け代替内容を記述
</noscript>
|
▲Ｔｏｐ
19xxxxx
▲Ｔｏｐ
RSSフィード