FC2ブログ
WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:要素の変更とグローバル属性!!基礎知識編 vol.2

Category: HTML5   Tags: HTML5  要素の変更  グローバル属性  

HTML5入門:要素の変更とグローバル属性!!基礎知識編 vol.2

HTML5入門!!要素の変更点:グローバル属性とは?基礎知識編 vol.2


HTML5入門!!要素の変更点:グローバル属性とは?基礎知識編 vol.2 として、今日はHTML5の「要素の変更点」「グローバル属性」について勉強していきます。一緒に勉強していきましょう...



HTML5要素の変更



HTML5では、仕様の意図に沿って、要素の追加や削除、意味の変更などが行われています。

HTML5:要素の変更点HTML5で追加された要素

HTML5で新しく追加された要素は次の表で緑色で示したところです。文書構造をより適切に示すための要素、マルチメディアを扱うための要素、APIとともに利用することを前提とした要素などが既定されています。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbr

HTML5:要素の変更点HTML5で変更された要素

 HTML5で意味が変更された要素は次の表で緑で示したところです。WEBでどのように使われているのかを考慮したり、より便利なものとなるよう変更が加えられています。

aabbraddressarea
articleaside
audiobbacebdoblockpuotebody
brbuttoncanvascaptioncitecode
colcolgroupcommanddatalistdddel
detailsdfndivdldtem
embedfieldsetfigcaptionfigurefooterform
h1~h6headheaderhgrouphrhtml
iiframeimginputinskbd
keygenlabellegendlilinkmap
markmenumetameternavnoscript
objectoloptgroupoptionoutputp
parampreprogressqrprt
rubyssampscriptsectionselect
smallsourcespanstrongstylesub
summarysuptabletbodytdtextarea
tfootththeardtimetitletr
ulvarvideowbr

HTML5:要素の変更点HTML5で廃止された要素

HTML5で廃止になった要素は次の通りです。装飾的な役割しか持たず、CSSで代わりに表現できる要素や、フレーム関連要素のようにユーザビリティーやアクセシビリティーに影響を与えるとされるもの、あまり利用されず他の要素で代用できるものなどが廃止されています。

basefontbigcenterfontstrijett
uframeframesetnoframesacronymapplet
isindexdir



HTML5:グローバル属性

 HTML4.01では、ほぼすべての要素で利用できるclass,dir,id,lang,style,tabindex,titleという属性が定義されていまいた。HTML5では、これらの属性にいくつかの属性を加えた以下の属性を「グローバル属性」として定義しています。グローバル属性はすべての要素で共通して利用できます。

HTML5:グローバル属性accesskey="ショートカットキー"
 要素にキーボード・ショートカット用のキーを割り当てます。半角スペースで区切って複数のキーを指定することもできます。この場合は指定した順に優先順位が付けられ、その環境で利用可能な最初のキーがショートカットキーとして採用されることになっています。

HTML5:グローバル属性class="クラス名"
 要素に対してクラス名を指定します。半角スペースで区切って複数のクラス名を指定することもできます。class属性では同一の文書内の複数の要素に対して同じ名前を指定でき、スタイルシートを適用する場合のセレクタなどに利用されます。

HTML5:グローバル属性contenteditable="編集可能かどうか"
 要素を編集可能にするかどうかを指定します。編集可能にする場合は「true」または空文字(””)、編集不可にする場合は「false」を値に指定します。

HTML5:グローバル属性contentmenu="menu要素のid属性値"
 menu要素で定義したメニューを当該要素のコンテキスト・メニューとして表示します。値には。menu要素のid属性の値を指定します。

HTML5:グローバル属性dir="テキストの表記方向"

 要素内容のテキストの表記方向を指定します。左から右の場合は「ltr」、右から左の場合は「rtl」を値に指定します。

HTML5:グローバル属性draggable="ドラッグ可能かどうか"

 要素をドラッグ可能にするかどうかを指定します。ドラッグ可能にする場合は「true」、ドラッグ不可にする場合は「false」を値に指定します。
 dropzone属性とdraggable属性は、ドラッグ&ドロップAPIと組み合わせて利用します。

HTML5:グローバル属性dropzone="ドロップしたアイテムの処理方法"

 要素をドロップ可能な場所とし、この場所が受け入れるアイテムを、どのように処理するのかを指定します。値に「copy」を指定するとドラッグされたデータがこの場所のコピーされ「move」を指定するとドラッグされたデータをここに移動します。「link」を指定した場合は、オリジナルのデータとドロップ先との間に何らかの関連付けやつながりが作られます。
 dropzone属性とdraggable属性は、ドラッグ&ドロップAPIと組み合わせて利用します。

HTML5:グローバル属性hidden="hidden"

 指定した要素が、他の部分とは無関係であることを表します。この属性が指定された要素はブラウザーにも表示されません。この属性は、当該の要素が無関係の状態を表す場合のみ「hidden="hidden"」「hidden=""」「hidden」のいずれかの書式で指定します。

HTML5:グローバル属性id="名前"
 要素の名前(識別子)を指定します。同一の文書内で同じ名前を重複して使う事はできません。スタイルシートのセレクタ、リンクの対象、スクリプトからの参照などで利用されます。

HTML5:グローバル属性lang="言語コード"
 要素内容の言語を表す言語コード指定します。日本語はja、英語はen、米国英語はen-US、のように指定します。lang属性が指定されていない要素の言語は、lang属性が指定されている親要素の言語と同じになります。

HTML5:グローバル属性spellsheck="スペルチェックを有効にするかどうか"
 テキストが入力可能な要素において、スペルチェックや文法チェックを有効にするかどうかを指定します。フォームのテキスト入力欄(input要素やtextarea要素)、contenteditable属性が指定され編集可能になっている要素に対して利用できます。

HTML5:グローバル属性style="CSS宣言"
 要素に指定するCSSの宣言を直接記述します。「;(セミコロン)」で区切って複数のCSS宣言を指定することができます。

HTML5:グローバル属性tabindex="移動の順番"

 「Tab」キーを使ってフォーカスを移動させる際の、順番を指定します。ただし、実際に「Tab」キーを利用するかどうかは環境によって異なります。値には整数を指定し、値の小さなものから大きなものへ移動します。値に0が指定されている要素と、tabindex属性が指定されてない要素は、この属性に1以上の値が指定されている要素の後にフォーカスが移動します。また、負の値を指定した場合は、フォーカスは可能になりますが、「Tab」キーによる移動の対象にはなりません。

HTML5:グローバル属性title="補足情報"

 要素の補足情報を表します。例えば、当該の要素がリンクであればリンク先のタイトルや説明、画像であればその画像タイトルや著作権情報、引用文である場合は、引用元に関する情報の記載などに利用できます。title属性に指定された内容は、一般的にはマウスカーソルを当てたときにツールチップとして表示されます。



関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:要素の変更とグローバル属性!!基礎知識編 vol.2

LEAVE
'A'
COMMENT






09-2018
SUN MON TUE WED THU FRI SAT
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

08   10

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。