Download as PDF, PPTX
![CSS とは カスケーディングスタイルシート （CSS）は、ウェブドキュメントにスタ イル（フォント, カラー, 余白など）を 追加するためのシンプルな仕組み です。[cited from `http://www.a2ztutorial.com/Style/CSS/']](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fcssdesignandprogramming-110723021151-phpapp01%2f75%2fCSS-Design-and-Programming-28-2048.jpg&f=jpg&w=240)
![ソースのイメージ - セレクタ 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;}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fcssdesignandprogramming-110723021151-phpapp01%2f75%2fCSS-Design-and-Programming-71-2048.jpg&f=jpg&w=240)
![ソースのイメージ - セレクタ 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;}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fcssdesignandprogramming-110723021151-phpapp01%2f75%2fCSS-Design-and-Programming-72-2048.jpg&f=jpg&w=240)
Recommended
More Related Content
What's hot
Viewers also liked
Similar to CSS Design and Programming
CSS Design and Programming
- 1.CSS Design andProgramming〜CSS で何ができるの？〜 天野 卓 @ ToI企画 2011.7.23
- 2.自己紹介佐久市でWebアプリケーションを開発していますフリーソフトウェアを配布しています http://tec.toi-planning.netGitHub http://github.com/usualomajsdo.it http://jsdo.it/usualoma
- 3.概要HTML5 とは ✓HTML5 に到るまでの歴史 ✓ HTML5 の範囲 ✓ HTML5 はもう使えるの？CSS Design and Programming ✓ CSS とは ✓ CSS3 で出来るようになること ✓ CSS Programming
- 4.
- 5.
- 6.
- 7.
- 8.
- 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.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 の発足 -12004年、W3Cのワークショップで Mozilla とOpera が Web の将来に関する提案を行う 後方互換性と明確な移行手段 適切に定義されたエラー処理 ユーザーがオーサリングエラーに直面しないこと 実用性(実用的なユースケースが盛り込まれているこ と などXHTMLに対する新しいAPIではなく、HTMLやCSSまたDOMへの拡張を開発したい 非公式な投票が行われるが否決
- 14.WHATWG の発足 -2同2004年、Apple、Mozilla、Opera によりHTMLをベースとした規格と関連技術の策定を目的とした団体、WHATWGが設立される。 Web Hypertext Application Technology Working GroupWHATWG の策定している仕様 HTML5 Web Applications 1.0
- 15.HTML5 / WebApplications 1.0WHATWG の策定した仕様はブラウザベンダーの支持を集めた 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.
- 19.
- 20.
- 21.WebApplications 1.0 は?
- 22.
- 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 andProgramming
- 28.CSS とはカスケーディングスタイルシート （CSS）は、ウェブドキュメントにスタ イル（フォント, カラー, 余白など）を 追加するためのシンプルな仕組み です。[cited from `http://www.a2ztutorial.com/Style/CSS/']
- 29.
- 30.
- 31.
- 32.CSS の役割デザイン ビジュアル的な綺麗さ、全体のイメージ 配色の調整や画像の配置 ユーザビリティ テキストを読みやすくするタイポグラフィ 情報を探しやすいレイアウト 操作しやすい、迷わないフォーム わくわくするユーザーインターフェイス
- 33.
- 34.クリックしやすいダウンロードリンク ボタンのCSS を切った場合
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.CSS の現状W3C勧告の出ている最新バージョンは 2.1CSS3は策定中 モダンブラウザでは対応は進んでいる ベンダープレフィックスの必要なものも多い -moz-linear-gradient -webkit-linear-gradient -o-linear-gradient -ms-
- 42.CSS3 の仕様書CSS currentwork & 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<inputtype="submit" value="" class="submit-button" />
- 46.サブミットボタン - HTML<inputtype="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<divclass="container01"> <div class="container02"> <div class="content"> Firefox </div> </div></div>
- 51.角丸 - HTML<divclass="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.
- 60.
- 61.CSS Noughts andCrosses http://jsdo.it/usualoma/qzfr
- 62.CSS でプログラミングをするということCSS はプログラミングのための仕組みではない利用者にとってのメリットはないあえていえば JavaScript を切っていても動作する工夫しないと動かせないので作成者の勉強になる CSSでできること CSSではできないこと
- 63.
- 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.
- 67.
- 68.
- 69.
- 70.ソースのイメージ - DOM<divid="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-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.ソースのイメージ - セレクタ 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.ソースのイメージ - 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.
- 75.
- 76.いとこ要素を指定したいんだけど...<div id="board"> <divid="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 ルート要素 3E: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.
- 92.
- 93.CSS 8puzzle の戦略<inputtype="radio" /> を使用 1 ピースにつき 9 つの input を用意 トグルを簡単に表現できるため移動可能なピースに対して、クリック可能な labelを z-index で一番手前に表示する初期状態もあらかじめ作成終了状態になったら用意しておいた Complete!画面を表示
- 94.
- 95.
- 96.CSS 8puzzle のソースコードJavaScript 0行HTML 167 行CSS 2013 行
- 97.CSS Noughts andCrosses http://jsdo.it/usualoma/qzfr
- 98.CSS Noughts andCrosses の戦略<input type="checked" /> を使用 1 マスにつき 5 個の input を用意 最大で 5 手までなのでコンピューターの手順はあらかじめ全て用意
- 99.CSS Noughts andCrosses のソースコード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.書き捨てのPHPCSS 8puzzlehttps:// gist.github.com/376d7d0a2f3d7533a2e0CSS Noughts and Crosses https:// gist.github.com/2d575af617934eb752ed
- 103.ご清聴ありがとうご ざいました。 Powered by Rabbit 0.9.3