WEB作成講座
このページでは、私が結構よく使うタグを紹介しています。
設定可能な属性として紹介していますが、実際は私が使うであろう属性を紹介しています。（この他にも、設定できる属性は多くあるということです。）
多分、紹介しているもの以外の属性は、他の人も使うことは滅多に無いと思います。
結構良く使うタグの説明
<div> - 汎用ブロック要素
汎用ブロック要素を作成します。
このタグ自体は特別な意味を持たず、主にCSSを適用する際に使用します。詳しくは、CSSの説明ページで紹介します。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<span> - 汎用インライン要素
汎用インライン要素を作成します。
このタグ自体は特別な意味を持たず、主にCSSを適用する際に使用します。詳しくは、CSSの説明ページで紹介します。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<br /> - 強制改行
文章の強制改行を行います。
強制改行を行いたい位置に、このタグを挿入してください。
このタグは空要素のため、終了タグは必要ありません。ただし、<br />のように記述する必要があります。
指定可能な属性はいくつかありますが、このタグに属性を設定する必要は無いでしょう。
<ul> - 番号無しリスト
番号を持たない、箇条書き形式のリストを作成します。
リストを作成する際は、liタグと組み合わせて作成します。
また、ulタグはネストが可能です。下に書き方のサンプルを示します。
<ul>
<li>リストアイテム１</li>
<li>リストアイテム２
<ul><li>リストアイテム２－１</li>
<li>リストアイテム２－２</li>
</ul></li>
<li>リストアイテム３</li>
<li>リストアイテム４</li>
</ul>
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<ol> - 番号付きリスト
番号を持つリストを作成します。
使用方法、使用可能な属性はulタグと全く同じです。
<dl>,<dt>,<dd> - 定義型リスト
dlは、dt、ddと組み合わせて、定義型リストを作成するときに使います。
dtは定義語を指定します。また、ddには定義語（dt）の説明を加えます。
ちなみに、このページの属性の紹介でこのタグを使用しています。（本当は使い方が微妙に違う気がするのですが。）
<dl>
<dt>WWW</dt>
<dd>World Wide Web の省略形</dd>
<dd>インターネットのこと。世界中（World Wide）を、クモの巣（Web）のように張り巡らせてあるため。</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language の省略形</dd>
</dl>
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<table>, <tr>, <th>, <td>, <caption>, <col />, <colgroup> - 表の作成
tableは表を作成するときに使います。tableは、表の開始と終了を示すタグです。
trは、表の行（横方向）を囲む時に使うタグです。
thは、表の見出しセルを作成します。
tdは、表のデータセルを作成します。
通常は、table、tr、th、tdのタグのみで表を作成することが出来ます。
表の作成（基本）
<table>
<tr>
<th>名前</th>
<th>クラス</th>
<th>番号</th>
</tr>
<tr>
<td>太郎</td>
<td>１組</td>
<td>１番</td>
</tr>
<tr>
<td>次郎</td>
<td>２組</td>
<td>２番</td>
</tr>
</table>
簡単な表は、上記のように記述することで作成することが出来ます。
他にcaption、col、colgroupなどのタグ、また、いくつかの属性を使用することで高度な表を作成することが出来ます。
captionは、表のタイトルを指定します。このタグは、tableタグのすぐ下に一度だけ記述できます。
colは、表の特定の列に対して属性を指定したりする場合に使います。つまり、このタグを使用することで表の列をひとかたまりとして扱うことが出来ます。また、このタグ自体は意味を持ちません。
colは空要素であるため、<col />のように記述します。
colgroupは、表の列をグループ化するときに使います。colとの違いは・・・グループ化するという意味を持つと言うことでしょうか。
colgroupの中には、何も記述しない。もしくは、colを記述することが出来ます。
表の作成（発展１）
<table border="1">
<tr>
<th><br /></th>
<th scope="col" id="A">A</th>
<th scope="col" id="B">B</th>
<th scope="col" id="C">C</th>
<th scope="col" id="D">D</th>
</tr>
<tr>
<th scope="row" id="one">1</th>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<th scope="row" id="two">2</th>
<td colspan="2" headers="A two">A2</td>
<td>C2</td>
<td rowspan="3" headers="D two">D2</td>
</tr>
<tr>
<th scope="row" id="three">3</th>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<th scope="row" id="four">4</th>
<td>A4</td>
<td colspan="2" rowspan="2" headers="B four">B4</td>
</tr>
<tr>
<th scope="row" id="five">5</th>
<td>A5</td>
<td>D5</td>
</tr>
</table>
発展２では、分かりやすいようにstyle属性を使用してCSSを適用しています。しかし、XHTMLでは外部CSSを使用し、id属性もしくはclass属性での指定の方がいいでしょう。
表の作成（発展２）
<table border="1" summary="身体測定の結果を表した表です。最初の一行は列の見出しで、二行目以降から測定結果が記述されています。列の項目は左から順に、名前、クラス、番号、性別、身長、体重、視力（右）、視力（左）となっています。">
<caption>身体測定の結果</caption>
<colgroup align="center" style="font-weight: bold; background: #fff0f0;">
</colgroup>
<colgroup>
<col span="3" valign="middle" align="center" style="background: #fffff0;" />
<col span="4" valign="middle" align="right" style="background: #f0f0ff;" />
</colgroup>
<tr>
<th scope="col" align="center" abbr="名前">名前</th>
<th scope="col" align="center" abbr="クラス">クラス</th>
<th scope="col" align="center" abbr="番号">番号</th>
<th scope="col" align="center" abbr="性別">性別</th>
<th scope="col" align="center" abbr="身長（単位：センチメートル）">身長[cm]</th>
<th scope="col" align="center" abbr="体重（単位：キログラム）">体重[kg]</th>
<th scope="col" align="center" abbr="右目の視力">視力（右）</th>
<th scope="col" align="center" abbr="左目の視力">視力（左）</th>
</tr>
<tr>
<td>太郎</td>
<td>１組</td>
<td>１番</td>
<td>男</td>
<td>168</td>
<td>58</td>
<td>1.0</td>
<td>1.0</td>
</tr>
<tr>
<td>次郎</td>
<td>２組</td>
<td>２番</td>
<td>男</td>
<td>175</td>
<td>65</td>
<td>0.8</td>
<td>0.6</td>
</tr>
<tr>
<td>花子</td>
<td>３組</td>
<td>３番</td>
<td>女</td>
<td>158</td>
<td>51</td>
<td>0.7</td>
<td>1.0</td>
</tr>
</table>
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
- thにこの属性を指定した場合は、tdのheaders属性のついたセルの見出しセルを示していることになります。
- headers属性（tdのみ）
- データセルに対する見出しセルを指定する際に使用します。
- 例えば、
id="name"とIDが付いた見出しセル（th）に対するデータセル（td）だと示すには、<td headers="name">と指定します。 - border属性（tableのみ）
- 表の罫線の設定をします。
border="1"のように指定します。単位はpx（ピクセル）ですが、単位を記述してはいけません。また、0で罫線を非表示にすることができます。- summary属性（tableのみ ただし、tableは推薦）
- 表の概要、構成などの説明を記述します。
- この属性は、音声読み上げブラウザのために指定します。
- scope属性（thのみ）
- 見出しセルが、どの方向のセルに対しての見出しであるのかを示します。
- 使用方法は、
scope="col"またはscope="row"です。 - col はその見出しが縦方向に対する見出しであること、rowは横方向に対する見出しであることを示します。
- align属性（table, caption以外）
- 文字列の左揃え、中央揃え、右揃えを指定します。
align="left"とすれば、左揃えが出来ます。同様に、中央揃えはalign="center"、右揃えはalign="right"のように指定します。- valign属性（table,caption以外）
- 文字列の上詰め、中央揃え、下詰めを指定します。
valign="top"とすれば、上詰めが出来ます。同様に、中央揃えはvalign="middle"、下詰めはvalign="bottom"のように指定します。- abbr属性（th,tdのみ ただし、thは推薦）
- セルの内容の略称を指定します。この部分は、音声読み上げブラウザで読み上げられることになります。。
- colspan属性（th,tdのみ）
- セルを列にまたがって（横方向に）結合します。
colspan="3"と指定した場合、そのセルは右３列にまたがって表示されることになります。- rowspan属性（th,tdのみ）
- セルを行にまたがって（縦方向に）結合します。
rowspan="2"と指定した場合、そのセルは下３列にまたがって表示されることになります。- span属性（col, colgroupのみ）
- 何列にわたってグループ化するか、ということを指定します。
span="2"と設定した場合は、colまたはcolgroupが２列をグループ化するという意味になります。
テーブル（表）関係のタグは、難しいのでうまく説明できていません（汗）サンプルソースを見ていただいて理解していただければ幸いです。・・・サンプルソースにも自信が無いので、どなたか、ご指摘よろしくお願いします。
<blockquote> - ブロック引用文
長い文章の引用に使用します。
このタグは、本文を引用する際に使用します。引用元のURLなどは、citeタグを用いて示すようにしましょう。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<q> - インライン引用文
本文中などで、短い文章の引用に使用します。
このタグは、本文を引用する際に使用します。引用元のURLなどは、citeタグを用いて示すようにしましょう。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<cite> - 引用元、参考文献
引用元や、参考文献を示す際に使われます。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
