とほほのHTMLリファレンス(拡張機能)とほほのHTMLリファレンス(拡張機能)■ 説明これも注釈として使用できますが、IE2.0で追加された独自タグです。他のブラウザでは対応していないようです。
■ 使用例
【HTMLソース】
【ブラウザでの表示】
この部分は IEでは 見えないはず。
■ 説明NN3.0から追加された機能で、マルチカラムな(段組された)文章を記述できます。IEではサポートされていません。
■ 属性
属性 説明 COLS=n N3。2段組みにしたいときは2を、3段組みにしたいときは3を指定します。 GUTTER=n N3。段と段の間のスペースを指定します。 WIDTH=n N3。それぞれの段の幅を WIDTH=100 や WIDTH="80%" のように指定します。 以下のようにすると、段の区切りを自分で調整しなくてはなりませんが、IEでも使用可能な段組みが可能になります。VALIGN属性、CELLSPACING属性を使用しているところがミソです。
【HTMLソース】
<TABLE CELLSPACING=20> <TR VALIGN=top> <TD> 第1段の内容 </TD> <TD> 第2段の内容 </TD> </TR> </TABLE>
■ 説明NN3.0から追加された機能で、指定した大きさのスペースを挿入します。IEではサポートされていません。
■ 属性
属性 説明 TYPE=... N3。 horizontalを指定すると横方向にSIZEピクセル分のスペースを挿入します。 verticalを指定すると縦方向にSIZE行分スペースを空けます。 blockを指定するとWIDTHとHEIGHTで指定した矩形分スペースを空けます。 SIZE=n N3。 スペースの幅や高さを指定します。 WIDTH=n N3。 矩形の幅を WIDTH=100 や WIDTH="80%" のように指定します。 HEIGHT=n N3。 矩形の高さ指定します。 ALIGN=... N3。 矩形とテキストの位置関係を指定します。 <IMG>タグを参照してください。 ■ 補足
<SPACER>はNNしかサポートしていないので、あまり使用するべきではありません。縦方向のスペースには<BR>を、横方向のスペースには、全角空白文字を使用するとよいでしょう。
■ 説明スタイルシートの属性を定義することにより、フォントの色や大きさを始めとしていろいろなスタイルを指定します。
■ 属性
属性 説明 STYLE="..." e3, N4。 例えば次のような指定をすることができます。 詳しくは「スタイルシート」を参照してください。 複数指定する時にはセミコロン( ; )で連結します。
- STYLE="background: yellow"と指定すると、テキスト部分のみの背景色を変更することができます。
- STYLE="color: red"と指定すると、テキストの色を変更することができます。
- STYLE="font-size: 36pt"と指定すると、テキストのサイズを任意の大きさに変更することができます。
■ 使用例
【HTMLソース】
【ブラウザでの表示】
こんな風になります。
■ 説明音声や動画など様々なマルチメディアファイルを再生します。基本的に、<EMBED>タグは、マルチメディアファイルをプラグインと呼ばれるブラウザの追加モジュールに引き渡すだけで、実際の再生はプラグインが行います。
WAVEファイル(.wav)、AIFFファイル(.aif)、AUファイル(.au)、MIDIファイル(.mid)、RealAudio(.ra)、Shockwave(.dcr)、QuickTime(.mov)、MPEGファイル(.mpg)など様々なファイルを再生可能ですが、ブラウザのバージョンや、インストールしているプラグインソフトによって動作はかなり異なります。
詳細は「とほほのマルチメディア入門」を参照してください。
■ 属性
属性もプラグインによって異なりますが、よく使用される属性を紹介してみました。
属性 説明 SRC="..." N2/e3。拡張機能で表示するファイルのURLを指定します。 TYPE="..." N2。"audio/midi"などのMIMEタイプを指定します。 WIDTH=n N2/e3。表示する領域の横幅、高さを WIDTH=100 や WIDTH="80%" のように指定します。MIDPLUGの場合は150×40、100×30、40×35、2×2を指定すると都合がよいそうです。 HEIGHT=n ALIGN="..." N2/e3。left, right, top, bottomのいずれかを指定します。 BORDER=n N2。外枠の太さ。 FRAMEBORDER="..." ..にNOと指定した場合、フレームの外枠を表示しません。 NAME="..." 名前を指定します。 PLUGINSPAGE="..." N3/e3。プラグインがインストールされていない場合に、プラグインを入手可能なURLを記述します。 AUTOSTART=... 画面表示した際に自動再生を始めるかを指定します。(true|false) AUTOPLAY=... LOOP=... 繰り返し回数を指定します。trueは無限に繰り返す。falseは繰り返さない。数値を指定すると指定回数分繰り返します。 REPEAT=... HIDDEN="..." 再生ボタンなどを画面に表示する/しないを指定します。(true|false) PANEL="..." YAMAHAのMIDPLUGで指定可能。0を指定すると白調の、1を指定すると黒調のパネルが表示される。 CONTROLS="..." LiveAudioで指定可能な属性です。
すべて表示(console)
小さなコンソール(smallconsole)
ボリューム(volumelever)
再生ボタン(playbutton)
停止ボタン(stopbutton)
一時停止ボタン(pausebutton)TEXTFOCUS="..." Sockwaveの再生を始めるタイミングをonClickやonStartで指定します。 PALETTE="..." foregroundまたはbackgroundを指定します。 SAVE="..." プラグインからのデータ保存機能をtrue, falseで制御します。 NOSAVE="..." SONG="..." Creshcendoプラグインの場合に、SRC="..."の代わりに使用します。 TEXT="..." プラグイン中に注釈として表示するテキストを指定します。 その他 その他、各プラグインやそのバージョンによって、指定できる属性はまちまちです。 ■ 各プラグインで使用可能な属性
一般 SRC, WIDTH, HEIGHT, TYPE, PLUGINSPAGE LiveAudio AUTOSTART, CONTROLS, HIDDEN, LOOP MIDPLUG AUTOSTART, PANEL, REPEAT, SAVE, TEXT Crescendo AUTOSTART, LOOP, NOSAVE, BGCOLOR, TXTCOLOR, DELAY ■ 使用例
【HTMLソース】
■ 注意
ページを表示した時に、スクロールしなくても見える範囲内に<EMBED>タグを記述しておかないと、再生できない場合があるそうです。
■ 説明<EMBED>で指定したファイルに対応していないブラウザで表示するメッセージを記述します。
■ 使用例
<EMBED>を参照してください。
■ 注意
昔は、IE2.0が<BGSOUND>のみ、NN2.0が<EMBED>のみに対応していたため、次のように記述すればよいと紹介されたことが多かったのですが、IE3.0が<EMBED>にも対応したため、現在は下記の書き方は薦められていません。
<EMBED SRC="xxx.wav"> <NOEMBED> <BGSOUND SRC="xxx.wav"> </NOEMBED>
■ 説明IE2.0で追加された独自タグで、左右にスクロールする文字を表示します。スクロール領域のことをマーキーと呼びます。IE?.?からは、文字だけでなく、画像などをスクロールさせることもできるようになりました。
■ 属性
属性 説明 ALIGN=... e2。マーキー表示する文字の位置を指定します。top, middle, bottomのいずれかを指定します。 BGCOLOR=color" e2。マーキーの背景色を指定します。 BEHAVIOR=... e2。スクロールの形式を scroll(スクロール), slide(端にぶつかると停止), alternate(端から端までを往復運動)のいずれかで指定します。 DIRECTION=... e2。スクロールの方向をleft, rightのいずれかで指定します。IE4.0からはup, downの指定も可能になりました。 LOOP=... e2。ループ回数を指定します。-1またはINFINITEを指定すると無限に繰り返します。 WIDTH=n e2。マーキーの横幅を WIDTH=100 や WIDTH="80%" のように指定します。 HEIGHT=n e2。マーキーの高さをピクセル値か割合(%)で指定します。 SCROLLDELAY=... e2。スクロールの速さを指定します。 SCROLLAMOUNT=... e2。1度にスクロールする幅を指定します。 HSPACE=n e2。マーキーの左右のスペースを指定します。 VSPACE=n e2。マーキーの上下のスペースを指定します。 ■ 使用例
【HTMLソース】
【ブラウザでの表示】
■ 説明JavaScriptなどのスクリプトを挿入する際に用います。JavaScriptはNN2.0以降、IE3.0 以降で使用できます。詳細はJavaScript編を参照してください。
■ 属性
属性 説明 LANGUAGE="..." e3/N2。スクリプトの言語を指定します。省略した場合は "JavaScript" となります。HTML4.0ではLANGUAGEの代わりにTYPEを使えと言っていますが、今更・・・ SRC="..." e4/N3。外部JavaScriptファイルのURL(拡張子は .js)を指定します。外部スクリプトファイルのMIMEタイプとして、application/x-javascriptを指定してやる必要がある場合があります。IEの場合、外部スクリプトファイルはシフトJISで記述しなくてはならない場合があるようです。 TYPE="..." H4/e4/N4。スクリプトの言語を "text/javascript" のように指定します。HTML4.0では、LANGUAGE属性は「将来廃止するかもしれない属性」として定義され、TYPE属性を用いることを推奨していますが、スクリプトのバージョンを記述できない、NN3.0やIE3.0でサポートされていないなどの欠点があります。 DEFER H4。ブラウザの表示を高速化するために、スクリプト内に表示に関係する記述(document.write()など)がないことを明示的に宣言します。 ■ 使用例
【HTMLソース】
<SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Hello world!!"); // --> </SCRIPT>
■ 説明JavaScriptに未対応のブラウザで表示される文書を記述します。NN3.0で追加されました。
■ 使用例
【HTMLソース】
<SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Hello world!!"); // --> </SCRIPT> <NOSCRIPT> JavaScript未対応ブラウザ用の記述 </NOSCRIPT>
■ 説明Javaなどのアプレットを挿入する際に用います。JavaはNN2.0以降、IE3.0以降で使用できます。Javaについての詳細は他のサイトを参照してください。
■ 属性
属性 説明 CODE="..." H3/e3/N2。アプレットのファイル名を記述します。 CODEBASE="..." H3/e3/N2。CODEで参照するファイルのベースとなるディレクトリを指定します。 WIDTH=n H3/e3/N2。アプレットを表示する横幅を WIDTH=100 や WIDTH="80%" のように指定します。 HEIGHT=n H3/e3/N2。アプレットを表示する高さを指定します。 HSPACE=n H3/e3/N2。アプレットの左右のスペースを指定します。 VSPACE=n H3/e3/N2。アプレットの上下のスペースを指定します。 ALIGN=... H3/e3/N2。アプレットとテキストの表示位置を指定します。top, texttop, center, middle, absmiddle, bottom, absbottom. baseline, left, rightのいずれかを指定します。それぞれの意味は「ALIGN属性について」を参照してください。 NAME=... H3/e3/N2。アプレットに名前をつけます。JavaScript と Java を連携させたりするときに用います。 ALT=... H3/e3/N3。アプレット未対応のブラウザがアプレットの代わりに表示する文字を指定します。 ■ 使用例
【HTMLソース】
■ 説明IEにおいて、画像、ドキュメント、ActiceXコントロールや、Javaアプレット、コントロールなどを貼り付けます。
■ 属性
属性 説明 ALIGN="..." H4/e3。オブジェクトを貼り付ける位置をleft、right、center、texttop、textmiddle、textbottom、baselineの中から指定します。 BORDER=n H4/e3。オブジェクトが<A HREF="...">タグで囲まれている場合の枠線の太さを指定します。 CODEBASE=url H4/e3。オブジェクトのコードをURLで指定します。URLはオブジェクトによって異なります。 CODETYPE="..." H4/e3。コードのタイプを指定します。 DATA=url H4/e3。オブジェクトのデータ部を指定します。 DECLARE H4/e3。未稿。 HEIGHT=n H4/e3。オブジェクトの高さを指定します。 WIDTH=n H4/e3。オブジェクトの横幅を WIDTH=100 や WIDTH="80%" のように指定します。 HSPACE=n H4/e3。オブジェクトの左右にn分のスペースをあけます。 VSPACE=n H4/e3。オブジェクトの上下にn分のスペースをあけます。 NAME="..." H4/e3。オブジェクトの名前を指定します。 SHAPES e3。オブジェクトが影付きのリンクであることを示します。 STANDBY="..." H4/e3。データをロード中に表示するメッセージを指定します。 TABINDEX=n H4/e3。TABキーでカーソルが移動する順序を制御するものだと思いますが、よくわかりません。 NOTAB e3。TABキーでカーソルが移動する順序を制御するものだと思いますが、よくわかりません。 TITLE="..." H4/e3。マウスを近づけたときにバルーンでその内容を表示したりするようですが、あまり使用されていないようです。 TYPE="..." H4/e3。データのタイプを指定します。 USEMAP="..." H4/e3。<MAP>タグを参照してください。 ACCESSKEY=... H4/e4。例えば ACCESSKEY=X としておくと、マウスでオブジェクトをクリックする動作を、キーボードでALTキーを押しながらXキーを押すことで代用できます。 TABINDEX=... H4/e4。TABキーを押したとき、ここで指定した数値の小さい順番にフォーカスが移動します。
■ 説明<APPLET>タグや<OBJECT>のパラメータを指定します。
■ 属性
属性 説明 NAME="..." e3/N2。属性の名前を指定します。 VALUE="..." e3/N2。属性の値を指定します。 TYPE="..." 未稿。 VALUETYPE="..." 未稿。
■ 説明WWWサーバー側でJavaScriptを実行してしまおうという、LiveWireのためのタグです。
■ 説明Dynamic HTMLと呼ばれる技術のひとつとして、NN4.0で導入されたタグです。レイヤを用いることにより、ひとつのページ上に複数のコンテンツを自由に表示することができます。使用例は「画像をマウスでドラッグするには」を参照してください。
■ 属性
属性 説明 ID=... N4。このレイヤに名前(識別子)をつけます。JavaScriptなどからこのレイヤを識別するのに用いられます。ID=もNAME=も同じ意味です。 NAME=... LEFT=n N4。このレイヤを表示する位置(左端、上端からの距離)を指定します。LEFT,TOPがページ上の絶対位置であるのに対して、PAGEX,PAGEYはこのレイヤを含むドキュメント(レイヤ)からの相対位置で指定します。 TOP=n PAGEX=n PAGEY=n WIDTH=n N4。このレイヤの横幅と高さを指定します。高さはレイヤの内容によって自動的に調整されます。 HEIGHT=n CLIP="n,n,n,n" N4。このレイヤの可視部分の矩形の大きさを、左端、上端、右端、下端の順に "20,20,50,100" のように指定します。"50,100" と省略した時は "0,0,50,100" と同じ意味です。 Z-INDEX=n N4。複数のレイヤの重なり具合を指定します。Z-INDEXには数値を指定し、数の大きなほうが上に表示されます。ABOVE=やBELOW=には他のレイヤのNAME=やID=で指定した名前を指定します。ABOVE=layer1とした場合はlayer1のひとつ下に、BELOW=layer1とした場合はlayer1のひとつ下に表示されます。 ABOVE=... BELOW=... SRC="..." N4。このレイヤの中に表示するHTML文書のURLを指定します。この属性を省略すると、<LAYER>〜</LAYER>で囲まれた文書が表示されます。 VISIBILITY=... N4。このレイヤの表示状態を、show(表示する)、hidden(表示しない)、inherit(親レイヤに従う)で指定する。 BGCOLOR=... N4。このレイヤの背景色を指定します。 BACKGROUND="..." N4。このレイヤの背景画像を指定します。 onMouseOver="..." N4。JavaScriptを記述します。 onMouseOut="..." onFocus="..." onBlur="..." onLoad="..." ■ 使用例
【HTMLソース】
<HTML> <HEAD> <TITLE>LAYER SAMPLE</TITLE> <SCRIPT> <!-- function func() { if ((document.appName == "Netscape") && (document.appVersion.charAt(0) == "4")) { document.layers["zz"].moveTo(x++, y++); setTimeout("func()", 100); } } // --> </SCRIPT> </HEAD> <BODY onLoad="x=0; y=0; func();"> <LAYER ID="zz"> わっ </LAYER> </BODY> </HTML>■ 備考
この<LAYER>タグは、JavaScriptと組み合わせることにより、非常にバラエティに富んだ表現を可能にすることができます。しかし、NN4.0以降でしか使用できないので、慎重なる注意が必要です。
■ 説明<LAYER>と同様に機能し、同じ属性を持ちますが、レイヤの後ろに記述されたテキストの表示位置が異なります。<LAYER>〜</LAYER>の場合はレイヤを無視した位置に表示されますが、<ILAYER>〜</ILAYER>の場合はレイヤの記述が終わった後ろに表示されます。
■ 説明レイヤをサポートしていないブラウザのためのタグです。レイヤをサポートしているブラウザは<NOLAYER>〜</NOLAYER>の間のテキストを表示しません。レイヤをサポートしていないブラウザは<NOLAYER>など知らないタグを無視してしまうので、<NOLAYER>〜</NOLAYER>の間のテキストを表示します。
■ 使用例
【HTMLソース】