Category : XHTML/CSS
Google Ajax Feed API | CSSデザインカタログ 
idの命名に迷ったら
2007-10-19
0
0
XHTML/CSS
Role, XHTML
以前こんなエントリーを書きました。
id,class名をどうふるとよいか,しばしば悩みます。いくつかのパターンがあって,そのどれかを使うのですが,明確な基準というものはありませんでした。
XHTML Role 属性モジュール
先日W3Cから,「XHTML Role 属性モジュール」の最終草案が出されました。
部分的に引用してみます。
概要
この仕様で定義される XHTML Role 属性は、作成者が要素に役割を与えるための属性です。機械で抽出可能な意味情報を要素に与えることで、XML を用いた言語に注釈を与えることができるようになります。ユースケースとして、アクセシビリティやデバイスアダプテーション、サーバサイド処理、複雑なデータの説明が挙げられます。(略)
作成者は次に挙げる、標準 role を用いることができます。定義に含まれる慣習的な解釈も参考にしてください。これらの role はユーザーの判断を助けるため、文書の領域を定義することを目的としています。
banner- バナーとは通常、Web ページの上部に現れる広告を示します。バナーの内容として Web サイトや企業のロゴ、またはその他の重要な宣伝要素が含まれます。
contentinfo- 文章の内容に関する情報を表します。例えば脚注や著作権の情報、プライバシーに関する説明へのリンクなどが属します。
definition- 関連する要素の内容は、用語や概念などの定義を表します。内容の中に dfn 要素 ([XHTMLMOD] にて定義) が存在する場合、その要素は定義される用語を表します。
main- 文書内の主要な内容である部分を定義します。
navigation- 文書内での誘導や、関連する文書へのリンクをまとめたものを表すのに適します。
note- 文書内の主要な内容を表すリソースに対して、その挿入句や補助的な情報などを表します。
search- Web 文書にある検索セクションを表します。通常は Web サイト内の検索や、または一般的な検索サービスに使われる検索フォームを指します。
secondary- 文書内にある独自のセクションを表します。ポータルサイトを例に取れば、時計や天気、株価情報などの部分が当てはまります。
seealso- ページの主要な内容に関連する内容を表します。
この「標準role」なら,多くの人が共通して使える命名となります。まちまちに命名されていたものが,ある法則性を持って統一されれば,XHTMLのデータが様々な場面で利用しやすくなるはずです。
文書の領域を定義する
概要のところに「文書の領域を定義することを目的としています」と書かれています。
ページをレイアウトするとき,まず,空間をいくつかの領域に分け,そこにうまく収まるように文書を割り振っていく。という方法をとりがちです。ひとつのブロックの中に,いろいろな内容が脈絡なく混在していることもあります。「ここ,空いてて寂しいから何か入れよう」みたいな...。
アクセシビリティを考えると,脈絡のない情報の混在はあまりよいこととは言えません。まず最初に,文書を組み立てに基づいていくつかの領域に分け,それをページの空間に割り振っていく。というのが望ましいと思います。
role属性は,マークアップする際に文書の領域とその役割を明確にしてくれそうです。
id属性の値として使ってみる
モジュールはXHTML1.1以降でないと使えません。
XHTML1.0,HTML4.01では,次のように,id属性の値として使ってみようと思います。将来,これをrole属性に書き換えることを見越して。
<div id="banner">
(サイトタイトル・ロゴ / ブログタイトル)
</div>
<div id="main">
(メインの内容 / エントリ)
</div>
<div id="seealso">
(関連する内容 / コメント・トラックバック)
</div>
<div id="search">
(検索)
</div>
<div id="navigation">
(メニュー)
</div>
<div id="contentinfo">
(クレジット・連絡先)
</div>
idにどんな名前をつけるか悩んだとき,参考にするとよいかもしれません。
参考
モジュールについては神崎さんが書かれた
が参考になると思います。
Trackback (0)
Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29
Add Comment
Search
XHTML/CSS Category Entries
- table のアクセシビリティを向上させる
- table と caption の margin
- label のススメ
- CSSの初期化ファイル
- nth-child() 疑似クラスを試してみる
- CSSファイルの分割
- IEで指定どおりのfont-sizeにならない
- すぐに使えそうなネガティブマージン
- dtをfloatする場合の注意点
- Re: CSSによるデザインワークと相性のよいHTMLって?
- flaotを解除する3つの方法
- カレンダーをリストでマークアップ
- IE6, 7 そして 8
- idの命名に迷ったら
- CSSの初期化
- h1をサイトタイトルにする理由
- classをどの要素にふるか
- li要素にdl要素を入れてみる
- 画像置換の問題点
- id="header"で問題ないのでは
- font-size指定
- clearfixでfloatを解除
- サイト全体に連なるh1〜h6
- ul,liでメニューをマークアップ
- dlで写真をマークアップ
- 見出しの階層をちゃんとする
- サイトタイトルを画像にしたら

Comments (0)