私的CSS変遷史
- 2. 紀元前 -2000 CSS？なにそれ美味しいの？ 古代 2000-2004 CSSってフォントや余白を指定するアレ でしょ？ 中世 2004-2007 Firefox登場。CSSレイアウトの普及 近世 2007-2009 iPhone登場。HTML5時代へ 近代ー現代 2008-2011 CSS Framework登場。制作手法の進化 現代 2010- CSSプリプロセッサの隆盛 14年2月16日日曜日
- 5. 古代 2000-2004 CSSってフォントや 余白を指定するアレでしょ？ <body bgcolor="#ffffff"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="240"> <div style="padding:16px 0px 0px;" align="left"> <div style="padding:0px 0px 12px;"><a href="#"><img src="AbikoCity.jpg" alt="" width="200" height="34" border="0"></a></div> <p><font color="#1c4dff">●</font><a href="#">展示ニュース</a><br> <font size="-2" color="#1c4dff">新たな展示を紹介します</font><br> <font color="#1c4dff">●</font>「<a href="#">イベント</a>」<br> </div> <a href="#">※<font size="-1">インフルエンザ情報</font></a><br> </td> </tr> ... </table> ... </body> 14年2月16日日曜日
- 7. 中世 2004-2007 Firefox登場。 CSSレイアウトの普及 <body> <div id="wrapper"> 「Web標準」という考え方の登場 <a name="page_top"><img src="/images/spacer.gif" width="1" height="1" alt="ページの先頭です" class="voicenavi"></a> • <a href="#page_body"><img src="/images/spacer.gif" width="1" height="1" alt="本文へスキップ" class="voicenavi"></a> • ようやくCSSでレイアウトができるように <div class="header"> <ul class="clearfix"> <li><a href="#">サイトマップ</a></li> • ブラウザの挙動の違いを吸収するバッドノウハウ「CSSハック」 <li><a href="#">English</a></li> </ul> • デザイナーとコーダーの分業化 </div> <div id="main"> メインコンテンツ... • アクセシビリティという言葉がメジャーになった </div> <div id="sidebar"> • その一方で、Flashリッチコンテンツが隆盛を極めた サイドバーコンテンツ... </div> ... • 主なブラウザ：IE6、Firefox、Netscape7、MacIE、Safari、Opera... </div> </body> 14年2月16日日曜日
- 8. 近世 2007-2009 iPhone登場。HTML5時代へ • • • • • • iPhone＆Android登場。スマホが一般化 CSS3とベンダープリフィックス 低速回線環境を考慮した制作手法へ CSS Spriteなどのパフォーマンスチューニングが一般化 Flashコンテンツは衰退へ 一方でjQueryなどの優れたフレームワークが一般化し、JavaScriptが 必須スキルに • 主なブラウザ：IE6-8、Firefox、Google Chrome(New!)、iOS Safari（お荷物はIE6） 14年2月16日日曜日
- 9. 近世 2007-2009 iPhone登場。HTML5時代へ .button { display: block; min-height: 20px; padding: 8px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #333; color: #fff; } 14年2月16日日曜日
- 10. 近代ー現代 2008-2011 CSS Framework登場。制作手法の進化 • CSSの機能的なしょぼさをどうにかしたい • OOCSS、Bootstrap etc… • 制作の効率化に注目が集まる • zen-codingとか流行る • エディタの選択肢が増える：Dreamweaver、 Sublime Text、Coda、Vim… 14年2月16日日曜日
- 12. 近代ー現代 2008-2011 CSS Framework登場。制作手法の進化 <body> <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> </button> <a href="../" class="navbar-brand">Bootstrap</a> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li><a href="../getting-started">Getting started</a></li> <li><a href="../css">CSS</a></li> ... </ul> ... </nav> </div> </header> ... </body> 14年2月16日日曜日
- 13. 現代 2010- CSSプリプロセッサの隆盛 • CSSの機能的なしょぼさをどうにかしたい • その欠点を補うためにCSSメタ言語（CSSプリプロ セッサ）が登場。一般化 • • • SassとLess 開発環境の更なる進化：Grunt、Scout、Codekitなど 主なブラウザ：IE8-11、Google Chrome、iOS Safari、 Android 標準ブラウザ（お荷物はIE8とAndroid） 14年2月16日日曜日
- 14. 現代 2010- CSSプリプロセッサの隆盛 p { font: 10px/8px; $width: 1000px; width: $width/2; height: (500px/2); margin-left: 5px + 8px/2px; } p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } 14年2月16日日曜日 // Plain CSS, no division // Uses a variable, does division // Uses parentheses, does division // Uses +, does division
- 15. Fin 14年2月16日日曜日