W3C CSS標準化とCSS組版の未来

単純化したウェブデザインの歴史

デザインなし
HTML表によるデザイン
CSSトリックによるデザイン
フレームワークによるデザイン（カプセル化したトリック）
すばらしい未来へ？

全てが似ている

The so-called holygrail layout has a header, a footer, and in between a main section flanked on each side by side bars, typicaly for ads or navigation. The main section and the sidebards have the same height, regardless of which has more content.

A very common design nowadays has a giant top image banner with overlay text, and a long column of content below it, separated into panes, many of wich have content split into 3 columns. — Credit: Dave Ellis

ウェブは最初からレスポンシブ

初めてのウェブサイト（1991年）

http://info.cern.ch/hypertext/WWW/TheProject.html

ウェブと従来メディアとの違い

紙（もしくはPDF）
作者側	メディアの選択
	デザイン設計
	デザイン実現
	確認・微調整
読者側	読書

ウェブ
作者側	デザイン設計
読者側	メディアの選択
	デザイン実現
	微調整
	読書

CSSの設計理念

Flexible
Powerful
Robust
Understandable
Performant

詳しくはFantasaiのブログへ参照

段組（Multi-column）

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

columns: 2

columns: 150px

Flexbox

Foo

Bar

Baz

Foo

Bar

Baz

レスポンシブＳＶＧ

See the Pen London underground sign by Ana Sampaio (@anaisampaio) on CodePen.

Credit to Ana Sampaio

内在的イントリンジックウェブデザイン

Credit to Jen Simmons

幅・高さ以外のバリエーション

	pointer	hover	update	overflow-block	scripting
laptop	fine	hover	fast	scroll	enabled
phone	coarse	none	fast	scroll	enabled
Wii	coarse	hover	fast	scroll	enabled
TV	none	none	fast	scroll	enabled
print	none	none	none	paged	initial-only
e-ink	none	none	slow	paged	enabled
Vivliostyle.js	fine	hover	fast	paged	initial-only

意外なバリエーション

システムフォントが違う
フォントサイズの初期設定が違う
フォント・画像のダウンロード失敗
CMS・ユーザから予定外コンテンツ」量、言語、方向…
古いブラウザによって、一部の機能が動かない

最近熟成して来ている機能

CSS-Grid

Jen Simmonsより

Writing Modes

天下一網ワンウェブ

ティム氏

shape-outside

initial-letter

Variable Fonts

Mandy Michaelより

さらに

flexbox
様々な単位：em、rem、ch、ic、vh、vw…
object-fit
clip-path
Sizing values：min-content、max-content、fit-content()
CSS Box Alignment

まだまだのところ

ルビ
分かち書き
行取り
ページフロート
脚注
テンプレートにコンテンツを流れ込む
ページヘッダー・ページフッター

熟成させるためには？

ウェブ上で高級デザインを実現
実現的な拡張、専用ツールを使用する
ソーシャルメディアでブラウザに圧力をかける
標準化活動に参加
ウェブと出版のコミュニティを統一する