XHTML+CSS (r)evolution

February 1, 2007
Apple Store Ginza

このスライドは誰でもアクセスできます

スライドのURL

http://www.cybergarden.net/revolution/20070201/

スライドシステム (モダンブラウザ向け)

W3C® HTML Slidy (XHTML+CSS+JavaScript)

このイベントについて

主催/出演

益子貴寛 (サイバーガーデン)

協力

CSS Nite

withD

allWEBクリエイター塾

アイエイトワン

公式ブログ

http://www.cybergarden.net/revolution/

ちょっとトレンドトーク

HTMLの再開発が話題に

• 2006年10月、Sir Tim Berners-Leeが「Reinventing HTML」というブログ記事を投稿
• 神崎正英さんのメモ「HTMLの再構築？」
• 木達一仁さんのコラム「再び注目を集めるHTML」

HTML5 vs. XHTML2

• HTML5 (Web Applications 1.0)
• Web Standards Groupのメーリングリストでは、「Standards War」というややエキセントリックな投稿が

テーマ

• CSS3のカタチとナカミ
• カタチ = モジュールベースの仕様設計など
• ナカミ = 各モジュールのセレクタ/プロパティなど
• 時間の限り「カタチ」と「ナカミ」を見ていきます

CSS3はモジュールベース

デバイス/ブラウザ開発上のメリット

目的（たとえば視覚プレゼンテーションか聴覚プレゼンテーションかなど）に合ったモジュールのみを実装できるほか、追加でサポートするモジュールをプラグインで提供できるなど

ユーザーのメリット

自分に必要なモジュールをサポートしている軽快なデバイスやブラウザを選んだり、拡張プラグインをダウンロードして機能を追加するなど、よりよいブラウジング環境を整えやすくなるなど

CSS3 モジュール一覧 (1)

モジュール名	内容
Media Queries	メディアクエリ (Common Tech)
Selectors	セレクタ (Common Tech)
Introduction	イントロダクション
Syntax	構文
Values and Units	値と単位
Cascading and Inheritance	カスケード処理と継承
Scoping	適用対象
Namespaces	名前空間
Paged	ページメディア
Reader Media Type	メディアタイプ「reader」
Presentation Levels	プレゼンテーションレベル
style Attribute Syntax	スタイル属性の構文

CSS3 モジュール一覧 (2)

モジュール名	内容
Box Model	ボックスモデル
Positioning	ポジショニング
Text Layout	テキストレイアウト
Line Layout	行レイアウト
Multi-column Layout	マルチカラムレイアウト
Advanced Layout	高度なレイアウト
Backgrounds and Borders	背景とボーダー
Color	色
Text	テキスト
Fonts	フォント
Web Fonts	Webフォント
Ruby	ルビ

CSS3 モジュール一覧 (3)

モジュール名	内容
Math	数式
Lists	リスト
Tables	テーブル
Hyperlink Presentation	ハイパーリンク表現
Generated and Replaced Content	生成内容と置換内容
Generated Conent for Paged Media	ページメディア向け生成内容
Basic User Interface	基本ユーザーインターフェイス
Object Model	オブジェクトモデル
Speech	スピーチ
Aural Style Sheets	音声スタイルシート

プロファイル: Mobile、TV、Print

Box Model (1)

これまでにも存在したプロパティ (視覚整形モデル/視覚効果を含む)

• margin、border(-width)、padding
• width、height
• min-/max-width、min-/max-height
• display
• float、clear
• visibility、overflow

Box Model (2)

新たなプロパティ

display-model (子に何を含めるか)

Value: inline-inside | block-inside | table | ruby

Initial: text

Applies to: all elements

display-role (自身の親としての役割)

Value: none | block | inline | list-item ...

Initial: inline

Applies to: all elements

Box Model (3)

新たなプロパティ

box-width、box-height

Value: <length> | <percentage> | auto

Initial: auto

Applies to: all elements, except inline-level elements

左ボーダー辺から右ボーダー辺までの幅と高さ。

Box Model (4)

新たなプロパティ

overflow-x、overflow-y

Value: visible | hidden | scroll | auto

Initial: visible

Applies to: block-level and replaced elements

overflowはこれらのショートハンドに。

Box Model (5)

新たなプロパティ

• indent-edge-reset
• marquee(-style/-direction/-speed)
• overflow-clip

Box Model (6)

新たなプロパティ (生成・置換内容のモジュールに移動)

• fit
• fit-position
• crop

Box Model (7)

大きく変わるプロパティ

float

Value: left | right | top | bottom | inside | outside | start | end | none

Initial: none

Applies to: all but positioned elements, generated content, and the root element

これにともない、clearも値が増える。また、新たなプロパティ clear-after、float-displaceが追加。

Line Layout (1)

これまでにも存在したプロパティ

• line-height
• vertical-align

新たなプロパティ

• text-height
• line-stacking(-strategy/-ruby/-shift)
• dominant-baseline

Line Layout (2)

新たなプロパティ

• alignment-baseline、alignment-adjust
• baseline-shift
• inline-box-align
• drop-initial-value、drop-initial-size
• drop-initial-after-align、drop-initial-after-adjust
• drop-initial-before-align、drop-initial-before-adjust

Backgrounds and Borders (1)

これまでにも存在したプロパティ

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• border(-width/-style/-color)

Backgrounds and Borders (2)

新たなプロパティ

• background-clip/-origin
• background-size
• background-break
• border-image
• border-radius
• border-break
• box-shadow

Text (1)

これまでにも存在したプロパティ

• text-align
• word-spacing
• letter-spacing

Text (2)

新たなプロパティ

• white-space-collapse
• word-break
• hyphenate
• text-wrap
• word-wrap
• text-align-last
• text-justify

Fonts (1)

これまでにも存在したプロパティ

• font
• font-family
• font-style
• font-variant
• font-weight
• font-stretch
• font-size/font-size-adjust

Fonts (2)

新たなプロパティ

• font-effect
• font-smooth
• font-emphasize(-style/-position)

Firefox 2 (1)

マルチカラムレイアウトの一部

column-count、column-width、column-gapの3つをサポート。「-moz-」というプリフィックス（接頭辞）をつけて利用。

::selection擬似要素

テキストをクリック＆ドラッグで反転させるなど、ユーザーがハイライトしている部分のスタイル。

border-radiusプロパティ

ボーダーの角を丸める。いわゆる「角丸」。

Firefox 2 (2)

outline-offsetプロパティ

アウトラインと内容との余白を指定。

opacityプロパティ

色の不透明度を指定。

Firefox 2 でマルチカラム表示 (実際のページ)

Firefox 2 で角丸表示 (実際のページ)

Opera 9 (1)

Media Queries の一部

メディアタイプの機能拡張。CSSの適用範囲を、幅、高さ、色というメディア特性に基づいて絞り込んだり広げたりするしくみ。

contentプロパティの適用対象拡大

CSS2.1までは:before/:after擬似要素のみにしか適用できなかったが、CSS3ではすべての要素にも適用可能になっている。

opacityプロパティ

色の不透明度を指定。

Opera 9 (2)

box-sizingプロパティ

CSS2/2.1ではwidth/heightプロパティで指定する幅と高さは「コンテンツの内容領域」。box-sizingは、幅と高さを「コンテンツの内容領域」(content-box)と「ボーダー」(border-box)のどちらかを指定するためのプロパティ。
ただし、box-sizingは今後、box-width/box-heightプロパティと:container擬似クラスに代替され、破棄されると考えられる。

Safari 2

アルファチャンネル<alpha>

p { color: rgba(<red>, <green>, <blue>, <alpha>) }

新しい属性セレクタ

Substring matching attribute selectorsをサポート。「att^="value"」「att$="value"」「att*="value"」の3つ。

opacityプロパティ

色の不透明度を指定。

IE 7

overflow-x、overflow-yプロパティ

overflowプロパティの左右・上下別指定。

ruby-align、ruby-overhangプロパティ

ルビの行揃えとはみ出し方法。

その他

• Firefox 2、Opera 9は、セレクタ E ~ F をサポート。
• Firefox 2、Opera 9は、擬似クラス :enabled、:disabled、:checked、:valid、:invalid、:in-range、:out-of-range をサポート。
• Firefox 2、Safari 2は、擬似クラス :root、:last-child、:only-child、:empty、:target、:not(S) をサポート。
• Opera 9は、擬似クラス :default、:required をサポート。

CSS3に役立つ情報/ツール

• CSS: Under Construction (W3C)
• Web Browser CSS Support (Web Devout)
• CSS3 セレクタチートシート (www watch)
• CSS Selectors textsuite (CSS3.info)
• CSS3のセレクタをJavaScriptで先取り実装
  (長谷川恭久さん「CSS Nite in Nagoya」資料)

CSS3の考え方/学び方のポイント (1)

• セレクタ、擬似要素、擬似クラスは、Selectors だけでなく、個々のモジュールでも定義される。Selectors で定義されるのは、あくまで一般的なものだけ。
• 個々のモジュールはそれぞれを援用しつつ策定されている。単体で存在しているわけではない。
• 今日 (2007年2月1日) 現在、いくつかのモジュールはまだ未着手。Positioning、Text Layout、Tables など。これらのモジュールの展開は、他のモジュールへの影響が大きい。

CSS3の考え方/学び方のポイント (2)

• 現在のCSSスキルアップの大変さは、主にクロスブラウザ調整。
• デザイナー/コーダーにとって、表現手段が広がるのは本来よろこばしいこと。
• セレクタ/プロパティは結局「知っているか知らないか」。大切なのは、裏側を支えるしくみ。特に、シチュエーションにあわせたセレクタの選び方や組み合わせ方、プロパティ間の関係性。それはCSS3になっても変わらない。
• 楽しみながら、スキルアップしていきましょう。

ありがとうございました。
Thank You.