属性の概要
HTMLの要素には様々な属性があります。属性の指定方法を次に示します。
HTMLでは、属性名の大文字と小文字を区別しません。また、属性値の選択肢が DTD で定義されている場合は、その属性値も大文字と小文字を区別しません。たとえば次に示す2つのHTML文書の例は、どちらも同じ意味になります。
属性値がスペース（空白文字）を含まない場合は、属性値をダブルクォーテーション（2重引用符）で囲まなくても構いません。たとえば次に示す2つのHTML文書の例は、どちらも同じ意味になります。
属性の多くは省略可能ですが、中には省略できないものもあります。
コア属性
コア属性は、ほとんどすべての要素（タグ）に存在する属性です。コア属性は省略可能です。
id
スタイルシートのIDを指定します。ひとつの HTML ドキュメント中に複数の要素が同じ ID を持つことはできません。id属性は省略可能です。
class
スタイルシートのクラスを指定します。複数のクラスをスペース（空白文字）で区切って指定することもできます。class属性は省略可能です。
style
スタイルシートを指定します。複数のスタイルシート属性をセミコロンで区切って指定することもできます。style属性は省略可能です。
次にstyle属性の使用例を示します。
次にstyle属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
style 属性はスタイルシートを指定します。
title
タイトルを記述します。開始タグと終了タグに挟まれた文字列にマウスポインタを乗せると、このタイトルがポップアップ表示されます。title属性は省略可能です。
title属性の使用例を次に示します。
次にtitle属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
ここをマウスでポイントしてください。
国際化属性
国際化属性は、言語に関する指定を行う属性です。
lang
言語を指定します。lang属性は省略可能です。
| 値 | 意味 |
|---|---|
| ja | 日本語 |
lang属性の使用例を次に示します。
dir
文章の流れる方向は言語によって異なります。英語のように左から右へ流れる言語もあれば、アラビア語のように右から左へ流れる言語もあります。dir属性は、この文書の表示方向を指定します。
| 値 | 意味 |
|---|---|
| ltr | 左から右 (left to right) |
| rtl | 右から左 (right to left) |
通常、dir属性は省略可能ですが、BDO要素タイプに限り必須属性です。
次にdir属性の使用例を示します。
<p dir="rtl">結果はどうでしたか？</p>
次にdir属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
結果はどうでしたか？
結果はどうでしたか？
イベント属性
イベント属性は、イベントが発生したときに実行するスクリプトを記述する属性です。イベントとは、マウス操作やキー操作が行われた通知です。
すべての要素（タグ）において、イベント属性は省略可能です。
onclick
マウスがクリックされたときに実行するスクリプトを記述します。onclick属性は省略可能です。
次にonclick属性の使用例を示します。
次にonclick属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
ondblclick
マウスがダブルクリックされたときに実行するスクリプトを記述します。ondblclick属性は省略可能です。
次にondblclick属性の使用例を示します。
次にondblclick属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
onmousedown
マウスのボタンが押下されたときに実行するスクリプトを記述します。onmousedown属性は省略可能です。
onmouseup
マウスのボタンが（押下された後）離されたときに実行するスクリプトを記述します。onmouseup属性は省略可能です。
onmouseover
マウスポインタを要素外から要素内に動かしたときに実行するスクリプトを記述します。onmouseover
onmousemove
マウスポインタを要素内で動かしたときに実行するスクリプトを記述します。onmousemove属性は省略可能です。
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行するスクリプトを記述します。onmouseout属性は省略可能です。
onkeypress
キーを押して離したときに実行するスクリプトを記述します。onkeypress属性は省略可能です。
次にonkeypress属性の使用例を示します。
次にonkeypress属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
onkeydown
キーを押したときに実行するスクリプトを記述します。onkeydown属性は省略可能です。
onkeyup
キーを離したときに実行するスクリプトを記述します。onkeyup属性は省略可能です。
onfocus
HTML タグの onfocus 属性は、要素がフォーカスを得たときに実行するスクリプトを指定する属性です。onfocus 属性は省略可能です。
次の要素（タグ）に対してonfocus属性を指定することができます。
onblur
HTML タグの onblur 属性は、要素がフォーカスを失ったときに実行するスクリプトを指定する属性です。onblur 属性は省略可能です。
次の要素（タグ）に対してonblur属性を指定することができます。
| a | area | label | |
| input | select | textarea |
onselect
HTML タグの onselect 属性は、テキストが（部分的にでも）選択されたときに実行するスクリプトを指定する属性です。onselect 属性は省略可能です。
次の要素（タグ）に対してonselect属性を指定することができます。
onchange
HTML タグの onchange 属性は、値が変更されたときに実行するスクリプトを指定する属性です。onchange 属性は省略可能です。
次の要素（タグ）に対してonchange属性を指定することができます。
align
HTML タグの align 属性は、セル文字列の水平方向の配置を指定する属性です。align 属性は省略可能です。
| 値 | 意味 |
|---|---|
| left | 左寄せ |
| center | 中央寄せ |
| right | 右寄せ |
次にalign属性の使用例を示します。
<p align="center">center</p>
<p align="right">right</p>
次にalign属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
left
center
right
valign
HTML タグの valign 属性は、セル文字列の垂直方向の配置を指定する属性です。valign 属性は省略可能です。
| 値 | 意味 |
|---|---|
| top | 上端 |
| middle | 中央合わせ |
| bottom | 下端 |
| baseline | ベースライン |
次にvalign属性の使用例を示します。
<tr>
<td>line1<br>line2<br>line3</td>
<td valign="top">top</td>
<td valign="middle">middle</td>
<td valign="bottom">bottom</td>
<td valign="baseline">baseline</td>
</tr>
</table>
次にvalign属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
| line1 line2 line3 | top | middle | bottom | baseline |
次の要素（タグ）に対してvalign属性を指定することができます。
| thead | tbody | tfoot | |
| colgroup | col | ||
| tr | th | td |
フォーカス属性
フォーカス属性は、入力フォーカスの操作方法に関する属性です。
accesskey
HTML タグの accesskey 属性は、アクセスキーを指定する属性です。accesskey="x" と指定すると、ALTキーとxキーを同時に押した場合にその部品にフォーカスが移動します。accesskey 属性は省略可能です。
次にaccesskey属性の使用例を示します。
<button accesskey="y">Alt + Y</button>
次にaccesskey属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
tabindex
HTML タグの tabindex 属性は、タブインデックスの数値を指定する属性です。タブインデックスとは、TAB キーを押すと入力フォーカスが移動する順番のことです。tabindex 属性は省略可能です。