静岡理工科大学 菅沼ホーム HTML 目次 索引

共通項目

      1. HTML 文書の基本構造
      2. コンテンツ・モデル
      3. グローバル属性
      4. DOM インタフェース
      5. その他
        1. コメント
        2. 文字参照
        3. 引用符
  ここでは,HTML の共通項目に関して説明します.ただし,HTML に関する知識が全くない状態では理解しにくい箇所もあるかと思います.最初の段階では,「 HTML の基本構造」と「その他」だけを読み,他の部分はある程度学習してから読む方が良いかもしれません.

  1. HTML 文書の基本構造

      HTMLHyper 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 要素だけは記述しておいた方が良いと思います.

  2. コンテンツ・モデル

      HTML の各要素は,複数のカテゴリーに分類されます(カテゴリに属さない場合,又は,複数のカテゴリーに属す場合もある).各要素はコンテンツ・モデルを持ち,その要素のコンテンツ・モデルで記述されるコンテンツだけを,その要素の中に入れることができます.また,コンテンツ・モデルの説明欄に "トランスペアレント" と記述されている要素が存在します.トランスペアレント要素のコンテンツ・モデルは,その親要素のコンテンツ・モデルを受け継ぎます.

      カテゴリーには,以下に示すようなものが存在し,それらの関係は右図に示すとおりです.ただし,いくつかの要素は,他の部分で定義されている他のカテゴリーに属する場合もあります.

    1. メタデータ・コンテンツ  コンテンツの表示・動作や他のドキュメントとの関連性をセットしたり,他の "帯域外" の情報を伝達するためのコンテンツ

    2. フロー・コンテンツ  本体の記述に使われるほとんどの要素が含まれるコンテンツ

    3. セクショニング・コンテンツ  見出しやフッターの範囲を定義するためのコンテンツ

    4. ヘッディング・コンテンツ  セクションのヘッダーを定義するためのコンテンツ

    5. フレージング・コンテンツ  ドキュメントのテキストを意味するコンテンツ

    6. エンベッディッド・コンテンツ  ドキュメントに他のリソースを組み込むための,または,ドキュメントに挿入される他の語彙のためのコンテンツ

    7. インタラクティブ・コンテンツ  ユーザー・インタラクションに特化したコンテンツ

    8. パルパブル・コンテンツ  知覚できるコンテンツ.フロー・コンテンツ,または,フレージング・コンテンツは,少なくとも一つ以上のパルパブル・コンテンツを含む必要がある.

  3. グローバル属性

      グローバル属性とは,すべての要素で共通に使える属性のことであり,以下に示すようなものが存在します.

    • accesskey  アクセスキーを指定する.「 alt 」キーとアクセスキーを同時に押すと,フォーカスがそのキーが定義されている箇所に移動する. -> 使用例とそのソースコード
      <!DOCTYPE HTML>
      <HTML>
      	<HEAD>
      		<TITLE>accesskey</TITLE>
      		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      		<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://www.sist.ac.jp/~suganuma/" ACCESSKEY="c">菅沼のホームページ</A>: accesskey として c が設定してある
      	</BODY>
      </HTML>
      				

    • class  要素に名前を割り当てる.ある要素について 1 つ以上のクラス名を割り当てることが可能である(スペースで区切って指定).class 属性は,スタイルシートの選択子やユーザエージェントによる処理等のために使用される.

    • id  要素に名前を割り当てる.この名前は文書中で一意でなければならない.HTML において,ID 属性は,次の各々の役割を果たす. -> class と id の使用例とそのソースコード
      • スタイルシートの選択子
      • ハイパーテキストリンクの目標アンカー
      • スクリプトから特定要素を参照するための手段
      • 宣言された OBJECT 要素の名称
      • ユーザエージェントによる処理一般に使用.(例えば,HTML 文書を他のフォーマットに変換するなど)
      <!DOCTYPE HTML>
      <HTML>
      	<HEAD>
      		<TITLE>class と id</TITLE>
      		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      		<STYLE TYPE="text/css">
      			.red { color: red }
      			.under { text-decoration: underline }
      			#green { color: green }
      		</STYLE>
      	</HEAD>
      	<BODY CLASS="white">
      		<H1 CLASS="center">class と id の例</H1>
      		<DL>
      			<DT>class と id を使用してスタイルを指定した例です.
      			<P>
      			<DD CLASS="red">class を使用</DD>
      			<DD ID="green">id を使用</DD>
      			<DD CLASS="red under">class を使用</DD>
      		</DL>
      	</BODY>
      </HTML>
      				

    • contenteditable  編集可能か否かを指定 -> 使用例とそのソースコード
      • 空又は"true" : 編集可能
      • "false" : 編集不可能
      • "inherit" : 親の属性を引き継ぐ
      <!DOCTYPE HTML>
      <HTML>
      	<HEAD>
      		<TITLE>contenteditable</TITLE>
      		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      		<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">
      		<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">
      		<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">
      		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      	</HEAD>
      	<BODY CLASS="white">
      		<H1 CLASS="center">hidden の例</H1>
      		<DL>
      			<DT>1.<SPAN HIDDEN>表示内容</SPAN>: 表示されない
      			<DT>2.<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">
      		<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">
      		<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">
      		<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">
      		<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">
    	<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("例3: event.type : " + e.type);
    			};
    							// 以下に示すいずれの方法でも良い
    									// 関数を外部に記述
    //			document.getElementById("case3").addEventListener("click", click_e3, false);
    									// 関数を以下のように内部に記述
    //			document.getElementById("case3").addEventListener("click", function(e) {
    //				alert("例3: event.type : " + e.type);
    //			}, false);
    		}
    					// SPAN 要素内から呼び出し
    		function click_e1(e)
    		{
    			alert("例1: event.type : " + e.type);
    		}
    					// ロード時に追加
    		function click_e3(e)
    		{
    			alert("例3: 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>の例1  onClick 属性に関数名を記述<BR>
    	<P>
    	<SPAN CLASS="cyan" onClick="JavaScript: alert('例2 event.type : ' + event.type)">イベント処理</SPAN>の例2  onClick 属性内に処理を記述<BR>
    	<P>
    	<SPAN ID="case3" CLASS="cyan">イベント処理</SPAN>の例3  ロード時に 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  アンロードされた際

  4. 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;
    };
    			
    のような記述が現れるはずです.DOMDocument Object Model )とは,ブラウザの機能,要素,属性などを構造化する方法を定めた仕様であり,これを使用して,HTML で記述されたドキュメントをプログラムから操作し,ブラウザに動的な効果を与えることができます(詳細については,DOM を参照).DOM インタフェースでは,要素の属性の内,どのような属性を参照,変更できるかを示しています.上に示した例では,10 個の属性の内,3 つは参照しかできませんが,他の属性に対してはその値を変更することが可能です.例えば,使用例においては,IMG 要素 の src 属性を利用することによって,画像をクリックする毎に表示画像を変更しています.以下に示すのは,そのソースコードです.
    <!DOCTYPE HTML>
    <HTML>
    	<HEAD>
    		<TITLE>DOM インタフェース</TITLE>
    		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    		<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 { };
    			

  5. その他

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

静岡理工科大学 菅沼ホーム HTML 目次 索引