July 6, 2006
Apple Store Ginza
XHTML+CSSに evolution (進化) と revolution (変革) を。
(X)HTMLの進化は、実は長らく止まったまま
「論文」を前提とした仕様設計の限界
XHTML+CSSに足りない5つのコト
- 各社ブラウザのバージョンによる解釈の違い
- CSSのデザイン能力の表現力の乏しさ
- XHTMLの構造を示すタグがちょっと足らないのでは？
- やや独自の路線を暴走するW3C
- 現場の人手不足
HTML+CSSに足りない要素
- サイト名 (CI、ロゴなど) に関するタグ
- 著作権に関するタグ (copyright要素の提案)
- 連絡先 (住所、電話番号など) に関するタグ
- 検索とフォームに関するタグ
<h2>カテゴリー</h2> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>
いずれにしても多目的に使うには限界が。
<img height="300" width="400" alt="2006年バリ島旅行の写真" src="bali2006.jpg" />
<!ELEMENT img EMPTY> <!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED >
XHTML 1.0 S/1.1でも、次の要素/属性が残されている。
これらはすべて、XHTML 2.0では廃止予定。
なお、sup要素とsub要素はテキストモジュールへ、hr要素は「separator要素」に生まれ変わって構造モジュールへ。
h要素とsection要素が導入予定。これらの組み合わせ/入れ子によって、階層構造を示すことができる。
<h>大見出し</h>
<section>
<h>中見出し</h>
<p>パラグラフ</p>
<section>
<h>小見出し</h>
<p>パラグラフ</p>
<h>小見出し</h>
<p>パラグラフ</p>
</section>
</section>
There are two styles of headings in XHTML: the numbered versions h1, h2 etc., and the structured version h, which is used in combination with the section element.
<ul> <li><a href="...">項目1</a></li> <li><a href="...">項目2</a></li> </ul>
<ul> <li href="...">項目1</li> <li href="...">項目2</li> </ul>
<img src="images/logo.gif" alt="○○株式会社" />
<p src="images/logo.gif">○○株式会社</p> <span src="images/logo.gif">○○株式会社</span>
| 要素名 | モジュール | 内容 |
|---|---|---|
| access | Role Access | アクセシビリティ機能割り当て |
| blockcode | Structural | コンピュータコードのブロック |
| di | List | 定義項目 (dtとddのグループ化) |
| h | Structural | 構造型の見出し |
| handler | Handler | ハンドラの定義 |
| l | Text | テキストの各行 |
| nl | List | ナビゲーションリスト |
| quote | Text | インラインの引用文 (≒ q要素) |
| section | Structural | セクション定義 |
| separator | Structural | ページ内の区切り (≒ hr要素) |
| standby | Object | ローディング中のメッセージ |
| summary | Table | 表の要約文 (≒ summary属性) |
| 属性名 | モジュール | 内容 |
|---|---|---|
| about | Metainformation | あるプロパティのリソース (DCなど) の特定 |
| edit | Edit Attributes | テキストの追加や削除 (≒ ins/del要素) |
| full | Text | 省略語の詳細説明URI |
| hrefmedia | Hypertext Attributes | href属性のターゲットメディア |
| hreftype | Hypertext Attributes | href属性のコンテントタイプ |
| key | Role Access | ショートカットキー (≒ accesskey属性) |
| nextfocus | Hypertext | 次のフォーカス (≒ tabindex属性) |
| prevfocus | Hypertext | 前のフォーカス (≒ tabindex属性) |
| layout | Core | 空白文字の処理 |
XHTML 2.0は、新たなボキャブラリを追加しているものの、依然として単純な文書型コンテンツを念頭に置いた仕様設計であり、たとえばフォーラムサイトやオークションサイト、検索エンジン、オンラインショップなどの非文書型コンテンツ (the non-document types of content) を表現する要素が足りない。
| モジュール名 | 属する要素/属性 |
|---|---|
| Document | body, head, html, title |
| Structural | address, blockcode, blockquote, div, h, h1, h2, h3, h4, h5, h6, p, pre, section, separator |
| Text | abbr, cite, code, dfn, em, kbd, l, quote, samp, span, strong, sub, sup, var |
| Hypertext | a |
| List | dl, dt, dd, label, nl, ol, ul, li |
| Core Attributes | class, id, and title attributes |
| モジュール名 | 属する要素/属性 |
|---|---|
| Hypertext Attributes | href, hreftype, cite, target, rel, rev, access, nextfocus, prevfocus, and xml:base attributes |
| I18n attribute | xml:lang attribute |
| Bi-directional Text | dir attribute |
| Edit Attributes | edit and datetime attributes |
| Embedding Attributes | src and type attributes |
| Handlar | handler |
| Image Map Attributes | usemap, ismap, shape, and coords attributes |
| Media Attribute | media attribute |
| モジュール名 | 属する要素/属性 |
|---|---|
| Metainformation Attributes | about, content, datatype, property, rel, resource, restype, and rev attributes |
| Metainformation | meta, link |
| Object | object, param, standby |
| Style Attribute | style attribute |
| Stylesheet | style element |
| Tables | caption, col, colgroup, summary, table, tbody, td, tfoot, th, thead, tr |
外部定義モジュール: Ruby Annotation、XForms、XML Events
div#content {
background-color: ...;
background-image: ...;
background-size: 100% 100%;
}
p.note {
float: left bottom;
}
em {
text-decoration: double-line-through;
}
CSSには「聴覚表現」の仕組みも用意されている (音声スタイルシート)。将来的には「触覚表現」(点字出力など) の仕組みが用意されるかもしれない。
「視覚表現」や「見栄え」に代えて、どのような言葉を使えばよいか模索中。単に「表現」 (presentation) でもよいのだが、日本語の語感としてはややあいまい。
プロパティだけでなく、セレクタや擬似クラス/擬似要素が大幅に増える予定。しかも、モジュールごとに別途定義される場合もある。
| モジュール名 | 内容 |
|---|---|
| Introduction | イントロダクション |
| Syntax | 構文 |
| Selectors | セレクタ |
| Values | 値と単位 |
| Cascading | カスケード処理と継承 |
| Box model | ボックスモデル |
| Positioning | 位置指定 |
| Color | 色 |
| Backgrounds & Borders | 背景とボーダー |
| Line | 行 |
| Text Effects | テキスト効果 |
| Text Layout | テキストレイアウト |
| モジュール名 | 内容 |
|---|---|
| Ruby | ルビ |
| Fonts | フォント |
| Web Fonts | Webフォント |
| Generated | 生成内容と置換内容 |
| Lists | リスト |
| Paged | ページメディア |
| Generated Paged | ページメディア向け生成内容 |
| UI | ユーザーインターフェイス |
| Tables | テーブル |
| Columns | マルチカラムレイアウト |
| Math | 数式 |
| Speech | スピーチ |
| モジュール名 | 内容 |
|---|---|
| Media | メディアクエリ |
| Media2 | メディアクエリ2 |
| CSS-OM | CSSオブジェクトモデル |
| Hyperlinks | ハイパーリンク |
| Presentation | プレゼンテーションレベル |
| Style attr | スタイル属性 |
| Reader | 読み上げメディア |
| Adv. layout | 高度なレイアウト |
| Audio | 音響効果 |
<dl> <dt>お名前</dt> <dd><input type="text" ... /></dd> <dt>Eメール</dt> <dd><input type="text" ... /></dd> <dt>URL</dt> <dd><input type="text" ... /></dd> <dt>コメント</dt> <dd><textarea></textarea></dd> <dd><input type="submit" value="送信" /></dd> </dl>
ガクさんのご意見
<dl> <dt>社名</dt> <dd>...</dd> <dt>代表</dt> <dd>...</dd> <dt>所在地</dt> <dd>...</dd> <dt>電話番号</dt> <dd>...</dd> : </dl>
floralさんのご意見
<dl> <dt>1985年6月</dt> <dd>(出来事)</dd> <dt>1986年3月</dt> <dd>(出来事)</dd> <dt>1988年8月</dt> <dd>(出来事)</dd> <dt>1993年2月</dt> <dd>(出来事)</dd> : </dl>
たまくろうさん、creamさんのご意見
<dl> <dt>代表取締役</dt> <dd>...</dd> <dt>専務取締役</dt> <dd>...</dd> <dt>常務取締役</dt> <dd>...</dd> <dd>...</dd> <dd>...</dd> : </dl>
creamさんのご意見
<dl> <dt>カテゴリー1</dt> <dd>...</dd> <dd>...</dd> <dd>...</dd> <dt>カテゴリー2</dt> <dd>...</dd> <dd>...</dd> <dd>...</dd> : </dl>
floralさんのご意見
<dl>
<dt>カテゴリー名</dt>
<dd>(説明文)
<dl>
<dt>ページ名</dt>
<dd>(説明文)</dd>
<dt>ページ名</dt>
<dd>(説明文)</dd>
</dl>
</dd>
:
</dl>
銀子さんのご意見
<dl> <dt>2006年7月6日</dt> <dd>(新着情報)</dd> <dt>2006年7月5日</dt> <dd>(新着情報)</dd> <dt>2006年7月4日</dt> <dd>(新着情報)</dd> <dt>2006年7月3日</dt> <dd>(新着情報)</dd> <dt>2006年7月2日</dt> <dd>(新着情報)</dd> </dl>
<dl> <dt>Q1:</dt> <dd>(質問)</dd> <dt>A1:</dt> <dd>(回答)</dd> </dl>
または
<dl> <dt>Q1: (質問)</dt> <dd>A1: (回答)</dd> <dt>Q2: (質問)</dt> <dd>A2: (回答)</dd> </dl>
<dl> <dt>(サイト名)</dt> <dd>(URL)</dd> <dt>(サイト名)</dt> <dd>(URL)</dd> </dl>
または
<dl> <dt>(サイト名)</dt> <dd>(説明文)</dd> <dt>(サイト名)</dt> <dd>(説明文)</dd> </dl>
<dl> <dt><img /></dt> <dd>(商品説明)</dd> <dt><img /></dt> <dd>(商品説明)</dd> <dt><img /></dt> <dd>(商品説明)</dd> <dt><img /></dt> <dd>(商品説明)</dd> : </dl>
<dl>
<dt>
<cite>(引用元)</cite>
</dt>
<dd>
<blockquote>
<p>(引用文)</p>
</blockquote>
</dd>
</dl>
<dl>
<dt>(タイトル)</dt>
<dd>
<pre>(ソースコード)</pre>
</dd>
</dl>
本スライドのソースもご参照ください (dl要素を積極利用しています)。
dd要素が長くなる場合、p要素で適宜パラグラフ分けするとよい。もちろん他のブロックレベル要素を使ってもよい。
<dl>
<dt>(用語)</dt>
<dd>
<p>(解説 1段落目)</p>
<p>(解説 2段落目)</p>
:
</dd>
</dl>
dt要素とdd要素はお互いに複数対応させることができる。
<dl> <dt>タラバガニ</dt> <dt xml:lang="en">King Crab</dt> <dd>北海道沿岸からオホーツク海、アラスカが主産地で、 鱈（たら）と漁場が重なるためにこの名前がついています。 旬は11月から3月頃。実はやどかりの仲間で、はさみを含めて 脚が8本しかありません。食べ応えのある太い身が特徴で、 味は上品で淡白。焼きガニや鍋で食すのが一般的です。 実は30年前後は生きる長寿ガニです。</dd> </dl>
ただ、「本来の目的」と「自由な発想」の間で揺れる悩ましさ (どこまで自由に使っていいのか？) もある。
そして...
CSS Nite & Web標準Blog presents
2006年7月15日 (土) 11:00-21:00
六本木アカデミーヒルズ49 タワーホール
ありがとうございました。
Thank You.