css design and programming
Post on 18-Dec-2014
5.082 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
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 と宣言されているページは少なくない
正しくマークアップされている
HTML4 / XHTML の2004年頃の状況 - 2
しかし
MIMEタイプについては application/xhtml+xml は使われておらず、ほとんどのページで text/html が使われていた
XHTML1.1 はほとんど使われていない
なぜ？
XMLは整形式(正しい書式)を要求するがWeb上のほとんどのページはXMLとしての誤りを含んでいる
XHTML1.1 では text/html を使うことはできず、application/xhtml+xml を使う必要がある
HTML4 / XHTML の2004年頃の状況 - 3
大多数のページでは依然として 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の範囲は?
http://platform.html5.org/
http://platform.html5.org/
Web Applications
1.0は?
http://platform.html5.org/
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
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 を手前に表示
クリック可能な label を手前に表示
CSS 8puzzle のソースコード
JavaScript 0 行
HTML 167 行
CSS 2013 行
CSS Noughts and Crosses
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
CSS Noughts and Crosses
https://gist.github.com/2d575af617934eb752ed
Powered by Rabbit 0.9.3Powered by Rabbit 0.9.3
ご清聴ありがとうございました。
top related