HTML要素で、よく使いそうな属性一覧です。
この他にもありますが、あまり使ったことの無い属性は今回取り上げていません。
| 属性名 | 内容 |
設置できるHTML要素 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| class | 主にスタイルを適用する為に用いられる |
All | ||||||||
| id | スタイルを適用する為に用いられる |
All | ||||||||
| style | 要素に直接スタイルを適用する為に用いられる cssに書かれたものより優先度が高い |
All | ||||||||
| title | 要素領域ににポインターを合わせたとき表示されるテキストを入力 |
All | ||||||||
| data-* | 任意のデータを格納できる |
All | ||||||||
| src | 埋め込みコンテンツのURL設置< |
<audio>、<embed>、<iframe>、<img>、<input>、<script>、<source>、<track>、<video> | ||||||||
| srcset | レスポンシブ画像を用いる場合に使用 |
<img>、<source> | ||||||||
| alt | 画像が表示できない時の代替テキスト |
<img>、<input>、<area> | ||||||||
| href | ページ内でのリンクやcss読み込みURL設置 |
<a>、<area>、<base>、<link> | ||||||||
| rel | リンク先とリンク元の関係を指定 |
<a>、<area>、<link> | ||||||||
| target | リンク先の表示場所を指定 |
<a>、<area>、<link> | ||||||||
| action | フォームを送信して処理するプログラムのURLを指定 |
<form> | ||||||||
| method | フォームを送信する場合のHTTPメソッドを指定します |
<form> | ||||||||
| enctype | 「method」属性がPOSTのとき、送信するMIMEタイプを指定 |
<form> | ||||||||
| name | フォームを使う場合にサーバーが送られてきた値を参照するための属性 |
<button>、<form>、<fieldset>、<iframe>、<input>、<object>、<output>、<select>、<textarea>、<map>、<meta>、<param> | ||||||||
| type | 要素の型を指定 |
<button>、<input>、<embed>、<object>、<ol>、<script>、<source>、<style>、<menu>、<link> | ||||||||
| checked | input要素のチェックボックス、ラジオボタンにチェックを入れる場合に使用 |
<input> | ||||||||
| selected | select要素のoption要素の選択に使用 |
<option> | ||||||||
| value | 主にフォーム要素の値をセットするときに使用 |
<button>、<data>、<input>、<li>、<meter>、<option>、<progress>、<param> | ||||||||
| maxlength | 入力できる最大文字数を指定 ↓maxlength=5を設定中 |
<input><textarea> | ||||||||
| minlength | 入力できる最小文字数を指定 ↓minlength=5を設定中 ※1～2文字入力後、マウスをずらして再度マウスを合わせてみてください |
<input><textarea> | ||||||||
| step | 選択できる値の間隔を指定 ↓step=5を設定中 |
<input> | ||||||||
| readonly | 入力欄を変更不可な状態にします（フォーカスは可） ↓変更できなくなっています |
<input>、<textarea> | ||||||||
| disabled | 入力欄を変更不可な状態にします（フォーカスは不可） ↓変更できなく、フォーカスも効かなくなっています |
<input>、<textarea> | ||||||||
| size | input要素のtype属性「text」「password」では表示する幅（文字数）、select要素では表示する行数を指定 ↓選択肢は5つありますがsizeを3にしているので3つ目まで表示されます |
<input>、<select> | ||||||||
| rows | textarea要素の行数（縦数）を指定 |
<textarea> | ||||||||
| cols | textarea要素の文字数（1行の文字数）を指定 |
<textarea> | ||||||||
| multiple | input要素type属性「email」ではカンマ区切りで複数の値を入力できます ↓それぞれカンマ区切りでメールアドレスを入力後、マウスをずらして再度マウスを合わせて比較してみてください ↓通常は1つしか選択できませんが、複数選択できます |
<input>、<select> | ||||||||
| required | 必須項目を指定します |
<input>、<select>、<textarea> | ||||||||
| placeholder | テキストエリアにヒントを表示 |
<input>、<textarea> | ||||||||
| autoplay | オーディオやビデオなどの自動再生を指定 | <audio>、<video> | ||||||||
| muted | ページ読み込み時に無音にするかどうかを指定 |
<audio><video> | ||||||||
| capture | input要素type属性「file」で使用 ↓※スマホで選択すると背面カメラが起動します |
<input> | ||||||||
| accept | input要素type属性「file」で使用 |
<input> | ||||||||
| colspan | tableの横方向セルを結合
|
<th><td> | ||||||||
| rowspan | tableの縦方向セルを結合
|
<th><td> | ||||||||
| async | スクリプトを非同期で実行 |
<script> | ||||||||
| defer | DOMツリー読み込み後実行 |
<script> | ||||||||