読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

グローバル属性

HTML5

HTML5で使う属性


HTML5のグローバル属性一覧》

id属性 ID名を定義
class属性 クラス名を定義
style属性 直接CSSを適用
title属性 タイトルなどの補足情報を定義
accesskey属性 ショートカットキーを割り当て
tabindex属性 タブキーでフォーカスするかとその順番を指定
lang属性 言語コードを指定
contenteditable属性

編集可/不可を指定

contextmenu属性 コンテキストメニューとして表示
dir属性 テキストの表示方向を指定
draggable属性 ドラッグ可能かどうかを指定(JavaScriptが必要)
dropzone属性 ドラッグ&ドロップ可能かどうかを指定
hidden属性 本文と関連性がない(表示する必要がない)要素に指定
spellcheck属性 スペルチェックを実行するかどうかを指定

id属性
  • 指定した要素の一意識別子を定義する
  • HTML文書内での重複は原則として許されていない
  • 最低1文字以上
  • スペースは使用不可
  • 1文字目に数字は使用不可
<div id="content">
<p>CSSやJavaScriptなどで指定する</p>
</div>
class属性
  • 指定した要素のクラス名を定義する
  • 同じページ内に複数回使用できる
  • 半角スペースで区切って複数の値を指定できる
<div class="contentArea partA">
<p>CSS属性にCSSで装飾する</p>
</div>
style属性
  • 指定した要素に直接CSSを適用する
<div style="color: #000; border: 1px; solid #F00">
<p>文字色を黒、ボーダーを赤で線幅1pxに指定</p>
</div>
title属性
<p><img src="photo.png" alt="画像と置き換えられる詳細な代替えテキスト" title="要素の説明"></p>
accesskey属性
  • 指定した要素にショートカットキーを割り当てる
  • 同時に複数のキーを押すときには半角スペースで区切って複数の値を指定
<div accesskey="s">[s]キーを押すとこの部分がアクティブになります</div>