WEB作成講座
このページでは、私があまり使うことの無いタグを紹介しています。
設定可能な属性として紹介していますが、実際は私が使うであろう属性を紹介しています。（この他にも、設定できる属性は多くあるということです。）
多分、紹介しているもの以外の属性は、他の人も使うことは滅多に無いと思います。
また、これら以外にも絶対に使うことの無いタグはいくつもありますが、それらの紹介はしません。
あまり使うことの無いタグの説明
<hr /> - 水平線
水平線を挿入します。
このタグは空要素のため、終了タグは必要ありません。ただし、<hr />のように記述する必要があります。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<address> - ページ製作者の情報
ページ製作者の情報を記述するときに使います。
例えば、メールアドレスなどの連絡先などを記述する場合は、このタグを使用してください。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<object> - オブジェクトの挿入
さまざまなオブジェクトを挿入するときに使います。
挿入できるオブジェクトとは、
- 画像
- Java Applet
- MPG,MOV,WAV,MIDIなどの音声、動画
- Flash
- HTML（インラインフレームの代わり）
- etc.
とにかく、いろいろなものを挿入することが出来る万能なタグです。
- data属性
- 挿入するデータのファイル名を
data="ファイル名"のように指定します。 - code属性
- オブジェクトのMIMEタイプ
- 例えば、
code="image/jpeg"のように記述します。 - MIMEタイプについては、下に詳細を記述してあります。
- width属性（必須）
- 画像の表示サイズ（横幅）を設定します。
- 例えば、
width="100"のように指定します。単位はpx（ピクセル）ですが、単位を記述してはいけません。 - height属性（必須）
- 画像の表示サイズ（縦幅）を設定します。
- 例えば、
height="80"のように指定します。単位はpx（ピクセル）ですが、単位を記述してはいけません。 - accesskey属性（推薦）
- オブジェクトにタブインデックスを設定します。
- TABキーを押していくことで、オブジェクトにフォーカスを移すことが出来ますが、その優先順位を指定します。
- 数字が小さいほど、優先順位が高く、TABキーを押す回数が少なくなります。
- standby属性
- オブジェクトのダウンロード中に表示させる文字列を設定します。
standby="Now Loading..."のように使用します。- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
MIMEタイプとは、ファイルの種類を示すものだと思ってください。挿入するファイルの種類によって、MIMEタイプは異なっています。以下に、主なものを挙げておきます。
- HTML文章（*.htm,*.html）
- text/html
- GIF（*.gif）
- image/gif
- JPEG（*.jpg,*.jpeg）
- image/jpeg
- PNG（*.png）
- image/gif
- MIDI（*.mid,*.midi）
- audio/x-midi
- MPEG（*.mp3）
- audio/mpeg
- WMA（*.wma）
- audio/x-ms-wma
- MPEG（*.mpeg,*.mpg）
- video/mpeg
- AVI（*.avi）
- video/x-msvideo
- PDF（*.pdf）
- application/pdf
- Java Applet（*.class）
- application/octet-stream
- Flash（*.swf）
- application/x-shockwave-flash
などなどです。また、objectタグと組み合わせて使うparamというタグもあるのですが、自分で使ったことが無く、いまいち使い方が分からないので、説明は控えておきます。（paramタグはFlashやJava Appletを使用する際に必要になると思いますので、その場合は、他のサイトを参照してください。）
さて、imgタグにはaltという属性がありますが、objectタグにはそれがありません。imgは空要素でしたが、objectは空要素ではありません。objectが優れている点はここにあります。
<object data="children.mpg" type="video/mpeg" width="120" height="80">
<object data="children.jpg" type="image/jpeg" width="120" height="80">
<object data="children.gif" type="image/gif" width="120" height="80">
子供が遊んでいる様子です。
</object>
</object>
</object>
この例では、まず動画を表示させています。しかし、動画が表示できない場合は、jpeg画像を、もしjpegが駄目ならgif画像を表示させます。それでも駄目なら、代替文字列を表示してくれます。
ちなみに、代替文字列は、マークアップすることが出来ます。つまり、表やリンクやリストなどをobjectタグの中に含めることが出来ます。
<link /> - リンク
前ページや次ページ、外部スタイルシートの指定、作者のメールアドレスなどのリンク情報を示すときに使います。
このタグはheaderタグの中にのみ記述可能です。また、空要素なので<link />のように記述します。
このタグは、テキストブラウザのLynxや、Operaのナビゲーションバーで利用されます。
rel属性と、rev属性は何を言っているのか分からないと思いますが、要は使い方がわかればいいのです。relとrevの使い方にはパターンがありますので。
まずはrelの使い方から。以下のように使います。
<link rel="index" href="../index.html">
<link rel="contents" href="content.html">
<link rel="prev" href="diary1.html">
<link rel="next" href="diary3.html">
次はrevの使い方。以下のように使います。
<link rev="made" href="mailto:address@test.com">
外部CSSファイルを指定するときは、以下のようにしてください。
<link rel="stylesheet" href="screen.css" type="text/css">
- href属性
- リンク先のURIを指定します。
- rel属性
- この文書からリンク先を見た関係を示します。
- rev属性
- リンク先からこの文章を見た関係を示します。
- type属性
- 外部CSSを指定するとき
type="text/css"と指定すればいいと考えてください。
<meta /> - メタ情報
metaタグは、さまざまなメタ情報を示すときに使われます。
このタグはheaderタグの中にのみ記述可能です。また、空要素なので<meta />のように記述します。
また、このタグは使用方法がかなり決まった形で使用されます。そのため、属性の紹介は省いて、サンプルをいくつか紹介します。
文章の著者を示すときに使います。
<meta name="Author" content="HARU">
ページのキャッシュを防ぎたい場合（常に最新の情報を見てもらいたい）には、こうやって指定します。
<meta http-equiv="Pragma" content="no-cache">
コピーライトを示すには・・・
<meta name="copyright" content="(C) 2005 WEB作成の豆知識 All Rights Reserved."
ページ作成・更新日時は、こうやって指定します。（+09:00というのは、GMTからの時差を示しています。）
<meta name="date" content="2005-04-23T23:02:31+09:00">
ページのキーワードや紹介文を設定します。これらについては、SEO対策の解説ページに詳しく書いてあります。
<meta name="keywords" content="HTML,XHTML,CSS,XHTML1.1,Valid XHTML,Valid CSS,Valid,CSSレイアウト,WEB作成,ホームページ作成">
<meta name="description" content="WEB作成に役立つ知識を提供。HTML講座、CSS講座などなど。">
<abbr> - 略語
略語であることを示すときに使います。
具体的には、
<abbr title="eXtensible Markup Language">XML</abbr>とは・・・
のように使用します。
実はこのタグ、IEではまだ実装されていません。
また、acronymというほぼ同じ意味のタグもあるのですが、こちらの方が略語の定義が狭い（頭字語を取った略語）ので、abbrを使った方がいいかもしれません。ただし、acronymはIEで実装されています。また、両者の厳密な区別ははっきりしていないため、どちらを使うべきだとは、一概には言えないでしょう。
- title属性（推薦）
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- また、音声読み上げブラウザは、この属性に設定された文字列を読み上げます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<del> - 削除文
削除文であることを示すときに使います。
通常、このタグで囲まれた文字列には、打ち消し線が引かれます。
主に、訂正を以前と比較してはっきりさせたい場合に使用します。そのために、insと組み合わせて使われることが多いです。
また、このタグは非常に珍しいタグで、記述される場所によってブロック要素もしくはインライン要素として扱われます。例えば、ブロック要素であるpタグの内側で使用した場合は、インライン要素として扱われます。もし、pタグの外側で使用した場合は、ブロック要素として扱われます。・・・面白いでしょ？（ブロック要素とインライン要素についてはCSSの説明ページで紹介しています。）
<del datetime="2005-9-20T19:35:40+09:00" cite="http://www.opera.com/">Operaはシェアのブラウザで</del>
<ins datetime="2005-9-20T19:35:40+09:00" cite="http://www.opera.com/">
現在、Operaはフリーのブラウザに</ins>
- datetime属性
- 修正時刻を記入します。
datetime="2005-9-20T19:35:40+09:00"のように記述します。（+09:00というのはGMTからの時差を示しています。）- cite属性
- 修正する理由となった引用もとのURIを示すときに使います。
cite="http://www.yyy.com/xxx.html"- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<ins> - 挿入文
挿入文であることを示すときに使います。
通常、このタグで囲まれた文字列には、下線が引かれます。
delと組み合わせて使われることが多いです。
また、delと同じでブロック要素になったりインライン要素になったりします。
使用できる属性は、delと同じです。使用例はdelを参照してください。
