索引

共通項目

HTML 文書の基本構造
コンテンツ・モデル
グローバル属性
DOM インタフェース
その他

　　ここでは，HTML の共通項目に関して説明します．ただし，HTML に関する知識が全くない状態では理解しにくい箇所もあるかと思います．最初の段階では，「 HTML の基本構造」と「その他」だけを読み，他の部分はある程度学習してから読む方が良いかもしれません．

HTML 文書の基本構造
　　HTML（ Hyper Text Markup Language ）には，タグと呼ばれる多くの命令があり，タグによって文章を修飾（文字の大きさ・色を変える，箇条書きにする，表形式にする，等）したり，図を挿入したりすることによって，見栄えの良い文章を作成することになります．

　　タグは，一般的に，
```
<要素名>・・・・</要素名>			
```
のように書かれ，「<要素名>」を開始タグ，「</要素名>」を終了タグと呼びます．なお，要素によっては，終了タグがないものや省略しても構わないものがあります．私の Web サイトにおいても，省略可能な箇所は省略している場合が多いかと思いますが，ブラウザによってその解釈が異なる場合もあり，できる限り省略しない方が賢明かと思います．

　　例えば，B 要素を使用して，
```
文字を<B>太く</B>表示する			
```
のように記述すると，「太く」の部分が太く表示されます．また，要素に許される属性を使用することによって，より細かな制御も可能となります．例えば，SPAN 要素の STYLE 属性を使用し，
```
文字の背景を<SPAN STYLE="background-color: pink">ピンク</SPAN>にする			
```
のように記述すると，「ピンク」の部分の背景色がピンクになります．

　　このように，HTML ファイルにおいては，要素や属性は表示されず，その結果だけが表示されることになります．また，通常のテキスト文書もそのまま表示されますが，改行や複数の半角スペースは無視されます．なお，要素名や属性名は，大文字でも小文字でも構いません．

　　また，HTML ファイル全体は，以下に示すような構成になります．なお，行番号は，HTML とは関係ありません．これ以降の説明についても同様です．
```
01	<!DOCTYPE HTML>
02	<HTML>
03		<HEAD>
04			<TITLE>HTML を理解しよう！</TITLE>
05			<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
06		</HEAD>
07		<BODY>
08			本文の記述（この部分が表示される）
09		</BODY>
10	</HTML>			
```
　　1 行目では，HTML のバージョン情報を記述し（この場合，HTML5 であることを示す），HTML 要素で区切られた 02 ～ 10 行目が HTML ファイルの本体になります．本体は，更に，HEAD 要素で区切られ，ページ全体の制御を行うヘッダ部分と，BODY 要素で区切られ，本文を記述する部分（この部分が表示される）に分かれます．

　　HEAD 要素内には，多くの要素が含まれますが，最低限，ページのタイトルを示す TITLE 要素（ブラウザのタブのタイトル）．及び，ページを記述している文字コードを示す META 要素だけは記述しておいた方が良いと思います．
コンテンツ・モデル
　　HTML の各要素は，複数のカテゴリーに分類されます（カテゴリに属さない場合，又は，複数のカテゴリーに属す場合もある）．各要素はコンテンツ・モデルを持ち，その要素のコンテンツ・モデルで記述されるコンテンツだけを，その要素の中に入れることができます．また，コンテンツ・モデルの説明欄に "トランスペアレント" と記述されている要素が存在します．トランスペアレント要素のコンテンツ・モデルは，その親要素のコンテンツ・モデルを受け継ぎます．
　　カテゴリーには，以下に示すようなものが存在し，それらの関係は右図に示すとおりです．ただし，いくつかの要素は，他の部分で定義されている他のカテゴリーに属する場合もあります．
1. メタデータ・コンテンツ　　コンテンツの表示・動作や他のドキュメントとの関連性をセットしたり，他の "帯域外" の情報を伝達するためのコンテンツ
2. フロー・コンテンツ　　本体の記述に使われるほとんどの要素が含まれるコンテンツ
3. セクショニング・コンテンツ　　見出しやフッターの範囲を定義するためのコンテンツ
4. ヘッディング・コンテンツ　　セクションのヘッダーを定義するためのコンテンツ
5. フレージング・コンテンツ　　ドキュメントのテキストを意味するコンテンツ
6. エンベッディッド・コンテンツ　　ドキュメントに他のリソースを組み込むための，または，ドキュメントに挿入される他の語彙のためのコンテンツ
7. インタラクティブ・コンテンツ　　ユーザー・インタラクションに特化したコンテンツ
8. パルパブル・コンテンツ　　知覚できるコンテンツ．フロー・コンテンツ，または，フレージング・コンテンツは，少なくとも一つ以上のパルパブル・コンテンツを含む必要がある．

グローバル属性とは，すべての要素で共通に使える属性のことであり，以下に示すようなものが存在します． accesskey　　アクセスキーを指定する．「 alt 」キーとアクセスキーを同時に押すと，フォーカスがそのキーが定義されている箇所に移動する． -> 使用例とそのソースコード <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>accesskey</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">accesskey の例</H1> <A HREF="https://www.sist.ac.jp/">静岡理工科大学のホームページ</A> <P> <A HREF="https://informatics.sist.ac.jp/suganuma/" ACCESSKEY="c">菅沼のホームページ</A>： accesskey として c が設定してある </BODY> </HTML> class　　要素に名前を割り当てる．ある要素について 1 つ以上のクラス名を割り当てることが可能である（スペースで区切って指定）．class 属性は，スタイルシートの選択子やユーザエージェントによる処理等のために使用される． id　　要素に名前を割り当てる．この名前は文書中で一意でなければならない．HTML において，ID 属性は，次の各々の役割を果たす． スタイルシートの選択子 ハイパーテキストリンクの目標アンカー スクリプトから特定要素を参照するための手段 宣言された OBJECT 要素の名称 ユーザエージェントによる処理一般に使用．（例えば，HTML 文書を他のフォーマットに変換するなど） class と id の使用例とそのソースコードを下に示す．09 行目は，class 属性が red である要素内の全ての文字色を赤にする，10 行目は，class 属性が under である要素内の全ての文字に下線を引く，また，11 行目は，id 属性が lime である要素内の文字色を lime にすることを意味している．その結果，19 行目の表示結果の文字色は赤に，20 行目の表示結果の文字色は lime に，また，21 行目の表示結果の文字色は赤で，かつ，下線が引かれる．以下の例においても同様であるが，08 行目～ 12 行目の STYLE 要素内の記述方法については，スタイルシートの記述方法を参照のこと． 01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>class と id</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <STYLE TYPE="text/css"> 09 .red { color: red } 10 .under { text-decoration: underline } 11 #green { color: lime } 12 </STYLE> 13 </HEAD> 14 <BODY CLASS="white"> 15 <H1 CLASS="center">class と id の例</H1> 16 <DL> 17 <DT>class と id を使用してスタイルを指定した例です． 18 <P> 19 <DD CLASS="red">class を使用</DD> 20 <DD ID="green">id を使用</DD> 21 <DD CLASS="red under">class を使用</DD> 22 </DL> 23 </BODY> 24 </HTML> contenteditable　　編集可能か否かを指定 -> 使用例とそのソースコード 空又は"true" ：編集可能 "false" ：編集不可能 "inherit" ：親の属性を引き継ぐ <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>contenteditable</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">contenteditable の例</H1> <DIV CLASS="center">（各文章は DIV 要素内の文字列であり，本来編集不可能）</DIV> <P> <DIV CONTENTEDITABLE="true"> CONTENTEDITABLE="true"　：　この文章は編集可能です． </DIV> <P> <DIV CONTENTEDITABLE="false"> CONTENTEDITABLE="false"　：　この文章は編集不可能です </DIV> </BODY> </HTML> dir　　テキストの表示方向 -> 使用例とそのソースコード "ltr"：左から右 "rtl"：右から左 "auto"：自動 <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>dir</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">dir の例</H1> <DIV DIR="ltr">左から右へ</DIV> <DIV DIR="ltr">left to right</DIV> <DIV DIR="rtl">右から左へ</DIV> <DIV DIR="rtl">right to left</DIV> <DIV DIR="auto">自動的に記述</DIV> <DIV DIR="auto">auto</DIV> </BODY> </HTML> draggable　　ドラッグ＆ドロップが可能か否かを示す "true" ：可能 "false" ：不可能 "auto" ：ユーザーエージェントのデフォルトの挙動 dropzone　　ドラッグ＆ドロップの方法 -> draggable と dropzone 使用例とそのソースコード "move" ：移動 "copy" ：コピー "link" ：元のデータへのリンク <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>drag & drop</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> <STYLE> #target { width:450px; height:130px; margin:5px; background-color:#EEFFEE; border:1px solid #00cc00; } </STYLE> <SCRIPT TYPE="text/javascript"> // ドラッグ開始（ドロップするデータの ID 名を取得） function drag_start(event) { event.dataTransfer.setData("fig", event.target.id); } // ドラッグ要素がドロップ要素に重なっている間の処理 function dragover(event) { event.preventDefault(); } // ドロップ時の処理 function drop(event) { var id_name = event.dataTransfer.getData("fig"); var drag_elm = document.getElementById(id_name); event.target.appendChild(drag_elm); event.preventDefault(); // drop イベントをキャンセル } </SCRIPT> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">drag & drop の例</H1> <DL> <DT>どの花が好きですか？好きな順に下のエリアに入れて下さい．？ <p> <DD><DIV ID="base" onDragover="dragover(event)" onDrop="drop(event)"> <IMG SRC="../ayame.gif" ID="ayame" DRAGGABLE="true" onDragstart="drag_start(event)"> <IMG SRC="../ajisai.gif" WIDTH="115" HEIGHT="121" ID="ajisai" DRAGGABLE="true" onDragstart="drag_start(event)"> <IMG SRC="../sakura.gif" ID="sakura" HEIGHT="121" DRAGGABLE="true" onDragstart="drag_start(event)"> </DIV></DD> <p> <DD><DIV ID="target" DROPZONE="copy" onDragover="dragover(event)" onDrop="drop(event)"></DIV></DD> </DL> </BODY> </HTML> hidden　　表示を隠す -> 使用例とそのソースコード <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>hidden</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">hidden の例</H1> <DL> <DT>１．<SPAN HIDDEN>表示内容</SPAN>：表示されない <DT>２．<SPAN>表示内容</SPAN>：表示される </DL> </BODY> </HTML> inert　　要素が不活性であることを示す（ boolean ） itemid　　要素のグローバルな名前 itemprop, itemref, itemscope, itemtype　　特定の種類の情報（名前，住所，Web ページなど）を記述するコンテンツにラベル付けするために使用 lang　　使用する言語を指定する． "fr"：フランス語 "de"：ドイツ語 "ja"：日本語 "en"：英語　等 spellcheck　　編集可能な要素に対して，スペルチェックの方法を指定する． -> 使用例とそのソースコード 空または"true"：スペルチェックを行う "false"：スペルチェックを行わない "default "：デフォルト <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>spellcheck</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">spellcheck の例</H1> <DIV CLASS="center">（単語の次に半角スペースを入力した時点でチェックされる）</DIV> <P> <FORM> スペルチェックを行う： <INPUT TYPE="text" SIZE="20" VALUE="summer vacasion" CONTENTEDITABLE="true" SPELLCHECK="true"> <P> スペルチェックを行わない： <INPUT TYPE="text" SIZE="20" VALUE="summer vacasion" CONTENTEDITABLE="true" SPELLCHECK="false"> </FORM> </BODY> </HTML> style　　要素のスタイル情報を指定する．STYLE 属性の指定方法は，デフォルトスタイルシート言語によって決定される． -> 使用例とそのソースコード（「スタイルシート」参照） <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>style</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">style の例</H1> <DL> <DT>style 属性で<SPAN STYLE="color: red; text-decoration: underline">スタイル</SPAN>を指定した例です． </DL> </BODY> </HTML> tabindex　　当該文書中でのタブ移動順位（「 Tab 」キーを押したとき，フォーカスが移動する順位）を指定する．この値は 0 から 32767 までの数でなければならない． -> 使用例とそのソースコード <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>tabindex</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">tabindex の例</H1> <DIV CLASS="center">（TAB キーを押してみて下さい）</DIV> <P> <FORM> <INPUT TYPE="text" VALUE="No.2" TABINDEX="2"> <P> <INPUT TYPE="text" VALUE="No.3" TABINDEX="3"> <P> <INPUT TYPE="text" VALUE="No.1" TABINDEX="1"> </FORM> </BODY> </HTML> title　　要素に関する助言的情報を提供する．例えば，要素の上にマウスカーソルを持って行くと，title 属性で指定された短い文章が表示される． -> 使用例とそのソースコード <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>title</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">title の例</H1> <DL> <DT><SPAN TITLE="title 属性の使用例です" STYLE="color: red; text-decoration: underline">ここ</SPAN>にカーソルを持って行って下さい． </DL> </BODY> </HTML> translate　　翻訳するか否かを示す（ yes, no, inherit ）

　　次に示すイベントハンドラ・コンテンツ属性もすべての要素で使用できます．ただし，すべての要素で意味を持つものとは限りません．また，アスタリスクが付けられた属性は，BODY 要素に指定されたときは，違う意味を持ちます． -> イベント処理の例とそのソースコード

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>イベント処理の方法</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<STYLE>
		SPAN.cyan { color: cyan }
	</STYLE>
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
					<!-- JavaScript -->
	<SCRIPT TYPE="text/javascript">
					// ロード時に onresize に対する処理を追加
		window.onresize = function(e) {
			if (navigator.appName.indexOf("Explorer") >= 0)
				e = event;
			alert("event.type : " + e.type);
		};
					// ロード時にイベントリスナを追加
		function load()
		{
							// onclick 属性に関数を直接設定
			document.getElementById("case3").onclick = function(e) {
				if (navigator.appName.indexOf("Explorer") >= 0)
					e = event;
				alert("例３: event.type : " + e.type);
			};
							// 以下に示すいずれの方法でも良い
									// 関数を外部に記述
//			document.getElementById("case3").addEventListener("click", click_e3, false);
									// 関数を以下のように内部に記述
//			document.getElementById("case3").addEventListener("click", function(e) {
//				alert("例３: event.type : " + e.type);
//			}, false);
		}
					// SPAN 要素内から呼び出し
		function click_e1(e)
		{
			alert("例１: event.type : " + e.type);
		}
					// ロード時に追加
		function click_e3(e)
		{
			alert("例３: event.type : " + e.type);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" onLoad="load()">
	<H1 CLASS="center">イベント処理の例</H1>
	<H3 CLASS="center">（青色の箇所をクリックして下さい．Window サイズを変更してもイベントが発生）</H3>
	<P>
	<SPAN CLASS="cyan" onClick="click_e1(event)">イベント処理</SPAN>の例１　　onClick 属性に関数名を記述<BR>
	<P>
	<SPAN CLASS="cyan" onClick="JavaScript: alert('例２ event.type : ' + event.type)">イベント処理</SPAN>の例２　　onClick 属性内に処理を記述<BR>
	<P>
	<SPAN ID="case3" CLASS="cyan">イベント処理</SPAN>の例３　　ロード時に onClick に対する処理を追加<BR>
	<P>
	Window サイズの変更　　ロード時に onResize に対する処理を追加
</BODY>
</HTML>

onAbort　　中断した際
onCancel　　ダイアログボックスでユーザーが [キャンセル] をクリックした際
onCanPlay　　再生可能であるが，バッファリングのために途中で停止する可能性がある際
onCanPlayThrough　　停止せずに最後まで再生できる際
onChange　　入力フォーカスを失った時に，フォーカスを得た時と比べて値が変化していた際
onClick　　クリックされた際
onClose　　アプリケーションを終了した際
onContextMenu　　マウスの右ボタンが押された際
onCueChange　　テキストトラックキューが変化した際
onDBLClick　　ダブルクリックされた際
onDrag　　ドラッグ中の際
onDragEnd　　ドラッグが終了した際
onDragEnter　　ドラッグ可能なオブジェクトに重なった際
onDragLeave　　ドラッグ可能なオブジェクトから離れた際
onDragOver　　ドラッグ可能なオブジェクトに重なっている際
onDragStart　　ドラッグが開始された際
onDrop　　ドロップした際
onDurationChange　　メディアの長さが変わった際
onEmptied　　再生中にネットワークが利用不可となった際
onEnded　　メディアの最後に到達した際
onInput　　フォームの要素にユーザーが入力した際
onInvalid　　フォームの要素の値が不正になった際
onKeyDown　　キーが押し下げられる際
onKeyPress　　キーが押されて放された際
onKeyUp　　キーが解放される際
onLoad^*　　読み込みが終了した際
onLoadedData　　メディアのデータの読み込みが終わった際
onLoadedMetaData　　メディアを再生するに十分な量のデータが得られた際
onLoadStart　　メディアの読み込みが始まった際
onMouseDown　　ポインティングデバイスのボタンが押し下げられる際
onMouseMove　　ポインティングデバイスが要素の上を移動する際
onMouseOut　　ポインティングデバイスが要素の上から離れていく際
onMouseOver　　ポインティングデバイスが要素の上に移動してきた際
onMouseUp　　ポインティングデバイスのボタンが要素の上で放される際
onMouseWheel　　マウスのホイールが回された際
onPause　　メディアの再生が一時停止した際
onPlay　　メディアの再生の準備が出来た際
onPlaying　　メディアの再生が始まっている際
onProgress　　メディアのデータを処理している際
onRateChange　　再生レートが変化した際
onReset　　フォームがリセットされる際
onSeeked　　メディアの頭出しが終わった際
onSeeking　　メディアの頭出しが始まった際
onSelect　　テキストフィールド中のテキストを選んだ際
onShow　　表示される際
onStalled　　メディアデータの読み込みができなくなった際
onSubmit　　フォームが提出される際
onSuspend　　メディアデータの読み込みが止まった際
onTimeUpdate　　再生位置が変化した際
onVolumeChange　　ボリュームが変化した際
onWaiting　　再生が一時中断した際

次に示すイベントハンドラ・コンテンツ属性は，BODY 要素以外のすべての要素で使用できます． onBlur　　要素がフォーカスを失った際 onError　　ファイル読み込み中にエラーが起きた際 onFocus　　フォーカスを受けた際 onLoad　　読み込みが終了した際 onScroll　　スクロールバーが操作された際

次に示すイベントハンドラ・コンテンツ属性は，Window オブジェクトで使用できます． onAfterPrint　　印刷後 onBeforePrint　　印刷前 onBeforeUnload　　アンロード前 onBlur　　要素がフォーカスを失った際 onError　　ファイル読み込み中にエラーが起きた際 onFocus　　フォーカスを受けた際 onHashChange　　ハッシュに変化があった際 onLoad　　読み込みが終了した際 onMessage　　メッセージを送った際 onOffline　　オフラインになった際 onOnline　　オンラインになった際 onPageHide　　ページが隠された際 onPageShow　　ページが表示された際 onPopState　　ポップアップが生じた際 onResize　　サイズが変更された際 onScroll　　スクロールバーが操作された際 onStorage　　保存領域が変更された際 onUnload　　アンロードされた際

DOM インタフェース

　　次章以下で行う各要素に対する説明の中に，「DOM インタフェース」という項目が現れます．例えば，IMG 要素の中には，

[NamedConstructor=Image(),
 NamedConstructor=Image(unsigned long width),
 NamedConstructor=Image(unsigned long width, unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};

のような記述が現れるはずです．DOM（ Document Object Model ）とは，ブラウザの機能，要素，属性などを構造化する方法を定めた仕様であり，これを使用して，HTML で記述されたドキュメントをプログラムから操作し，ブラウザに動的な効果を与えることができます（詳細については，「 JavaScript と C/C++ 」など，JavaScript に対する解説を参照）．DOM インタフェースでは，要素の属性の内，どのような属性を参照，変更できるかを示しています．上に示した例では，10 個の属性の内，3 つは参照しかできませんが，他の属性に対してはその値を変更することが可能です．例えば，使用例においては，IMG 要素の src 属性を利用することによって，画像をクリックする毎に表示画像を変更しています．以下に示すのは，そのソースコードです．

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<TITLE>DOM インタフェース</TITLE>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
		<SCRIPT TYPE="text/javascript">
			sw = 0;
			function change()
			{
				switch (sw) {
					case 0:
						document.getElementById("image").src = "../sakura.gif";
						sw = 1;
						break;
					case 1:
						document.getElementById("image").src = "../ajisai.gif";
						sw = 2;
						break;
					case 2:
						document.getElementById("image").src = "../ayame.gif";
						sw = 0;
						break;
				}
			}
		</SCRIPT>
	</HEAD>
	<BODY CLASS="white">
		<H1 CLASS="center">DOM インタフェース</H1>
		<DIV CLASS="center"><IMG SRC="../ayame.gif" ID="image" onClick="change()"></DIV>
	</BODY>
</HTML>

　　なお，上に示した DOM インタフェースにおける 4 行目は，HTMLImageElement が HTMLElement を継承，つまり，HTMLElement の性質をすべて受け継いでいることを意味しています．ここで，HTMLElement は，以下に示すように定義されています．

interface HTMLElement : Element {
  // metadata attributes
           attribute DOMString title;
           attribute DOMString lang;
           attribute boolean translate;
           attribute DOMString dir;
  readonly attribute DOMStringMap dataset;

  // microdata
           attribute boolean itemScope;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemType;
           attribute DOMString itemId;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemRef;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemProp;
  readonly attribute HTMLPropertiesCollection properties;
           attribute any itemValue; // acts as DOMString on setting

  // user interaction
           attribute boolean hidden;
  void click();
           attribute long tabIndex;
  void focus();
  void blur();
           attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
           attribute boolean draggable;
  [PutForwards=value] readonly attribute DOMSettableTokenList dropzone;
           attribute DOMString contentEditable;
  readonly attribute boolean isContentEditable;
           attribute HTMLMenuElement? contextMenu;
           attribute boolean spellcheck;
  void forceSpellCheck();

  // command API
  readonly attribute DOMString? commandType;
  readonly attribute DOMString? commandLabel;
  readonly attribute DOMString? commandIcon;
  readonly attribute boolean? commandHidden;
  readonly attribute boolean? commandDisabled;
  readonly attribute boolean? commandChecked;

  // styling
  readonly attribute CSSStyleDeclaration style;

  // event handler IDL attributes
           attribute EventHandler onabort;
           attribute EventHandler onblur;
           attribute EventHandler oncancel;
           attribute EventHandler oncanplay;
           attribute EventHandler oncanplaythrough;
           attribute EventHandler onchange;
           attribute EventHandler onclick;
           attribute EventHandler onclose;
           attribute EventHandler oncontextmenu;
           attribute EventHandler oncuechange;
           attribute EventHandler ondblclick;
           attribute EventHandler ondrag;
           attribute EventHandler ondragend;
           attribute EventHandler ondragenter;
           attribute EventHandler ondragleave;
           attribute EventHandler ondragover;
           attribute EventHandler ondragstart;
           attribute EventHandler ondrop;
           attribute EventHandler ondurationchange;
           attribute EventHandler onemptied;
           attribute EventHandler onended;
           attribute OnErrorEventHandler onerror;
           attribute EventHandler onfocus;
           attribute EventHandler oninput;
           attribute EventHandler oninvalid;
           attribute EventHandler onkeydown;
           attribute EventHandler onkeypress;
           attribute EventHandler onkeyup;
           attribute EventHandler onload;
           attribute EventHandler onloadeddata;
           attribute EventHandler onloadedmetadata;
           attribute EventHandler onloadstart;
           attribute EventHandler onmousedown;
           attribute EventHandler onmousemove;
           attribute EventHandler onmouseout;
           attribute EventHandler onmouseover;
           attribute EventHandler onmouseup;
           attribute EventHandler onmousewheel;
           attribute EventHandler onpause;
           attribute EventHandler onplay;
           attribute EventHandler onplaying;
           attribute EventHandler onprogress;
           attribute EventHandler onratechange;
           attribute EventHandler onreset;
           attribute EventHandler onscroll;
           attribute EventHandler onseeked;
           attribute EventHandler onseeking;
           attribute EventHandler onselect;
           attribute EventHandler onshow;
           attribute EventHandler onstalled;
           attribute EventHandler onsubmit;
           attribute EventHandler onsuspend;
           attribute EventHandler ontimeupdate;
           attribute EventHandler onvolumechange;
           attribute EventHandler onwaiting;
};

interface HTMLUnknownElement : HTMLElement { };

その他
1. コメント：　　HTML 文書内におけるコメントは，以下のようにして記述されます．マーク付け宣言開始区切り子「 <! 」とコメント開始区切り子「 -- 」の間に空白文字があってはいけませんが，コメント終了区切り子「 -- 」とマーク付け宣言終了区切り子「 > 」の間には空白文字があっても構いません．
  
2. 文字参照：　　文字参照とは，HTML 文書が含んでよい文字に対する数値あるいは象徴名称です．あまり使われない文字を参照したり，オーサリングツールが入力できなかったり，入力が難しかったりする文字を参照するのに便利です．たとえば，「<」は，HTML 文書内で特別な意味を持っていますが，それを単なる文字として表示したいような場合に使用します．文字参照は，「 & 」記号で始まり，セミコロン( ; )で終わります．例えば，以下に示すような例があります．
  「&amp」：「&」記号「"」，「"」：二重引用符「'」：単引用符「<」： < 「>」： > 「å」：上に丸が付いたa 「水」(十六進数値)：水
3. 引用符：　　デフォルトでは，すべての属性値を二重引用符，または，単引用符のどちらかを用いて囲うようになっています．二重引用符で属性値が囲われる場合は，単引用符がこの属性値の一部を成し得るし，逆の囲い方も可能です．属性値として引用符を表す場合は，数値文字参照を用いることもできます．二重引用符は「"」で，単引用符は「'」です．二重引用符については文字実体参照「"」を用いることもできます．

情報学部

菅沼ホーム

HTML 目次

索引