HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
HTML 要素には属性が存在します。これは、ユーザーが求める基準を満たすために、要素を構成したり、さまざまな方法で動作を調整したりするための追加の値です。
メモ: ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の background-image を使用してください。
メモ: これは古い属性です。代わりに CSS の background-color プロパティを使用してください。
メモ: これは古い属性です。代わりに CSS の border プロパティを使用してください。
この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。
メモ: これは古い属性です。代わりに CSS の color プロパティを使用して下さい。
ここに挙げた要素の高さを指定します。他の要素では、 height プロパティを使用してください。
メモ: <div> など一部の要素では、これは古い属性であり、代わりに CSS の height プロパティを使用してください。
この属性には、リソースの 1 つ以上の ハッシュ が含まれており、リソースのコンテンツが開発者が想定した通りであり、サプライチェーン攻撃 によって悪意のあるコピーに置き換えられていないことを保証するために使用されます。
サブリソースの完全性を参照してください。
ここに挙げられた要素に対して、要素の幅を指定します。
メモ: <div> をはじめとする他の要素については、これは古い属性であり、代わりに CSS の width プロパティを使用してください。
HTML では、ほとんどの属性にコンテンツ属性と IDL (Interface Definition Language) 属性の 2 つの側面があります。
コンテンツ属性はコンテンツ（HTML コード）から設定する属性であり、 element.setAttribute() や element.getAttribute() を使用して設定または取得できます。 コンテンツ属性は値として数値を想定するものであっても、常に文字列です。例えば コンテンツ属性を使用して <input> 要素の maxlength 属性に 42 を設定するには、その要素で setAttribute("maxlength", "42") を呼び出さなければなりません。
IDL 属性は JavaScript プロパティとしても知られています。これらは、 JavaScript のプロパティを使って、 element.foo のように読み込んだり設定したりすることができます。 IDL 属性は常に、取得する際に値を返すために基盤となっているコンテンツ属性を使用し（変換することもあります）、設定するにはコンテンツ属性に何かを保存します。言い換えれば、 IDL 属性は要するにコンテンツ属性を反映します。
ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば <input> 要素の type 属性の既定値は "text" であるので、input.type="foobar" を設定すると <input> 要素は (外見と動作が) text 型になりますが、 "type" コンテンツ属性の値は "foobar" になります。しかし、 type の IDL 属性は文字列 "text" を返します。
IDL 属性は常に文字列とは限りません。例えば input.maxlength は数値（符号付き long）です。 IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength は常に数値を返し、また input.maxlength を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。
IDL 属性は、他の型を反映することができます。符号なし long、URL、論理値などです。残念ながら、明確な規則はなく、 IDL 属性が対応するコンテンツ属性と結びついてどのように振る舞うかは、属性によって異なります。ほとんどの場合は仕様書にあるレイアウトルールに従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性（例えば select.size）があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。
一部のコンテンツ属性（例えば required, readonly, disabled）は「論理属性」 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値が真となり、存在しなければ、その値が偽となります。
HTML では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列（属性の値が割り当てられないことがあります）または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。
明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が真であると解釈されます。
警告: イベントハンドラーコンテンツ属性を使用することは推奨されません。HTML と JavaScript が混在すると保守性の低いコードになることが多く、またイベントハンドラー属性の実行はコンテンツセキュリティポリシーによってブロックされることがあります。
警告: ハンドラーに対して Function.prototype.toString() メソッドを呼び出しても確認できませんが、イベントハンドラーの属性はコードを 2 つの with ステートメントで暗黙的に囲むことになり、予期しない結果を引き起こす可能性があります。例を示します。
上の表に掲載されている属性の他に、グローバルイベントハンドラー（onclick など）も、すべての要素のコンテンツ属性として指定することができます。
すべてのイベントハンドラー属性は文字列を受け入れます。この文字列は、 JavaScript 関数、たとえば function name(/*args*/) {body} などを生成するために使用され、name は属性の名前、body は属性の値となります。ハンドラーは、対応する JavaScript イベントハンドラーと同じ引数を受け取ります。ほとんどのハンドラーは event 引数 1 つだけを受け取りますが、onerror は5つの引数 (event, source, lineno, colno, error) を受け取ります。これは、一般的に、属性内で変数 event を使用することができることを意味しています。
このページは 2026年10月5日 に MDN の貢献者によって最終更新されました。
このコンテンツの一部は、©1998–2026 個人の mozilla.org 協力者です。コンテンツはクリエイティブ・コモンズ・ライセンスのもとで利用できます。