CSS Design    andProgramming〜CSS で何ができるの?〜  天野 卓 @ ToI企画    2011.7.23
自己紹介佐久市でWebアプリケーションを開発していますフリーソフトウェアを配布しています  http://tec.toi-planning.netGitHub  http://github.com/usualomajsdo.it  http:/...
概要HTML5 とは ✓ HTML5 に到るまでの歴史 ✓ HTML5 の範囲 ✓ HTML5 はもう使えるの?CSS Design and Programming ✓ CSS とは ✓ CSS3 で出来るようになること ✓ CSS Progr...
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.01SGMLベースのHTMLからXMLベースのXHTMLへの移行を計画  パースが簡単になる (プログラム側の都合)...
HTML4 / XHTML の2004年頃の状況 - 1  マークアップとしては、XHTMLは受け入れられ始  めていた   XHTML1.0 と宣言されているページは少なくない   正しくマークアップされている
HTML4 / XHTML の2004年頃の状況 - 2  しかし   MIMEタイプについては application/xhtml+xml は使   われておらず、ほとんどのページで text/html が使わ   れていた   XHTML1...
HTML4 / XHTML の2004年頃の状況 - 3  大多数のページでは依然として HTML4.01が使  われていた  各ブラウザに独自拡張が増えてきた   マルチメディア    embed / object   JavaScript ...
WHATWG の発足 - 12004年、W3Cのワークショップで Mozilla とOpera が Web の将来に関する提案を行う 後方互換性と明確な移行手段 適切に定義されたエラー処理 ユーザーがオーサリングエラーに直面しないこと 実用性(...
WHATWG の発足 - 2同2004年、Apple、Mozilla、Opera によりHTMLをベースとした規格と関連技術の策定を目的とした団体、WHATWGが設立される。 Web Hypertext Application Technolo...
HTML5 / Web Applications 1.0WHATWG の策定した仕様はブラウザベンダーの支持を集めた 2006年にはW3Cでもワーキンググループが作られ、 現在は共同で策定作業を進めている一方 XHTML2.0 は支持を得られず...
HTML5 の仕様書WHATWG ✓ http://www.whatwg.org/specs/web-apps/current-   work/multipage/W3C ✓ http://dev.w3.org/html5/spec/ ✓ ht...
HTML5 の仕様の策定状況WHATWG ✓ 生きている仕様 ✓ 現存のドキュメントを最新のHTML規格とするW3C ✓ 2011年7月の時点では最終草案の段階 ✓ 2014年の勧告を目指している
HTML5の範囲は?
http://platform.html5.org/
http://platform.html5.org/
WebApplications    1.0    は?
http://platform.html5.org/
HTML5 とは仕様書の範囲として ✓ WHATWG の HTML5 の仕様書時には ✓ WHATWG の Web Applications 1.0 の仕様書バズワードとして ✓ 次世代のウェブ技術の総称
HTML5 はもう使えるの?マークアップ言語として 主要なモダンブラウザは対応済み 未対応のブラウザでも表示は可能  HTML では未知のタグは単に内容が表示されるため  未対応ブラウザのためのツールもある HTML4 から HTML5 への移...
HTML5 はもう使えるの?関連API 使えるものと使えないものがる  Firefox / Google Chrome / Opera HTML5 の範囲はかな  り使えるが、IE は 9 でも実装されていない API は多い 使いたい API...
HTML5 のまとめHTML5とは ✓ 「これから決まる仕様」ではなく「すでに動いている仕様」どう使うか ✓ 価値を生むことの出来る機能を選んで使う
CSS Design    andProgramming
CSS とは  カスケーディングスタイルシート  (CSS)は、ウェブドキュメントにスタ  イル(フォント, カラー, 余白など)を  追加するためのシンプルな仕組み  です。[cited from `http://www.a2ztutoria...
つまり...
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.1CSS3 は策定中 モダンブラウザでは対応は進んでいる ベンダープレフィックスの必要なものも多い  -moz-linear-gradient  -webkit-linear-gradie...
CSS3 の仕様書CSS current work & how to participate  http://www.w3.org/Style/CSS/current-work   Selectors   http://www.w3.org/T...
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)...
サブミットボタン - CSS    border: 0;    border-radius: 5px;    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),      inset 0 ...
角丸
角丸 - 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(...
角丸 - CSS - 例3/* border-image */div.content {   border-image: url("border.png")     60 60 60 60 / 60px 30px 10px 30px repea...
CSS3 を使うと嬉しいこと表現力が強力になる 少ない記述で要件を満たしたデザインを実現できる 複数のデバイスに対応できるHTML でコンテンツの表現に集中できる
ところで
プログラマならプロフィールに書きたい
そんなわけで
CSSProgramming
CSS 8puzzlehttp://jsdo.it/usualoma/1Tgw
CSS Noughts and Crosses http://jsdo.it/usualoma/qzfr
CSS でプログラミングをするということCSS はプログラミングのための仕組みではない利用者にとってのメリットはない あえていえば JavaScript を切っていても動作する工夫しないと動かせないので作成者の勉強になる CSSでできること C...
CSS プログラミングの基本的な要素DOMCSS
CSS プログラミングの基本的な要素 - DOM  DOM   input で状態を保存    <input type="checkbox" />    <input type="radio" />   scrollbar を利用する手法もある
CSS プログラミングの基本的な要素 - CSS CSS   セレクタで見た目を定義    :checked > .foo    :checked ~ :checked ~ .foo (CSS3)   クリック対象の input を調整する  ...
有限オートマトン
有限オートマトン
有限オートマトン
有限オートマトン
ソースのイメージ - DOM<div id="panel"> <input type="radio"   id="r1-1_1-1"   name="1-1"   /> <input type="radio"   id="r1-1_1-2"  ...
ソースのイメージ - セレクタ           z-indexinput {  z-index: 0;}#r1-1_3-2:not(:checked)   ~   #r1-2_3-2:not(:checked) ~#r1-3_3-2:not...
ソースのイメージ - セレクタ         pointer-eventsinput {  pointer-events: none;}#r1-1_3-2:not(:checked)   ~   #r1-2_3-2:not(:checked)...
ソースのイメージ - transitiondiv#complete {   left: 420px;   -webkit-transition: left 200ms linear 800ms;   -moz-transition: left ...
CSS プログラミングで突き当たる壁いとこ要素を指定したいんだけど...セレクタでフィルタしたいんだけど...条件を満たすまでループしたいんだけど...
いとこ要素を指定したいんだけど...
いとこ要素を指定したいんだけど...<div id="board"> <div id="panel_1">  <input type="radio"   id="1-1" />  <input type="radio"   id="1-2" /...
このようにできると嬉しいのですが...#1-1.checked :parent #panel_2 #2-2.checked {   ...}
要素の関連で指定するセレクタ           コンビネータEF        E要素の子であ   CSS2          るF要素E>F       E要素のすぐ後   CSS2          ろの子であるF          要素...
いとこ要素を指定したいんだけど...  できません!
input は全て兄弟要素として並べてください    <input type="radio" id="1-1"   />    <input type="radio" id="1-2"   />    <input type="radio" i...
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つチェックされ...
DOMの構造や状態で指定するセレクタ                  擬似クラスE:root           ルート要素     3E:checked        チェックされて   2                 いるE要素E:n...
DOM に対して擬似的にクラスを設定する<!-- イメージです --><html class=":root"> <input type="radio"   checked class=":checked :nth-child(1)" /> <i...
セレクタでフィルタしたいんだけど...  できません!
セレクタでフィルタしたいんだけど...input:checked ~ div {  display: block;}input:checked ~ input:checked div {    /*     * 2つチェックされているときに適用...
条件を満たすまでループしたいんだけど... CSS から DOM を変更できればループできそうだ けど...
条件を満たすまでループしたいんだけど...    できません!
DOMを変更することはできません状態の変更はユーザーの入力に依存します
CSS 8puzzlehttp://jsdo.it/usualoma/1Tgw
CSS 8puzzle の戦略<input type="radio" /> を使用  1 ピースにつき 9 つの input を用意  トグルを簡単に表現できるため移動可能なピースに対して、クリック可能な labelを z-index で一番手...
クリック可能な 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 (著), 矢倉 眞隆 (...
書き捨てのPHPCSS 8puzzle  https://  gist.github.com/376d7d0a2f3d7533a2e0CSS Noughts and Crosses  https://  gist.github.com/2d57...
ご清聴ありがとうご  ざいました。      Powered by Rabbit 0.9.3
Upcoming SlideShare
Loading in …5
×

CSS Design and Programming

5,578 views

Published on

  • Be the first to comment

CSS Design and Programming

  1. 1. CSS Design andProgramming〜CSS で何ができるの?〜 天野 卓 @ ToI企画 2011.7.23
  2. 2. 自己紹介佐久市でWebアプリケーションを開発していますフリーソフトウェアを配布しています http://tec.toi-planning.netGitHub http://github.com/usualomajsdo.it http://jsdo.it/usualoma
  3. 3. 概要HTML5 とは ✓ HTML5 に到るまでの歴史 ✓ HTML5 の範囲 ✓ HTML5 はもう使えるの?CSS Design and Programming ✓ CSS とは ✓ CSS3 で出来るようになること ✓ CSS Programming
  4. 4. HTML5 とはhttp://dev.w3.org/html5/spec/
  5. 5. HTML5 とは
  6. 6. http://platform.html5.org/
  7. 7. http://platform.html5.org/
  8. 8. HTML5に到るまでの 歴史
  9. 9. 前身である HTML4 / XHTML についてHTML4のW3C勧告 1997年にHTML4.0 1999年にHTML4.01SGMLベースのHTMLからXMLベースのXHTMLへの移行を計画 パースが簡単になる (プログラム側の都合) MathMLやSVGなどのXML関連技術と連携しやすいXHTMLのW3C勧告 1999年にXHTML1.0 2001年にXHTML1.1
  10. 10. HTML4 / XHTML の2004年頃の状況 - 1 マークアップとしては、XHTMLは受け入れられ始 めていた XHTML1.0 と宣言されているページは少なくない 正しくマークアップされている
  11. 11. HTML4 / XHTML の2004年頃の状況 - 2 しかし MIMEタイプについては application/xhtml+xml は使 われておらず、ほとんどのページで text/html が使わ れていた XHTML1.1 はほとんど使われていない なぜ? XMLは整形式(正しい書式)を要求するがWeb上のほ とんどのページはXMLとしての誤りを含んでいる XHTML1.1 では text/html を使うことはできず、 application/xhtml+xml を使う必要がある
  12. 12. HTML4 / XHTML の2004年頃の状況 - 3 大多数のページでは依然として HTML4.01が使 われていた 各ブラウザに独自拡張が増えてきた マルチメディア embed / object JavaScript DOM ブラウザベンダーは新しい標準化を求めていた
  13. 13. WHATWG の発足 - 12004年、W3Cのワークショップで Mozilla とOpera が Web の将来に関する提案を行う 後方互換性と明確な移行手段 適切に定義されたエラー処理 ユーザーがオーサリングエラーに直面しないこと 実用性(実用的なユースケースが盛り込まれているこ と などXHTMLに対する新しいAPIではなく、HTMLやCSSまたDOMへの拡張を開発したい 非公式な投票が行われるが否決
  14. 14. WHATWG の発足 - 2同2004年、Apple、Mozilla、Opera によりHTMLをベースとした規格と関連技術の策定を目的とした団体、WHATWGが設立される。 Web Hypertext Application Technology Working GroupWHATWG の策定している仕様 HTML5 Web Applications 1.0
  15. 15. HTML5 / Web Applications 1.0WHATWG の策定した仕様はブラウザベンダーの支持を集めた 2006年にはW3Cでもワーキンググループが作られ、 現在は共同で策定作業を進めている一方 XHTML2.0 は支持を得られず 2009年にワーキンググループは終了した
  16. 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. 17. HTML5 の仕様の策定状況WHATWG ✓ 生きている仕様 ✓ 現存のドキュメントを最新のHTML規格とするW3C ✓ 2011年7月の時点では最終草案の段階 ✓ 2014年の勧告を目指している
  18. 18. HTML5の範囲は?
  19. 19. http://platform.html5.org/
  20. 20. http://platform.html5.org/
  21. 21. WebApplications 1.0 は?
  22. 22. http://platform.html5.org/
  23. 23. HTML5 とは仕様書の範囲として ✓ WHATWG の HTML5 の仕様書時には ✓ WHATWG の Web Applications 1.0 の仕様書バズワードとして ✓ 次世代のウェブ技術の総称
  24. 24. HTML5 はもう使えるの?マークアップ言語として 主要なモダンブラウザは対応済み 未対応のブラウザでも表示は可能 HTML では未知のタグは単に内容が表示されるため 未対応ブラウザのためのツールもある HTML4 から HTML5 への移行は簡単 互換性が高いので、多くの場合はDOCTYPEを変更すれば HTML5 のドキュメントになる <!DOCTYPE html>
  25. 25. HTML5 はもう使えるの?関連API 使えるものと使えないものがる Firefox / Google Chrome / Opera HTML5 の範囲はかな り使えるが、IE は 9 でも実装されていない API は多い 使いたい API を実装されているブラウザでのみ使う Progressive Enhancement 事例 - Web Storage Twitter Amazon
  26. 26. HTML5 のまとめHTML5とは ✓ 「これから決まる仕様」ではなく「すでに動いている仕様」どう使うか ✓ 価値を生むことの出来る機能を選んで使う
  27. 27. CSS Design andProgramming
  28. 28. CSS とは カスケーディングスタイルシート (CSS)は、ウェブドキュメントにスタ イル(フォント, カラー, 余白など)を 追加するためのシンプルな仕組み です。[cited from `http://www.a2ztutorial.com/Style/CSS/]
  29. 29. つまり...
  30. 30. http://shopdd.blog51.fc2.com/blog-entry-932.html
  31. 31. これでいいの?
  32. 32. CSS の役割デザイン ビジュアル的な綺麗さ、全体のイメージ 配色の調整や画像の配置 ユーザビリティ テキストを読みやすくするタイポグラフィ 情報を探しやすいレイアウト 操作しやすい、迷わないフォーム わくわくするユーザーインターフェイス
  33. 33. 例えば
  34. 34. クリックしやすいダウンロードリンク ボタンの CSS を切った場合
  35. 35. クリックしやすいダウンロードリンク http://mozilla.jp/firefox/
  36. 36. 読みやすい/選択しやすい表
  37. 37. 読みやすい/選択しやすい表
  38. 38. HTML文書とCSSの役割分担HTML文書 コンテンツCSS デザイン
  39. 39. http://shopdd.blog51.fc2.com/blog-entry-932.html
  40. 40. お絵かきは?サイトのコンテンツだとするとおそらく NGデザインの要素であればおそらく OK
  41. 41. CSS の現状W3C勧告の出ている最新バージョンは 2.1CSS3 は策定中 モダンブラウザでは対応は進んでいる ベンダープレフィックスの必要なものも多い -moz-linear-gradient -webkit-linear-gradient -o-linear-gradient -ms-
  42. 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. 43. CSS2 から CSS3 で変わる所画像や配色の指定が強力になる Web フォント 角丸・グラデーション・枠線に画像が使えるレイアウトを柔軟に、シンプルに指定できる 段組 display: flexboxセレクタが追加され細かく要素を指定できる複数環境への対応 メディアクエリー
  44. 44. サブミットボタン
  45. 45. サブミットボタン - HTML<input type="submit" value="" class="submit-button" />
  46. 46. サブミットボタン - HTML<input type="submit" value="送信" class="submit-button" />
  47. 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. 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. 49. 角丸
  50. 50. 角丸 - HTML<div class="container01"> <div class="container02"> <div class="content"> Firefox </div> </div></div>
  51. 51. 角丸 - HTML<div class="content"> Firefox</div>
  52. 52. 角丸 - CSS - 例1/* border-radius */div.content { border: 1px solid #D7D7D7; border-radius: 10px;}
  53. 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. 54. 角丸 - CSS - 例3/* border-image */div.content { border-image: url("border.png") 60 60 60 60 / 60px 30px 10px 30px repeat;}
  55. 55. CSS3 を使うと嬉しいこと表現力が強力になる 少ない記述で要件を満たしたデザインを実現できる 複数のデバイスに対応できるHTML でコンテンツの表現に集中できる
  56. 56. ところで
  57. 57. プログラマならプロフィールに書きたい
  58. 58. そんなわけで
  59. 59. CSSProgramming
  60. 60. CSS 8puzzlehttp://jsdo.it/usualoma/1Tgw
  61. 61. CSS Noughts and Crosses http://jsdo.it/usualoma/qzfr
  62. 62. CSS でプログラミングをするということCSS はプログラミングのための仕組みではない利用者にとってのメリットはない あえていえば JavaScript を切っていても動作する工夫しないと動かせないので作成者の勉強になる CSSでできること CSSではできないこと
  63. 63. CSS プログラミングの基本的な要素DOMCSS
  64. 64. CSS プログラミングの基本的な要素 - DOM DOM input で状態を保存 <input type="checkbox" /> <input type="radio" /> scrollbar を利用する手法もある
  65. 65. CSS プログラミングの基本的な要素 - CSS CSS セレクタで見た目を定義 :checked > .foo :checked ~ :checked ~ .foo (CSS3) クリック対象の input を調整する z-index pointer-events (CSS3) 状態の変更時にアニメーションさせる transition (CSS3)
  66. 66. 有限オートマトン
  67. 67. 有限オートマトン
  68. 68. 有限オートマトン
  69. 69. 有限オートマトン
  70. 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. 71. ソースのイメージ - セレクタ z-indexinput { 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. 72. ソースのイメージ - セレクタ pointer-eventsinput { 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. 73. ソースのイメージ - transitiondiv#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. 74. CSS プログラミングで突き当たる壁いとこ要素を指定したいんだけど...セレクタでフィルタしたいんだけど...条件を満たすまでループしたいんだけど...
  75. 75. いとこ要素を指定したいんだけど...
  76. 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. 77. このようにできると嬉しいのですが...#1-1.checked :parent #panel_2 #2-2.checked { ...}
  78. 78. 要素の関連で指定するセレクタ コンビネータEF E要素の子であ CSS2 るF要素E>F E要素のすぐ後 CSS2 ろの子であるF 要素E+F E要素のすぐ後 CSS2 ろの弟であるF 要素E~F E要素の弟であ CSS3 るE要素
  79. 79. いとこ要素を指定したいんだけど... できません!
  80. 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. 81. CSS3 を使うとこのように指定できます #1-1.checked ~ #2-2.checked { ... }
  82. 82. CSS2 でもこのように指定することは可能です #1-1.checked + #1-2 + #2-1 + #2-2.checked { ... }
  83. 83. セレクタでフィルタしたいんだけど...
  84. 84. セレクタでフィルタしたいんだけど...input:checked:nth-child(1) div { display: block;}input:checked:nth-child(2) div { /* * 2つチェックされているときに適用される * :nth-child(1) のセレクタは上書きされる */ display: block;}
  85. 85. DOMの構造や状態で指定するセレクタ 擬似クラスE:root ルート要素 3E:checked チェックされて 2 いるE要素E:nth-child(n) チェックされて 3 いるE要素
  86. 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. 87. セレクタでフィルタしたいんだけど... できません!
  88. 88. セレクタでフィルタしたいんだけど...input:checked ~ div { display: block;}input:checked ~ input:checked div { /* * 2つチェックされているときに適用される */ display: block;}
  89. 89. 条件を満たすまでループしたいんだけど... CSS から DOM を変更できればループできそうだ けど...
  90. 90. 条件を満たすまでループしたいんだけど... できません!
  91. 91. DOMを変更することはできません状態の変更はユーザーの入力に依存します
  92. 92. CSS 8puzzlehttp://jsdo.it/usualoma/1Tgw
  93. 93. CSS 8puzzle の戦略<input type="radio" /> を使用 1 ピースにつき 9 つの input を用意 トグルを簡単に表現できるため移動可能なピースに対して、クリック可能な labelを z-index で一番手前に表示する初期状態もあらかじめ作成終了状態になったら用意しておいた Complete!画面を表示
  94. 94. クリック可能な label を手前に表示
  95. 95. クリック可能な label を手前に表示
  96. 96. CSS 8puzzle のソースコードJavaScript 0行HTML 167 行CSS 2013 行
  97. 97. CSS Noughts and Crosses http://jsdo.it/usualoma/qzfr
  98. 98. CSS Noughts and Crosses の戦略<input type="checked" /> を使用 1 マスにつき 5 個の input を用意 最大で 5 手までなのでコンピューターの手順はあらかじめ全て用意
  99. 99. CSS Noughts and Crosses のソースコードJavaScript 0行HTML 150 行CSS 12373 行
  100. 100. CSS のまとめCSS3 ✓ 少ない記述で要件を満たしたデザインを実現できるCSS Programming ✓ 意外と役立つこともあります。 ✓ Enjoy!
  101. 101. 参考文献2004年にW3Cのワークショップで出された提案 http://www.w3.org/2004/04/webapps-cdf-ws/ papers/opera.html入門 HTML5 Mark Pilgrim (著), 矢倉 眞隆 (監訳), 水原 文 (翻訳) オライリージャパン
  102. 102. 書き捨てのPHPCSS 8puzzle https:// gist.github.com/376d7d0a2f3d7533a2e0CSS Noughts and Crosses https:// gist.github.com/2d575af617934eb752ed
  103. 103. ご清聴ありがとうご ざいました。 Powered by Rabbit 0.9.3

×