Contenu connexe Similaire à CSS Design and Programming Similaire à CSS Design and Programming (20) 1. CSS Design
and
Programming
〜CSS で何ができるの？〜
天野 卓 @ ToI企画
2011.7.23
3. 概要
HTML5 とは
✓ HTML5 に到るまでの歴史
✓ HTML5 の範囲
✓ HTML5 はもう使えるの？
CSS Design and Programming
✓ CSS とは
✓ CSS3 で出来るようになること
✓ CSS Programming
9. 前身である 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
10. HTML4 / XHTML の2004年頃の状況 - 1
マークアップとしては、XHTMLは受け入れられ始
めていた
XHTML1.0 と宣言されているページは少なくない
正しくマークアップされている
11. HTML4 / XHTML の2004年頃の状況 - 2
しかし
MIMEタイプについては application/xhtml+xml は使
われておらず、ほとんどのページで text/html が使わ
れていた
XHTML1.1 はほとんど使われていない
なぜ？
XMLは整形式(正しい書式)を要求するがWeb上のほ
とんどのページはXMLとしての誤りを含んでいる
XHTML1.1 では text/html を使うことはできず、
application/xhtml+xml を使う必要がある
12. HTML4 / XHTML の2004年頃の状況 - 3
大多数のページでは依然として HTML4.01が使
われていた
各ブラウザに独自拡張が増えてきた
マルチメディア
embed / object
JavaScript
DOM
ブラウザベンダーは新しい標準化を求めていた
13. WHATWG の発足 - 1
2004年、W3Cのワークショップで Mozilla と
Opera が Web の将来に関する提案を行う
後方互換性と明確な移行手段
適切に定義されたエラー処理
ユーザーがオーサリングエラーに直面しないこと
実用性(実用的なユースケースが盛り込まれているこ
と
など
XHTMLに対する新しいAPIではなく、HTMLやCSS
またDOMへの拡張を開発したい
非公式な投票が行われるが否決
14. WHATWG の発足 - 2
同2004年、Apple、Mozilla、Opera によりHTML
をベースとした規格と関連技術の策定を目的とし
た団体、WHATWGが設立される。
Web Hypertext Application Technology Working
Group
WHATWG の策定している仕様
HTML5
Web Applications 1.0
15. HTML5 / Web Applications 1.0
WHATWG の策定した仕様はブラウザベンダーの
支持を集めた
2006年にはW3Cでもワーキンググループが作られ、
現在は共同で策定作業を進めている
一方 XHTML2.0 は支持を得られず
2009年にワーキンググループは終了した
16. 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/
✓ ...
23. HTML5 とは
仕様書の範囲として
✓ WHATWG の HTML5 の仕様書
時には
✓ WHATWG の Web Applications 1.0 の仕様書
バズワードとして
✓ 次世代のウェブ技術の総称
25. HTML5 はもう使えるの？
関連API
使えるものと使えないものがる
Firefox / Google Chrome / Opera HTML5 の範囲はかな
り使えるが、IE は 9 でも実装されていない API は多い
使いたい API を実装されているブラウザでのみ使う
Progressive Enhancement
事例 - Web Storage
Twitter
Amazon
28. CSS とは
カスケーディングスタイルシート
（CSS）は、ウェブドキュメントにスタ
イル（フォント, カラー, 余白など）を
追加するためのシンプルな仕組み
です。
[cited from `http://www.a2ztutorial.com/Style/CSS/']
42. 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/
...
43. CSS2 から CSS3 で変わる所
画像や配色の指定が強力になる
Web フォント
角丸・グラデーション・枠線に画像が使える
レイアウトを柔軟に、シンプルに指定できる
段組
display: flexbox
セレクタが追加され細かく要素を指定できる
複数環境への対応
メディアクエリー
47. サブミットボタン - 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%);
48. サブミットボタン - 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;
}
50. 角丸 - HTML
<div class="container01">
<div class="container02">
<div class="content">
Firefox
</div>
</div>
</div>
52. 角丸 - CSS - 例1
/* border-radius */
div.content {
border: 1px solid #D7D7D7;
border-radius: 10px;
}
53. 角丸 - 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
}
54. 角丸 - CSS - 例3
/* border-image */
div.content {
border-image: url("border.png")
60 60 60 60 / 60px 30px 10px 30px repeat;
}
64. CSS プログラミングの基本的な要素 - DOM
DOM
input で状態を保存
<input type="checkbox" />
<input type="radio" />
scrollbar を利用する手法もある
65. CSS プログラミングの基本的な要素 - CSS
CSS
セレクタで見た目を定義
:checked > .foo
:checked ~ :checked ~ .foo (CSS3)
クリック対象の input を調整する
z-index
pointer-events (CSS3)
状態の変更時にアニメーションさせる
transition (CSS3)
70. ソースのイメージ - 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" />
71. ソースのイメージ - セレクタ
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;
}
72. ソースのイメージ - セレクタ
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;
}
73. ソースのイメージ - 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;
}
76. いとこ要素を指定したいんだけど...
<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>
...
78. 要素の関連で指定するセレクタ
コンビネータ
EF E要素の子であ CSS2
るF要素
E>F E要素のすぐ後 CSS2
ろの子であるF
要素
E+F E要素のすぐ後 CSS2
ろの弟であるF
要素
E~F E要素の弟であ CSS3
るE要素
80. 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>
...
85. DOMの構造や状態で指定するセレクタ
擬似クラス
E:root ルート要素 3
E:checked チェックされて 2
いるE要素
E:nth-child(n) チェックされて 3
いるE要素
86. 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)" />
93. CSS 8puzzle の戦略
<input type="radio" /> を使用
1 ピースにつき 9 つの input を用意
トグルを簡単に表現できるため
移動可能なピースに対して、クリック可能な label
を z-index で一番手前に表示する
初期状態もあらかじめ作成
終了状態になったら用意しておいた Complete!
画面を表示
98. CSS Noughts and Crosses の戦略
<input type="checked" /> を使用
1 マスにつき 5 個の input を用意
最大で 5 手までなので
コンピューターの手順はあらかじめ全て用意
100. CSS のまとめ
CSS3
✓ 少ない記述で要件を満たしたデザインを実現できる
CSS Programming
✓ 意外と役立つこともあります。
✓ Enjoy!
102. 書き捨てのPHP
CSS 8puzzle
https://
gist.github.com/376d7d0a2f3d7533a2e0
CSS Noughts and Crosses
https://
gist.github.com/2d575af617934eb752ed
