|
HTML5＋CSS3 |
HTML5編
|
| Lesson 4 | HTML5の新要素(前編) | |||
| 制作・文 | 羽田野 太巳（有限会社futomi） |
| HTML5には新たな要素が数多く追加された。ここでは各要素の概要を解説しよう。言及しているブラウザの記述は、 Windows 7 上のInternet Explorer 9 ベータ版、Firefox 4.0 Beta 11、Opera 11.01、Chrome 10 dev版、Safari 5.03に基づいている。 |
セクション関連要素
section要素
一般的な章や節を表す。見出しと、それに付随するコンテンツのセットをくくるために使う。これまで、章や節といったブロックを表すために使っていたdiv要素に代わるものとなる【1】。
section要素はとても汎用的で、いろいろな場所で使えるのだが、乱用は避けるべきだ。ヘッダーであればheader 要素、フッターであれば footer要素、サイドバーであればaside要素、ナビゲーションであればnav要素といった具合に、すでにセマンティクスが割り当てられたセクションであれば、それに対応した要素を使うよう心がけよう。
article要素
単独で成り立つようなコンテンツの単位を表し、おもに1つのブログ記事やニュース記事全体を囲むために使う。
sectionのように、コンテンツ全体から 見て一部の章や節に使うのではない点に注意しよう【2】。
【2】は、article要素の中に1つの記事の内容がすべて詰め込まれているシーンを想定している。しかしarticle要素は、必ずしもそのコンテンツすべてが詰め込まれている必要はない。ひとつの記事の"単位"を表していることが重要だ。
【3】はブログサイトの記事一覧を想定したものだ。一覧の各項目には記事のタイトルとヘッドラインだけが掲載されている。こういったシーンでも、記事の単位を表しているため、article要素を使うことができるのだ。
aside要素
メイン・コンテンツに関係はしているが、やや本筋から逸れていて軽く触れる程度のコンテンツを表す。aside要素のコンテンツがなかったとしても、メインコンテンツを損なわないものと考えればよいだろう。
代表的な利用例としては、ページのサイドバーや補足記事、イメージ図などが挙げられる。
nav要素
ページ内の主要なナビゲーションを表す。通常は各リンクを、ul 要素を使ってリストとしてマークアップすることが多 い【5】。
ただし、すべてのサイト内リンクをnav要素に入れるべきではない。あくまでもそのページ内の代表的なナビゲーション だけに使う。
多くのサイトでは、ページヘッダーとページフッターに同じようなナビゲーションが掲載されている。この場合、ページヘッダーのナビゲーションのほうが重要であることは間違いないだろう。そのため、nav 要素はページヘッダーのナビゲーションに使い、ページフッターのナビゲーションには使わないのが通常だ。
hgroup要素
セクションの見出しと副題を表す。この要素にはh1 ～h6要素しか入れることはできない。これらの要素を2つ以上入れると、見出しレベルが高い要素が見出し、それ以外は副題というセマンティクスを持つことになる。
【5】では、hgroup要素の中にh1要素とh2要素が入れられている。セマンティクス上、article要素の見出しはあくまでもh1要素のみだ。h2要素は見出しではなく副題として解釈されることになる。
header要素
通常はページ最上段に掲載する領域に使う要素だ。サイト名、サイトロゴ、サイト概要、サイトナビゲーションを入れるとよいだろう。header要素は、ページヘッダーだけでなく、記事のヘッダーとしても利用することができる【6】。
footer要素
通常はページ最下段に掲載する領域に 使う要素だ。著作権表記、フッター用ナビゲーションリンクなどを入れるとよいだろう【7】。footer要素はページフッターだけでなく、記事のフッターとしても利用することができる。
【1】
【2】
【3】
【4】※a要素は紙面の都合上href要素を省略している
【5】
【6】
【7】
コンテンツをグループ化する要素
figure要素／figcaption要素
図などにキャプションを入れる場合、figure 要素が便利だ。キャプションにはfigcaption要素を使う。このようなマークアップによって、図とキャプションがマークアップ上で明示的に関連づけられることになる【8】。
figure 要素は図だけでなく、ビデオやプログラムコード、引用など、さまざまなコンテンツで利用することができる。figcaption要素には、figure要素のコンテンツのタイトルだけでなく、ちょっとした説明文を入れてもかまわない。
【8】
テキストに意味を与える要素
time要素
time要素は日付や時間を表す。これまでのHTMLでは、日時を要素で囲む場合はspan要素などを使うしかなく、マークアップ上でそれが日時を表していることを明示的に宣言することができなかった。そのためスクリーン・リーダーなどでは、それが日時を表しているのかをはっきりと判別しにくいという問題があった。その観点でこの要素の意味は大きい。
time要素には、datetime属性を使ってマシンが読み取れるフォーマットの日時データを入れる【9】。
【9】では2011年5月7日を表している。マシンから見れば5/7は分数にも解釈できてしまうが、datetime属性にはマシンが読み取れるフォーマットの日時が指定されているため、確実に日付を表すことができるのだ。
なお、datetime属性に指定できる日時フォーマットは仕様で決められているので注意しよう。日付は2010-05-07、時間は12:05（12 時5 分）、日時は2010-05-07T12:05となる。
mark要素
特定のテキストの範囲を参照目的でハイライトするために使う。とはいえ、ただ単に目立たせたい、強調したいといった理由だけでmark 要素を使うべきではない。あくまでも、ハイライトされたテキスト部分が別の場所から参照される場合に 限るべきだろう。強調ならem要素、重要性を表すならstrong要素、もしくはb要素を使ったほうがいい。
mark要素は、ブラウザのデフォルトスタイルとして【10】のスタイルが適用される。つまり、黒字で背景が黄色となり、あたかも黄色のマーカーで色を付けたかの ようにレンダリングされる【11】。
2011年2月現在ですでにInternet Explorer 9、Firefox 4.0、Chrome はmark 要素にデフォルトスタイルが定義されている。
ruby要素／rt要素／rp要素
ruby要素は、ルビを伴うテキストを表す。rt要素はルビテキスト、つまりふりがなそのもの表す。rp要素はふりがなを括弧で囲みたい場合に使う。ruby要素の中にrt要素、rp要素を入れて、ルビ付きテ キストを表現する【12】 。
ruby要素をサポートしたブラウザであれば、rt要素でマークアップしたふりがなが【13】のようにレンダリングされる。しかし、rubyをサポートしていないブラウザでは【14】のようにレンダリングされてしまう。これではルビベース（本体のテキスト）とルビテキスト（ふりがな）がつな がってしまい非常に読みにくい。これを解決するのがrp要素だ。
ルビテキスト（ふりがな）の前後に括弧を表す文字を入れたrp 要素を加える【15】。こうすると、ruby 要素をサポートしたブラウザではrp要素が無視され、当初のサンプルの通りルビベースの上にルビテキストが表示される。それに対し、ruby要素をサポートしていないブラウザではルビテキストが括弧で囲まれるため、最良ではないが、ある程度は読みやすく なる【16】。
bdi要素
前後のテキストに適用された双方向テキスト書式制御から隔離したいテキストの範囲を表す要素だ。
アラビア語などの右から左に向かって読み進めるテキストと、英語や日本語のように左から右に向かって読み進める言語を混在させた場合、意図しない順番でそれらのテキストがレンダリングされることがある。この自動的に行われる配置の仕組みを解除するのがbdi要素だ。
wbr要素
レンダリングにおいて、改行されても構わない位置にこの要素を入れる。 通常、幅が固定されたボックスの中では、テキストは適切な位置で折り返してレンダリングされる。しかし、アルファベットのみが連続したテキストではその折り返しが行われず、そのボックスをはみ出してレンダリングされてしまうことがある。
【17】ではCSSでdiv要素の幅が固定で指定されている。ブラウザでは【18】のようにレンダリングされてしまう。
こういったシーンで折り返してレンダリングしてもよい場所にwbr要素を入れておくと、必要に応じて折り返しが行われることになる【19】。ここではwbr要素が3箇所にマークアップされている。しかし、必要なところでしか折り返しされない点に注意してほしい【20】。
【9】
【10】
【11】
【12】
【13】
【14】
【15】
【16】
【17】
【18】
【19】
【20】
＞＞目次に戻る
