css design and programming

CSS Designand

Programming〜CSS で何ができるの？〜

天野卓 @ ToI企画

2011.7.23

自己紹介

佐久市でWebアプリケーションを開発しています

フリーソフトウェアを配布しています

http://tec.toi-planning.net

GitHub

http://github.com/usualoma

jsdo.it

http://jsdo.it/usualoma

概要

HTML5 とは

HTML5 に到るまでの歴史✓

HTML5 の範囲✓

HTML5 はもう使えるの？✓

CSS Design and Programming

CSS とは✓

CSS3 で出来るようになること✓

CSS Programming✓

HTML5 とは

http://dev.w3.org/html5/spec/

HTML5 とは

http://platform.html5.org/

HTML5に到るまでの

歴史

前身である HTML4 / XHTML について

HTML4のW3C勧告

1997年にHTML4.0

1999年にHTML4.01

SGMLベースのHTMLからXMLベースのXHTMLへの移行を計画

パースが簡単になる (プログラム側の都合)

MathMLやSVGなどのXML関連技術と連携しやすい

XHTMLのW3C勧告

1999年にXHTML1.0

2001年にXHTML1.1

HTML4 / XHTML の2004年頃の状況 - 1

マークアップとしては、XHTMLは受け入れられ始めていた

XHTML1.0 と宣言されているページは少なくない

正しくマークアップされている


しかし

MIMEタイプについては application/xhtml+xml は使われておらず、ほとんどのページで text/html が使われていた

XHTML1.1 はほとんど使われていない

なぜ？

XMLは整形式(正しい書式)を要求するがWeb上のほとんどのページはXMLとしての誤りを含んでいる

XHTML1.1 では text/html を使うことはできず、application/xhtml+xml を使う必要がある


大多数のページでは依然として HTML4.01が使われていた

各ブラウザに独自拡張が増えてきた

マルチメディア

embed / object

JavaScript

DOM

ブラウザベンダーは新しい標準化を求めていた

WHATWG の発足 - 1

2004年、W3Cのワークショップで Mozilla とOpera が Web の将来に関する提案を行う

後方互換性と明確な移行手段

適切に定義されたエラー処理

ユーザーがオーサリングエラーに直面しないこと

実用性(実用的なユースケースが盛り込まれていること

など

XHTMLに対する新しいAPIではなく、HTMLやCSSまたDOMへの拡張を開発したい

非公式な投票が行われるが否決

WHATWG の発足 - 2

同2004年、Apple、Mozilla、Opera によりHTMLをベースとした規格と関連技術の策定を目的とした団体、WHATWGが設立される。

Web Hypertext Application Technology Working Group

WHATWG の策定している仕様

HTML5

Web Applications 1.0

HTML5 / Web Applications 1.0

WHATWG の策定した仕様はブラウザベンダーの支持を集めた

2006年にはW3Cでもワーキンググループが作られ、現在は共同で策定作業を進めている

一方 XHTML2.0 は支持を得られず

2009年にワーキンググループは終了した

HTML5 の仕様書

WHATWG

http://www.whatwg.org/specs/web-apps/current-work/multipage/

✓

W3C

http://dev.w3.org/html5/spec/✓

http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html

✓

http://www.w3.org/TR/DOM-Level-3-Events/✓

...✓

HTML5 の仕様の策定状況

WHATWG

生きている仕様✓

現存のドキュメントを最新のHTML規格とする✓

W3C

2011年7月の時点では最終草案の段階✓

2014年の勧告を目指している✓

HTML5の範囲は?

Web Applications

1.0は?

HTML5 とは

仕様書の範囲として

WHATWG の HTML5 の仕様書✓

時には

WHATWG の Web Applications 1.0 の仕様書✓

バズワードとして

次世代のウェブ技術の総称✓

HTML5 はもう使えるの？

マークアップ言語として

主要なモダンブラウザは対応済み

未対応のブラウザでも表示は可能

HTML では未知のタグは単に内容が表示されるため

未対応ブラウザのためのツールもある

HTML4 から HTML5 への移行は簡単

互換性が高いので、多くの場合はDOCTYPEを変更すればHTML5 のドキュメントになる

<!DOCTYPE html>

HTML5 はもう使えるの？

関連API

使えるものと使えないものがる

Firefox / Google Chrome / Opera HTML5 の範囲はかなり使えるが、IE は 9 でも実装されていない API は多い

使いたい API を実装されているブラウザでのみ使うProgressive Enhancement

事例 - Web Storage

Twitter

Amazon

HTML5 のまとめ

HTML5とは

「これから決まる仕様」ではなく「すでに動いている仕様」✓

どう使うか

価値を生むことの出来る機能を選んで使う✓

CSS Designand

Programming

CSS とは

カスケーディングスタイルシート（CSS）は、ウェブドキュメントにスタイル（フォント, カラー, 余白など）を追加するためのシンプルな仕組みです。

[cited from `http://www.a2ztutorial.com/Style/CSS/']

つまり...

http://shopdd.blog51.fc2.com/blog-entry-932.html

これでいいの?

CSS の役割

デザイン

ビジュアル的な綺麗さ、全体のイメージ

配色の調整や画像の配置

ユーザビリティ

テキストを読みやすくするタイポグラフィ

情報を探しやすいレイアウト

操作しやすい、迷わないフォーム

わくわくするユーザーインターフェイス

例えば

クリックしやすいダウンロードリンク

ボタンの CSS を切った場合

クリックしやすいダウンロードリンク

http://mozilla.jp/firefox/

読みやすい/選択しやすい表

HTML文書とCSSの役割分担

HTML文書

コンテンツ

CSS

デザイン

http://shopdd.blog51.fc2.com/blog-entry-932.html

お絵かきは?

サイトのコンテンツだとするとおそらく NG

デザインの要素であればおそらく OK

CSS の現状

W3C勧告の出ている最新バージョンは 2.1

CSS3 は策定中

モダンブラウザでは対応は進んでいる

ベンダープレフィックスの必要なものも多い

-moz-linear-gradient

-webkit-linear-gradient

-o-linear-gradient

-ms-

CSS3 の仕様書

CSS current work & how to participate

http://www.w3.org/Style/CSS/current-work

Selectors

http://www.w3.org/TR/css3-selectors/

CSS Color Module

http://www.w3.org/TR/2011/REC-css3-color-20110607/

Media Queries

http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/

...

CSS2 から CSS3 で変わる所

画像や配色の指定が強力になる

Web フォント

角丸・グラデーション・枠線に画像が使える

レイアウトを柔軟に、シンプルに指定できる

段組

display: flexbox

セレクタが追加され細かく要素を指定できる

複数環境への対応

メディアクエリー

サブミットボタン

サブミットボタン - HTML

<input type="submit" value="" class="submit-button" />

サブミットボタン - HTML

<input type="submit" value="送信" class="submit-button" />

サブミットボタン - CSS

.submit-button { background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0d5eb5), color-stop(0.20, #3690f0), color-stop(0.20, #3690f0), color-stop(0.00, #70b6f2)); background: -webkit-linear-gradient( top, #70b6f2 0%, #3690f0 20%, #3690f0 20%, #0d5eb5 100%); background: -moz-linear-gradient( top, #70b6f2 0%, #3690f0 20%, #3690f0 20%, #0d5eb5 100%); background: -o-linear-gradient( top, #70b6f2 0%, #3690f0 20%, #3690f0 20%, #0d5eb5 100%); background: linear-gradient( top, #70b6f2 0%, #3690f0 20%, #3690f0 20%, #0d5eb5 100%);

サブミットボタン - CSS

border: 0; border-radius: 5px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0, 0, 0, 0.9); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1); font-weight: bold; font-size: 20px; padding: 10px 40px; color: white;}

角丸

角丸 - HTML

<div class="container01"> <div class="container02"> <div class="content"> Firefox </div> </div></div>

角丸 - HTML

<div class="content"> Firefox</div>

角丸 - CSS - 例1

/* border-radius */div.content { border: 1px solid #D7D7D7; border-radius: 10px;}

角丸 - CSS - 例2

/* background-image を複数指定する */div.content { background-image: url("content-header.png"), url("content-footer.png") background-repeat: no-repeat, no-repeat; background-position: top, bottom}

角丸 - CSS - 例3

/* border-image */div.content { border-image: url("border.png") 60 60 60 60 / 60px 30px 10px 30px repeat;}

CSS3 を使うと嬉しいこと

表現力が強力になる

少ない記述で要件を満たしたデザインを実現できる

複数のデバイスに対応できる

HTML でコンテンツの表現に集中できる

ところで

プログラマならプロフィールに書きたい

そんなわけで

CSS Programming

CSS 8puzzle

http://jsdo.it/usualoma/1Tgw

CSS Noughts and Crosses

http://jsdo.it/usualoma/qzfr

CSS でプログラミングをするということ

CSS はプログラミングのための仕組みではない

利用者にとってのメリットはない

あえていえば JavaScript を切っていても動作する

工夫しないと動かせないので作成者の勉強になる

CSSでできること

CSSではできないこと

CSS プログラミングの基本的な要素

DOM

CSS

CSS プログラミングの基本的な要素 - DOM

DOM

input で状態を保存

<input type="checkbox" />

<input type="radio" />

scrollbar を利用する手法もある

CSS プログラミングの基本的な要素 - CSS

CSS

セレクタで見た目を定義

:checked > .foo

:checked ~ :checked ~ .foo (CSS3)

クリック対象の input を調整する

z-index

pointer-events (CSS3)

状態の変更時にアニメーションさせる

transition (CSS3)

有限オートマトン

ソースのイメージ - DOM

<div id="panel"> <input type="radio" id="r1-1_1-1" name="1-1" /> <input type="radio" id="r1-1_1-2" name="1-1" checked="checked" /> <input type="radio" id="r1-1_1-3" name="1-1" /> <input type="radio" id="r1-1_2-1" name="1-1" /> <input type="radio" id="r1-1_2-2" name="1-1" /> <input type="radio" id="r1-1_2-3" name="1-1" /> <input type="radio" id="r1-1_3-1" name="1-1" /> <input type="radio" id="r1-1_3-2" name="1-1" /> <input type="radio" id="r1-1_3-3" name="1-1" /> <input type="radio" id="r1-2_1-1" name="1-2" /> <input type="radio" id="r1-2_1-2" name="1-2" /> <input type="radio" id="r1-2_1-3" name="1-2" /> <input type="radio" id="r1-2_2-1" name="1-2" checked="checked" /> <input type="radio" id="r1-2_2-2" name="1-2" />

ソースのイメージ - セレクタz-index

input { z-index: 0;}#r1-1_3-2:not(:checked) ~ #r1-2_3-2:not(:checked) ~#r1-3_3-2:not(:checked) ~ #r2-1_3-2:not(:checked) ~#r2-2_3-2:not(:checked) ~ #r2-3_3-2:not(:checked) ~#r3-1_3-2:not(:checked) ~ #r3-2_3-3:checked ~input[for="r3-2_3-2"] { z-index: 10;}

ソースのイメージ - セレクタpointer-events

input { pointer-events: none;}#r1-1_3-2:not(:checked) ~ #r1-2_3-2:not(:checked) ~#r1-3_3-2:not(:checked) ~ #r2-1_3-2:not(:checked) ~#r2-2_3-2:not(:checked) ~ #r2-3_3-2:not(:checked) ~#r3-1_3-2:not(:checked) ~ #r3-2_3-3:checked ~input[for="r3-2_3-2"] { pointer-events: auto;}

ソースのイメージ - transition

div#complete { left: 420px; -webkit-transition: left 200ms linear 800ms; -moz-transition: left 200ms linear 800ms; -o-transition: left 200ms linear 800ms;}#r1-1_1-1:checked ~ #r1-2_1-2:checked ~ #r1-3_1-3:checked ~#r2-1_2-1:checked ~ #r2-2_2-2:checked ~ #r2-3_2-3:checked ~#r3-1_3-1:checked ~ #r3-2_3-2:checked ~ div#complete { left: 0;}

CSS プログラミングで突き当たる壁

いとこ要素を指定したいんだけど...

セレクタでフィルタしたいんだけど...

条件を満たすまでループしたいんだけど...


<div id="board"> <div id="panel_1"> <input type="radio" id="1-1" /> <input type="radio" id="1-2" /> </div> <div id="panel_2"> <input type="radio" id="2-1" /> <input type="radio" id="2-2" /> </div> ...

このようにできると嬉しいのですが...

#1-1.checked :parent #panel_2 #2-2.checked { ...}

要素の関連で指定するセレクタ

コンビネータ

E F E要素の子であるF要素

CSS2

E > F E要素のすぐ後ろの子であるF要素

CSS2

E + F E要素のすぐ後ろの弟であるF要素

CSS2

E ~ F E要素の弟であるE要素

CSS3


できません!

input は全て兄弟要素として並べてください

<input type="radio" id="1-1" /><input type="radio" id="1-2" /><input type="radio" id="2-1" /><input type="radio" id="2-2" /><div id="board"> <div id="panel_1"> <label for="1-1"></label> <label for="1-2"></label> </div> <div id="panel_2"> <label for="2-1"></label> <label for="2-2"></label> </div> ...

CSS3 を使うとこのように指定できます

#1-1.checked ~ #2-2.checked { ...}

CSS2 でもこのように指定することは可能です

#1-1.checked + #1-2 + #2-1 + #2-2.checked { ...}


input:checked:nth-child(1) div { display: block;}

input:checked:nth-child(2) div { /* * 2つチェックされているときに適用される * :nth-child(1) のセレクタは上書きされる */ display: block;}

DOMの構造や状態で指定するセレクタ

擬似クラス

E:root ルート要素 3

E:checked チェックされているE要素

2

E:nth-child(n) チェックされているE要素

3

DOM に対して擬似的にクラスを設定する

<html class=":root"> <input type="radio" checked class=":checked :nth-child(1)" /> <input type="radio" class=":nth-child(2)" /> <input type="radio" class=":nth-child(3)" /> <input type="radio" checked class=":checked :nth-child(4)" /> <input type="radio" checked class=":checked :nth-child(5)" />


できません!


input:checked ~ div { display: block;}

input:checked ~ input:checked div { /* * 2つチェックされているときに適用される */ display: block;}


CSS から DOM を変更できればループできそうだけど...


できません!

DOMを変更することはできません

状態の変更はユーザーの入力に依存します

CSS 8puzzle

http://jsdo.it/usualoma/1Tgw

CSS 8puzzle の戦略

<input type="radio" /> を使用

1 ピースにつき 9 つの input を用意

トグルを簡単に表現できるため

移動可能なピースに対して、クリック可能な label を z-index で一番手前に表示する

初期状態もあらかじめ作成

終了状態になったら用意しておいた Complete! 画面を表示

クリック可能な label を手前に表示

CSS 8puzzle のソースコード

JavaScript 0 行

HTML 167 行

CSS 2013 行


http://jsdo.it/usualoma/qzfr

CSS Noughts and Crosses の戦略

<input type="checked" /> を使用

1 マスにつき 5 個の input を用意

最大で 5 手までなので

コンピューターの手順はあらかじめ全て用意

CSS Noughts and Crosses のソースコード

JavaScript 0 行

HTML 150 行

CSS 12373 行

CSS のまとめ

CSS3

少ない記述で要件を満たしたデザインを実現できる✓

CSS Programming

意外と役立つこともあります。✓

Enjoy!✓

参考文献

2004年にW3Cのワークショップで出された提案

http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

入門 HTML5

Mark Pilgrim (著), 矢倉眞隆 (監訳), 水原文 (翻訳) オライリージャパン

書き捨てのPHP

CSS 8puzzle

https://gist.github.com/376d7d0a2f3d7533a2e0


https://gist.github.com/2d575af617934eb752ed

Powered by Rabbit 0.9.3Powered by Rabbit 0.9.3

ご清聴ありがとうございました。

css design and programming

Documents