CSS Design and Programming

1. CSS Design and Programming 〜CSS で何ができるの？〜天野卓 @ ToI企画 2011.7.23

2. 自己紹介佐久市でWebアプリケーションを開発していますフリーソフトウェアを配布しています http://tec.toi-planning.net GitHub http://github.com/usualoma jsdo.it http://jsdo.it/usualoma

3. 概要 HTML5 とは ✓ HTML5 に到るまでの歴史 ✓ HTML5 の範囲 ✓ HTML5 はもう使えるの？ CSS Design and Programming ✓ CSS とは ✓ CSS3 で出来るようになること ✓ CSS Programming

4. HTML5 とは http://dev.w3.org/html5/spec/

5. HTML5 とは

6. http://platform.html5.org/

8. HTML5 に到るまでの歴史

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/ ✓ ...

17. HTML5 の仕様の策定状況 WHATWG ✓ 生きている仕様 ✓ 現存のドキュメントを最新のHTML規格とする W3C ✓ 2011年7月の時点では最終草案の段階 ✓ 2014年の勧告を目指している

18. HTML5 の範囲は?

21. Web Applications 1.0 は?

23. HTML5 とは仕様書の範囲として ✓ WHATWG の HTML5 の仕様書時には ✓ WHATWG の Web Applications 1.0 の仕様書バズワードとして ✓ 次世代のウェブ技術の総称

24. HTML5 はもう使えるの？マークアップ言語として主要なモダンブラウザは対応済み未対応のブラウザでも表示は可能 HTML では未知のタグは単に内容が表示されるため未対応ブラウザのためのツールもある HTML4 から HTML5 への移行は簡単互換性が高いので、多くの場合はDOCTYPEを変更すれば HTML5 のドキュメントになる <!DOCTYPE html>

25. HTML5 はもう使えるの？関連API 使えるものと使えないものがる Firefox / Google Chrome / Opera HTML5 の範囲はかなり使えるが、IE は 9 でも実装されていない API は多い使いたい API を実装されているブラウザでのみ使う Progressive Enhancement 事例 - Web Storage Twitter Amazon

26. HTML5 のまとめ HTML5とは ✓ 「これから決まる仕様」ではなく「すでに動いている仕様」どう使うか ✓ 価値を生むことの出来る機能を選んで使う

27. CSS Design and Programming

28. CSS とはカスケーディングスタイルシート（CSS）は、ウェブドキュメントにスタイル（フォント, カラー, 余白など）を追加するためのシンプルな仕組みです。 [cited from `http://www.a2ztutorial.com/Style/CSS/']

29. つまり...

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

31. これでいいの?

32. CSS の役割デザインビジュアル的な綺麗さ、全体のイメージ配色の調整や画像の配置ユーザビリティテキストを読みやすくするタイポグラフィ情報を探しやすいレイアウト操作しやすい、迷わないフォームわくわくするユーザーインターフェイス

33. 例えば

34. クリックしやすいダウンロードリンクボタンの CSS を切った場合

35. クリックしやすいダウンロードリンク http://mozilla.jp/firefox/

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

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

38. HTML文書とCSSの役割分担 HTML文書コンテンツ CSS デザイン

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

40. お絵かきは? サイトのコンテンツだとするとおそらく NG デザインの要素であればおそらく OK

41. CSS の現状 W3C勧告の出ている最新バージョンは 2.1 CSS3 は策定中モダンブラウザでは対応は進んでいるベンダープレフィックスの必要なものも多い -moz-linear-gradient -webkit-linear-gradient -o-linear-gradient -ms-

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 セレクタが追加され細かく要素を指定できる複数環境への対応メディアクエリー

44. サブミットボタン

45. サブミットボタン - HTML <input type="submit" value="" class="submit-button" />

46. サブミットボタン - HTML <input type="submit" value="送信" class="submit-button" />

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; }

49. 角丸

50. 角丸 - HTML <div class="container01"> <div class="container02"> <div class="content"> Firefox </div> </div> </div>

51. 角丸 - HTML <div class="content"> Firefox </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; }

55. CSS3 を使うと嬉しいこと表現力が強力になる少ない記述で要件を満たしたデザインを実現できる複数のデバイスに対応できる HTML でコンテンツの表現に集中できる

56. ところで

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

58. そんなわけで

59. CSS Programming

60. CSS 8puzzle http://jsdo.it/usualoma/1Tgw

61. CSS Noughts and Crosses http://jsdo.it/usualoma/qzfr

62. CSS でプログラミングをするということ CSS はプログラミングのための仕組みではない利用者にとってのメリットはないあえていえば JavaScript を切っていても動作する工夫しないと動かせないので作成者の勉強になる CSSでできること CSSではできないこと

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

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)

66. 有限オートマトン

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; }

74. CSS プログラミングで突き当たる壁いとこ要素を指定したいんだけど... セレクタでフィルタしたいんだけど... 条件を満たすまでループしたいんだけど...

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

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> ...

77. このようにできると嬉しいのですが... #1-1.checked :parent #panel_2 #2-2.checked { ... }

78. 要素の関連で指定するセレクタコンビネータ EF E要素の子であ CSS2 るF要素 E>F E要素のすぐ後 CSS2 ろの子であるF 要素 E+F E要素のすぐ後 CSS2 ろの弟であるF 要素 E~F E要素の弟であ CSS3 るE要素

79. いとこ要素を指定したいんだけど... できません!

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> ...

81. CSS3 を使うとこのように指定できます #1-1.checked ~ #2-2.checked { ... }

82. CSS2 でもこのように指定することは可能です #1-1.checked + #1-2 + #2-1 + #2-2.checked { ... }

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

84. セレクタでフィルタしたいんだけど... input:checked:nth-child(1) div { display: block; } input:checked:nth-child(2) div { /* * 2つチェックされているときに適用される * :nth-child(1) のセレクタは上書きされる */ display: block; }

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)" />

87. セレクタでフィルタしたいんだけど... できません!

88. セレクタでフィルタしたいんだけど... input:checked ~ div { display: block; } input:checked ~ input:checked div { /* * 2つチェックされているときに適用される */ display: block; }

89. 条件を満たすまでループしたいんだけど... CSS から DOM を変更できればループできそうだけど...

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

91. DOMを変更することはできません状態の変更はユーザーの入力に依存します

92. CSS 8puzzle http://jsdo.it/usualoma/1Tgw

93. CSS 8puzzle の戦略 <input type="radio" /> を使用 1 ピースにつき 9 つの input を用意トグルを簡単に表現できるため移動可能なピースに対して、クリック可能な label を z-index で一番手前に表示する初期状態もあらかじめ作成終了状態になったら用意しておいた Complete! 画面を表示

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

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

96. CSS 8puzzle のソースコード JavaScript 0行 HTML 167 行 CSS 2013 行

97. CSS Noughts and Crosses http://jsdo.it/usualoma/qzfr

98. CSS Noughts and Crosses の戦略 <input type="checked" /> を使用 1 マスにつき 5 個の input を用意最大で 5 手までなのでコンピューターの手順はあらかじめ全て用意

99. CSS Noughts and Crosses のソースコード JavaScript 0行 HTML 150 行 CSS 12373 行

100. CSS のまとめ CSS3 ✓ 少ない記述で要件を満たしたデザインを実現できる CSS Programming ✓ 意外と役立つこともあります。 ✓ Enjoy!

101. 参考文献 2004年にW3Cのワークショップで出された提案 http://www.w3.org/2004/04/webapps-cdf-ws/ papers/opera.html 入門 HTML5 Mark Pilgrim (著), 矢倉眞隆 (監訳), 水原文 (翻訳) オライリージャパン

102. 書き捨てのPHP CSS 8puzzle https:// gist.github.com/376d7d0a2f3d7533a2e0 CSS Noughts and Crosses https:// gist.github.com/2d575af617934eb752ed

103. ご清聴ありがとうございました。 Powered by Rabbit 0.9.3

CSS Design and Programming

You are reading a preview.

Check these out next

CSS Design and Programming

More Related Content

Slideshows for you (20)

Viewers also liked (15)

Similar to CSS Design and Programming (20)