Your Search Results

    Global attributes

    by 3 contributors:

    HTML はすべての HTML 要素で共通の属性をいくつか定義します。これらの属性はすべての要素で使用できますが、いくつかの要素では効果がない属性があるかもしれません。

    使用上の注意: HTML5 仕様では、グローバル属性がHTML5 で明示されていないものを含むすべての HTML 要素に定められるであろうと述べています。これはあらゆる非標準の要素が、それを使用することで文書が HTML5 に準拠しなくなるとしても、グローバル属性を受け入れなければならないということです。例えば <foo> は正当な HTML 要素ではありませんが、HTML5 準拠のブラウザは <foo hidden>...<foo> とマークアップされたコンテンツを隠します。

    accesskey

    この属性は、カレント要素用のキーボードショートカットを生成するためのヒントを与えます。この属性は文字 (ひとつの Unicode コードポイント) を空白区切りで並べたリストで構成されます。ブラウザは、コンピュータのキーボードレイアウトに存在する最初の文字を使用します。
    HTML 4 以前のバージョンの HTML では、文字を 1 つだけ指定できました。また、グローバル属性ではなく <a>、<area>、<button>、<input>、<label>、<legend>、<textarea> の各要素のみで使用できました。

    使用上の注意: accesskey を作動させる操作は、プラットフォームおよびブラウザにより異なります。
      Windows Linux Mac
    Firefox Alt + Shift + a キー
    • Firefox 14 or newer, Control + Alt + a キー
    • Firefox 13 or older, Control + a キー
    Internet Explorer Alt + a キー N/A
    Google Chrome Alt + a キー Control + Alt + a キー
    Safari Alt + a キー N/A Control + Alt + a キー
    Opera Shift + Esc で accesskey によりアクセス可能なコンテンツリストを開き、キーを押して選択する
    Firefox ではユーザ設定でモディファイアキーをカスタマイズできる点に注意してください。
    規範文書 WHATWG HTML Living Standard (HTML 4: HTML 4.01 Specification)

    class

    この属性は、要素のクラスを空白区切りで並べたリストです。クラスは CSS のクラスセレクタや JavaScript の DOM メソッド document.getElementsByClassName といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

    使用上の注意: 仕様書ではクラス名の要件を示していませんが、Web 開発者は要素のセマンティックな目的を表す名前を使用することが推奨されます (例えば、あるクラスの要素が斜体で表示されるとしても、クラス名は斜体であることではなく特性を表すようにします)。セマンティックな名前は、ページの外見を変更した場合でも論理的であり続けます。

    規範文書 WHATWG HTML Living Standard (HTML 4: HTML 4.01 Specification)

    contenteditable

    HTML5 この列挙属性は、ユーザによる要素の編集が可能かを示します。可能である場合、ブラウザは要素のウィジェットを編集可能なものに変更します。この属性では、以下の値のひとつを使用しなければなりません:

    • true または 空文字列 : 要素が編集可能であることを示す
    • false : 要素は編集不可であることを示す

    この属性を設定しない場合のデフォルト値は、親要素から継承された値です。

    使用上の注意: この属性は列挙型であり、論理型ではありません。これは値 true、false または空文字列のいずれかを明示的に使用することが必須であり、<label contenteditable>Example Label</label> といった省略形は認められないということです。正しい使用法は <label contenteditable="true">Example Label</label> です。

    規範文書 WHATWG HTML Living Standard

    contextmenu

    HTML5 この属性は、新しい WHATWG HTML Living Standard に関係するものです。

    コンテキストメニューは、右クリックなどユーザの操作によって現れます。HTML5 ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。

    HTML:

    <body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu</pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">On the image below, you can fire the "Change Image" action in your Context Menu.</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

          ol {

        list-style-type:decimal;

      }

    以下の JavaScript とともに使用します:

    function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

    結果は以下のとおりです:

    data-*

    HTML5 カスタムデータ属性と呼ばれるこれらの属性は、HTML とスクリプトによって使用されるであろう HTML の DOM 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、属性を設定した要素の HTMLElement インターフェイスを通して使用できます。HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。
    * は、以下の制約と合わせて xml 名の作成規則に従う名前に置き換えられます:

    • XML として使用する場合であっても、名前を xml で始めてはならない。
    • 名前にコロン (U+003A) を含めてはならない。
    • 名前に大文字の A から Z を含めてはならない。

    HTMLElement.dataset 属性は StringMap であり、またカスタムデータ属性名のハイフン (U+002D) は次の文字を大文字化したものに置き換えられる (キャメルケース) 点に注意してください。よって data 属性 data-test-value は HTMLElement.dataset.testValue としてアクセスできます。

    規範文書 WHATWG HTML Living Standard

    dir

    この列挙属性は、要素のテキストの書字方向を示します。以下の値を使用できます:

    • ltr : left to right を表し、左から右へ記述する言語 (日本語、英語など) に対して使用します。
    • rtl : right to left を表し、右から左へ記述する言語 (アラビア語など) に対して使用します。
    • auto : ユーザエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字をパースして、その方向を要素全体に適用する初歩的なアルゴリズムを使用します。HTML5

    使用上の注意:

    • この属性は、異なる意味を持つ場所を示す <bdo> 要素で必須です。
    • この属性は <bdi> 要素に継承しません。属性を設定しない場合の値は auto になります。
    • この属性は CSS の direction プロパティや unicode-bidi プロパティでオーバーライドできません。CSS がアクティブで、かつ要素がこれらのプロパティをサポートしていても同様です。
    • テキストの書字方向はその表示ではなく内容に対してセマンティックな関係がありますので、Web 開発者には可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、CSS をサポートしないブラウザや CSS を無効化したブラウザでもテキストが正しく表示されます。
    • 値 auto は、ユーザの入力に由来して最終的にデータベースへ保存するようなデータなど、書字方向が不定のデータに対して使用してください。
    規範文書 WHATWG HTML Living Standard (HTML 4: HTML 4.01 Specification)

    draggable

    HTML5 この列挙属性は、要素が Drag and Drop API を使用するドラッグが可能であるかを示します。以下の値を使用できます:

    • true : 要素がドラッグ可能であることを示す
    • false : 要素はドラッグ不可であることを示す

    この属性を設定しない場合のデフォルト値は auto であり、ブラウザで定義された既定の動作になります。

    使用上の注意:

    • この属性は列挙型であり、論理型ではありません。これは値 true または false のいずれかを明示的に使用することが必須であり、<label draggable>Example Label</label> といった省略形は認められないということです。正しい使用法は <label draggable="true">Example Label</label> です。
    • デフォルトでは選択テキスト、画像、リンクのみドラッグ可能です。その他すべての要素ではこちらの包括的なサンプルで示しているように、ドラッグアンドドロップの仕組みを動作させるために ondragstart イベントを設定しなければなりません。
    規範文書 HTML5, section 3.9.5

    dropzone

    HTML5 未実装 この列挙属性は、Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示します。以下の値を使用できます:

    • copy : ドロップにより、ドラッグした要素のコピーを生成することを示す
    • move : ドロップされた要素は新しい場所に移動されることを示す
    • link : ドラッグしたデータへのリンクを生成する
    規範文書 HTML5, section 8.6.8

    hidden

    HTML5 この論理属性は、要素はまだ、あるいはもはや関連性がないことを示します。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザはこのような要素を表示しません。

    使用上の注意:

    • この属性は、表示することが正当であるはずのコンテンツを隠すために使用してはいけません。例えば、タブインターフェイスでタブパネルを隠すために使用するものではありません。それはスタイリングについて決まることであり、別のスタイルによる表示が完全に正しいページという結果につながるでしょう。
    • 隠された要素は、隠されていない要素からリンクしないようにしてください。
    • 隠された要素の子孫要素は依然アクティブです。これは script 要素が実行可能、またフォーム要素が送信可能であるということです。
    • hidden 属性を持つ要素の display CSS プロパティの値を変更すると、動作をオーバーライドします。例えば display: flex を設定した要素は、hidden 属性が与えられているかにかかわらずスクリーンに表示されます。
    規範文書 HTML5, section 8.1

    id

    この属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性用途は、リンク (フラグメント識別子を使用)、スクリプト、スタイル (CSS を使用) で要素を特定することです。

    使用上の注意:

    • この属性の値は不透明文字列 (opaque string)です。これは、Web 作者は情報を伝えるためにこの属性を使用してはならないということです。セマンティックな意味といった特別な意味合いを文字列から得てはいけません。
    • この属性の値にホワイトスペース文字を含めてはいけません。ブラウザはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる class 属性とは対照的に、要素は id 属性で定義された ID をひとつだけ持つことができます。なお要素は複数の ID を持つこともできますが、他の ID は要素の DOM インターフェイスによるスクリプトとの接続などにおいて、別の意味を持つものとして設定されます。
    • ASCII 文字、数字、'_'、'-'、'.' 以外の文字は HTML 4 で許容されていなかったため、使用した場合に互換性の問題を引き起こす可能性があります。この制約は HTML 5 で外されましたが、互換性のため ID はこれらの文字で始めるようにしましょう。
    規範文書 HTML5, section 3.2.3.1 (HTML 4: HTML4.01, section 7.5.2)

    itemid

    itemprop

    itemref

    itemscope

    itemtype

    Living Standard これらの属性は WHATWG HTML Microdata 機能に関係します。バグ 591467

    lang

    この属性は要素の言語の定義に関係するもので、編集不可能な要素が記述されている言語、あるいは編集可能な言語に記述されるであろう言語を定義します。タグは、IETF の文書である Tags for Identifying Languages (BCP47) で定義されている形式の値を 1 個持ちます。タグが空文字列である場合は、言語が unknown になります。また BCP47 に対して正しくない場合は、invalid になります。

    使用上の注意:

    • xml:lang 属性が優先するため、lang 属性を設定していても考慮されない場合があります。すべての場合における言語の決定方法を知るため、要素の言語を判断するアルゴリズムをご覧ください。
    • CSS の :lang 擬似クラスにおいて不正な言語名は、その名前が異なっていれば別のものという扱いになります。
    規範文書 HTML5, section 3.2.3.3(HTML 4: HTML4.01, section 8.1)

    spellcheck

    HTML5 この列挙属性は、要素でスペルミスのチェックを行うかを定義します。以下の値を使用できます:

    • true : 可能であればその要素でスペルチェックを行うことを示す
    • false : その要素でスペルチェックを行わないことを示す

    この属性を設定しない場合のデフォルト値は、要素の種類やブラウザによって定義されます。このデフォルト値は inherited でもあり、もっとも近い祖先要素の spellcheck が true である場合にのみ、自身もスペルチェックを受けることを意味します。

    こちらの記事で、この属性の包括的な使用例をご覧いただけます。

    使用上の注意:

    • この属性は列挙型であり、論理型ではありません。これは値 true または false のいずれかを明示的に使用することが必須であり、<label spellcheck>Example Label</label> といった省略形は認められないということです。正しい使用法は <label spellcheck="true">Example Label</label> です。
    • この属性は単に、ブラウザに対する助言です。ブラウザがスペルチェックを有効にすることを求められてはいません。一般的に編集不可能な要素は、spellcheck 属性が true に設定およびブラウザがスペルチェックをサポートしていても、スペルチェックを受けません。
    • この属性のデフォルト値は、ブラウザおよび要素により異なります:
    ブラウザ <html> <textarea> <input> その他 コメント
    Firefox いいえ いいえ いいえ 継承 layout.spellcheckDefault が 0 の場合
    いいえ はい 継承 継承 layout.spellcheckDefault が 1 (既定値) の場合
    いいえ はい はい 継承 layout.spellcheckDefault が 2 の場合
    Seamonkey いいえ いいえ いいえ 継承 layout.spellcheckDefault が 0 の場合
    いいえ はい 継承 継承 layout.spellcheckDefault が 1 (既定値) の場合
    いいえ はい はい 継承 layout.spellcheckDefault が 2 の場合
    Camino いいえ いいえ いいえ 継承 layout.spellcheckDefault が 0 の場合
    いいえ はい 継承 継承 layout.spellcheckDefault が 1 の場合
    いいえ はい はい 継承 layout.spellcheckDefault が 2 (既定値) の場合
    規範文書 HTML5, section 8.8

    style

    この属性は、要素に適用する CSS スタイル宣言を包含します。スタイルは別のファイルで定義することが推奨される点に注意してください。この属性と <style> 要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。

    使用上の注意: この属性は、セマンティックな情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然としてセマンティックスが正しくあるべきです。典型として、無関係な情報を隠すために使用しないようにしてください。これには hidden 属性を使用しましょう。

    規範文書 HTML5, section 3.2.3.7(HTML 4: HTML4.01, section 14.2.2)

    tabindex

    この整数属性は要素が入力フォーカスを持てる (focusable) 場合に、シーケンシャルなキーボードナビゲーションに参加するか、また参加する場合はどの位置に入るかを示します。さまざまな値をとることができます:

    • 負数 は、要素はフォーカスを持つことが可能であるがシーケンシャルなキーボードナビゲーションでは到達できないことを表します。
    • 0 は、要素はフォーカスを持つことが可能でありシーケンシャルなキーボードナビゲーションで到達できるが、その相対的な順序はプラットフォームの慣習により定められることを表します。
    • 正数 は、要素はフォーカスを持つことが可能でありシーケンシャルなキーボードナビゲーションで到達できることを表します。またその相対的な順序は属性の値で定義され、tabindex の数値の昇順に従います。複数の要素が同じ tabindex を共有する場合、その相対的な順序は文書内における要素の相対的な位置に従います。

    tabindex の値が 0 または不正な値である、あるいは tabindex の値を持たない要素はシーケンシャルなキーボードナビゲーションで、正数の tabindex を持つ要素より後に並びます。

    こちらの記事で、フォーカス管理の包括的な使用例をご覧いただけます。

     

    規範文書 HTML5, section 8.4.1(HTML 4: HTML4.01, section 17.11.1)

    title

    この属性は、要素に関するアドバイザリー情報を表すテキストを包含します。このような情報は一般的にツールチップとしてユーザに表示されますが、必ず表示されるとは限りません。この属性の典型的な用途は以下のとおりです:

    • リンクにおいて、リンク先文書のタイトルや説明
    • 画像などのメディア要素において、説明や関連するクレジット
    • 段落において、脚注や注釈
    • 引用において、作者に関する情報など

    この属性を省略した場合は、もっとも近い祖先要素の title が自身にも関係する (また、自身のツールチップとしてその title を使用してよい) ことを意味します。この属性に空文字列を設定した場合は、もっとも近い祖先要素の title は自身と関係がない (また、自身のツールチップとして使用するものではない) ことを明示的に表します。

    <link>、<abbr>、<input> の各要素では、title 属性に意味が追加されています。

    使用上の注意: title 属性は複数の行を持つことができます。U+000A LINE FEED (LF) が改行を表します。以下の HTML は 2 行のタイトルを定義することを意味するなど、注意しなければならないことがあります:

    <p>Newlines in title should be taken into account,like this <abbr title="This is a
multiline title">example</abbr>.</p>

    Gecko は複数行の title を Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) でサポートしました。

    規範文書 HTML5, section 3.2.3.3 (HTML 4: HTML4.01, section 7.4.3

     

    Document Tags and Contributors

    タグ:
    Contributors to this page: yyss, shirayuki, ethertank
    最終更新者: yyss,