このページは書きかけの文章です。

WEBﾘﾌｧﾚﾝｽ/(X)HTMLﾘﾌｧﾚﾝｽ

本章では、後述するＣＳＳリファレンスやＪａｖａＳｃｒｉｐｔリファレンスを利用するにあたって、最低限心得ておく必要のあるものを中心に解説していく。

※用語については右側の語句をクリックすると説明ページへ移動します。

(X)HTMLリファレンス：目次

１．HTMLの解説
２．HTML文書の作成と公開
- 文書作成時のマナー
３．HTMLのアウトラインガイド
４．HTMLのエンコード

１．HTMLの解説

HTMLとは、World Wide Web（以下、WWWといいます）上でコンテンツを表現するためのHyperText Markup Languageの略です。そう、コンピュータ言語のひとつなのです。簡単に言えば今ご覧になっている「ウェブページを記述するためのすんごいテキスト言語」なのです。

HTMLは大きく、従来のHTML(現在最も使用されているもの)と、その拡張させたXHTMLに大別されます。この原稿を書いている時点では、表示してくれるブラウザの解釈の違いにより、一長一短ってとこです。

というか、プライベートなホームページ作りには、従来のHTMLで充分で、現状それすらきちんと書けていないページは膨大にあるのです（なので、表示するブラウザは間違った使用方法で書かれたものでも各社一生懸命表示しようと努力する結果、正しく書いても表示結果が違うという現象が起きています）。

概論

「概論」といいつつ、長くなります…。

現在の最も標準的なHTML4 (HTML4.01)について

本稿では、HTMLの基礎・基本を習得するにあたって、あなたが書こうとしているホームページ（ウェブサイト）作成の基本となるHTMLでどういったことができるのかの概論と、具体的な凡例で説明することにします。

HTMLで出来ること

WWWの主なリソース（情報資源）としては以下の４種類があります

テキスト
画像
動画
音楽(音声)

です。これらをひとつのページにまとめたのが、ウェブページ(Web Page)です。また、これら複数のページを本のようにまとめた集合体（Web Page群）が置いてある場所をウェブサイト(Web Site)*1という。

ひとつのページは、テキストコンテンツを記述したファイル(.html)や、画像コンテンツ(.gif .jpg .png)など複数のファイルで構成することができます。

HTMLで記述された文書のことを、HTML文書(HTML Document)という。

HTMLの第一の目的は、文書（のコンテンツ）を構成することです。

HTML文書のコンテンツで最も重要なのが、テキスト（文章）です。このテキストに対して、「見出し」「段落」「リスト」「表」など、それぞれ構造化してマークアップ（修飾）するのです。

体表的な要素としては、H1要素、p要素、ol,li要素、table要素などがあります。

HTMLを習得する

HTMLは、WWW上で使用する出版言語としての役割を持ち、どんな環境（勿論コンピュータの環境のことです、サーバー/クライアントマシン、モバイル）でも見ることができ手かつ軽に利用できることを前提に開発されたものです。従って、HTMLデータは特殊なフォーマットではなく、テキストを一番簡単に記述できて基本中の基本であるテキスト形式(フォーマット）を採用しています。

ではそのテキストファイルを編集してみましょう。っと、その前にテキストファイルを編集するソフトウェアには、以下の３種類のものがあります。

HTMLエディタ（パッケージ版）：高機能、マークアップ要素やパラメータをほとんど意識することなく書ける
HTMLエディタ（フリーソフト）：必要最低限＋小気味よい。また、構造化仕様に準拠したきれいなHTML文書が書ける
テキストエディタ：ハイライト表示程度

私の場合は、あまり参考にはならないと思いますが…、始めは他人の書いたHTMLのコンテンツやちょっとしたバグを修正することが多かったので、単純なテキストエディタで充分でした。ちなみに秀丸を利用してます。タグやコメント部分などの強調表示ができるので重宝してます。次第に自分のWebサイトを立ち上げるころには、専用のHTMLエディタを使えるようになった方が効率的なのは明らかなのですが、パッケージ版は独自機能があったり多機能すぎるため、使い勝手に慣れるのに時間かかりそうで、コストパフォーマンス的に失敗したらもったいたいと思い、フリーソフトを利用することにしました。

私の場合、各ページのフッタ部にもあるとおり、Satoshi Suda　氏作成のリンクウェア：ez-HTMLを利用しています。

■ソフトウェアの紹介

市販の「ウェブサイト制作ツール」（以下WYSIWYGと省略）は画像なども簡単に挿入でき、レイアウトなども簡単にできますが、その反面font要素を乱用したり何度も編集している間ゴミのようにタグが残ってしまうという問題点があります。当ソフトウェアは主に手打ちでHTMLソースを記述する人向けのために開発されています。また、WYSIWYGで制作したHTML文書のちょっとした編集などにも使う事ができます。

また、このHTMLエディタはほとんどすべての規格のHTML文法データを包括しているため、適切な場所に適切な要素、属性、属性値を自動的に候補として出してくれるため、文法にも正確で美しいソースをコーディングする事ができるのが特徴です。

また、CGIなどの作成にも最新版から本格的に対応し始めました。私がCGIのソースを書くときに非常に不便に感じたため、出来る限り手早くラクに操作できるか？という事を考慮して搭載しました。基本的には私がCGIを書く時にHTMLもひとつでできたら便利かな？という事から搭載したものです。ので、軽く編集するというよりもWeb制作ならこれひとつで事足りる…という事を今度は重視したいと思っています。

※Web Frontier ⇒ ez-HTML ⇒ ソフトウェアの紹介　の抜粋

筆者の感想：
　■タグ入力の際、"<"を入れると記述可能な候補が出てくるので、DTDに合った構造化文書が無意識に簡単に書ける。
　■スタイルシートの編集がポップアップウィンドウで簡単に編集できる。
　■HTML文法検証(Another HTML-lint)がワンクリックで可能（設定がややこしいが…）。
　■プレビューがIEとnetscapeの２種類可能。
　■サーバーへの転送(FTP転送)がファイルごとにワンクリックで可能。
　■まぁ、とにかくW3Cの仕様にほぼ完全準拠しているのがよい。
　などなど…

２．HTML文書の作成と公開

先にも述べたとおり、HTML文書はテキスト形式のファイルで作成されます。公開するには、Webサーバー(レンタル,又は独自に構築した配信サービス)に対して作成したHTML文書(HTMLファイル,CSSファイル,やJavaScriptファイル)などを転送する必要があります。

HTML文書作成時のマナー

ここでは、筆者が最低限記述しておくべきと考えるタグの例を紹介しよう。

ページ全体の基本

HTML文書は、最初の大区分としては、バージョン情報等の宣言と、本文に分けられる。更に本文はヘッダ部と本体として定義されている。つまりは、以下の３つから構成されているといえる。

HTMLバージョン情報
ヘッダ部（宣言文）
本体（実際のコンテンツ部分）

《sample.html》

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">　　おまじない程度

<head>　　　<!-- ヘッダ部 開始 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ここのタイトルは重要です。</title>
<meta http-equiv="content-script-type" content="text/javascript" />　　← JavaScript使用時は必須
<meta http-equiv="content-style-type" content="text/css" />　　　　　　← スタイルシート使用時は必須
<script type="text/javascript" src="./common/common.js" charset="utf-8"></script>
<link media="screen,print" rel="stylesheet" style="text/css" href="./common/common.css" charset="utf-8" />
</head>　　　<!-- ヘッダ部 終了 -->

<body>　　　<!-- 本体 開始 -->

・・・ここに実際のコンテンツを記述します。

</body>　　　<!-- 本体 終了 -->

</html>

３．HTMLのアウトラインガイド

HTMLバージョン情報：ドキュメントタイプの定義（DTD)

HTMLを作成するために、メーカー仕様ではない世界標準を策定する団体であるW3Cグループによる定義に従って記述するのが望ましく、また短い歴史の中でもいくつも改変されてきたわけで、自分がどの定義に従って記述しているかを、サーバー及びクライアントへ確実に通知(宣言)する必要があります。

この宣言だけは、通常の要素とは違った形式で表現(記述)します。

《sample.html》

<!DOCTYPE

公開識別子とシステム識別子

自分自身がどの仕様に基づいて記述しているかを、サーバー・クライアントに正しく伝える。（正しく処理してくれるかどうかは別問題）

《公開識別子》バージョン指定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

《公開識別子》＋《システム識別子》

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

注意： W3Cでは、「HTML 4.01仕様は、3つのDTDを規定しており、･･･次の3つの何れかの文書型宣言を含めねばならない」と記している。
また、DTDのシステム識別子を宣言する/しないで、ブラウザの挙動が変わりますので注意が必要です。

(1)厳密型DTD

※ W3C の仕様で「推奨しない」とされる要素や属性、さらにフレーム用の内容を使用しない

HTML4.01厳密型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

(2)移行型DTD

※ 厳密型DTDに加えて、W3C の仕様で「推奨しない」とされる要素や属性も使用する

HTML4.01移行型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

(3)フレーム設定型DTD

※ 移行型DTDに加えて、フレーム用の内容も使用する

HTML4.01フレーム設定型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

注意： HTML4.01 の仕様において「非推奨（廃止、または廃止予定）」とされる古い要素や属性に関しては、Transitionalを宣言したとしても、CSSを使って使用することがW3Cで推奨されている

HTML文書本文

HTML要素

１ページに１組しか出現しません。また、HTMLの言語を明示することができます。

HTML4.01

<html lang="ja">
…
<html>

XHTML 1.0

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
…
<html>

HTML文書のコンテンツをこの中に記述します。１ページに１組しか出現できません。

HEAD要素

<html>
<head>
…
</head>
</html>

HTML文書の、言語、文書タイトル、スタイルシートの利用宣言、JavaScriptの利用宣言、サーチエンジン向け情報（キーワード、説明など）、作者に関する情報、ナビゲーション情報などが記述できます。

１ページに１組しか出現しません。

具体的に記述できる要素は、title要素、meta要素、link要素、style要素、script要素です。

title要素

meta要素

<html>
<head>
<meta …       >
</head>
</html>

HTTPヘッダの代用としてのmeta要素

http-equiv属性を使用することで、HTMLヘッダと同等のメタデータを埋め込める。日本語を扱う場合はほぼ必須である文字セット(言語ではない)を定義できる。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >

Type : 文字コード［Charset］: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >
Language : 言語: <meta http-equiv="Content-Language" content="ja" >
Description : 紹介・説明文: <meta name="description" content="HPの紹介・説明文を記述する" >
Keywords : キーワード: <meta name="keywords" content="半角カンマ区切りで,キーワードとなる語句を,最大１２個程度" >
Javascript を使う
CSS を使う
Subject : 主題
Abstract : 要約・抜粋
Author : 著作者・制作者
Owner : オーナー
Designer : デザイナー
Publisher : 出版者
Creation Date : 作成日
Copyright : 著作権表示
Telephone : 電話番号
Facsimile : ファクス番号
Country Code : 国番号
Generater : ページ作成ソフト
Favicon : ブラウザ用アイコン
Targeted Geographic Area: 地理的対象エリア
Distribution: メタタグの適用対象範囲
Coverage : サービス提供対象
Classification : カテゴリ・分類
Document Class
Rating : 対象年齢層
Robots : 検索ロボットへの指示
No Archive : 保存させない
Pragma : キャッシュさせない
No Image Index: 画像を検索させない
No Image Click: 画像へリンクさせない
Expires : 有効期限
Revisit-After : ロボット再巡回
Refresh : 秒数指定でページ移動
No Image Toolbar: ツールバーを表示させない

link要素

Mail Address : 著者メールアドレスナビゲーション用リンク［start］ナビゲーション用リンク［next］外部CSSを読み込む

style要素

script要素

外部Javascriptを読み込む

<html>
<head>
<script  type="text/javascript"  src="/common/prototype.js" ></script>
</head>
</html>

読み込みエラーを表示する方法（デバッグ用？）

<script  type="text/javascript"  src="/common/prototype.js"
  onerror="alert('Error: failed to load ' + this.src)"></script>

案の定うまく動作しない

<!-- 
…～この間はコメント扱いになりブラウザ上で表示されません～
-->

注意： DOCTYPE宣言より前に記述すると一部のブラウザではDOCTYPE宣言の形式に関わらず過去互換モードとしてレンダリングされることがあります。

４．HTMLのエンコード

日本語（２バイト文字）のエンコード

URLエンコード・デコードフォーム Powered by Web便利ツール

mailto: の場合

<a>タグでメールを送信する場合、通常は下記のように記述する。

メール送信

<a href="maileto:kim_shinrak@yahoo.co.jp">


上記アドレス部をエンティティ化すると
m&#97;ile&#116;&#111;&#58;kim&#95;shi&#110;&#114;&#97;&#107;&#64;&#121;&#97;h&#111;o&#46;&#99;&#111;&#46;j&#112;
などで表すことができる。

注意：メールアドレス収集ロボットによって収集され、売買され、スパムメールなどの迷惑メールが届くようになる！

既に、迷惑メールが届いている場合には対応できないが、未然に防ぐ方法として、一番単純なのは、メールアドレスをエンティティーコード（数値文字実体参照）に変換して表記するものである。

ネットで見つけたＨＴＭＬエンティティー生成サイトを紹介します。

IT用語辞典

Augus-Site：目次

※現在お使いのブラウザはJavascriptの設定が無効になっているか利用できません。Javascriptの設定を有効にし、ご覧ください。

設定方法がわからない方は『ブラウザの設定・操作』のヘルプページを参照してください。