CHAPTER3──掲載サイトリンク集
01 Sass・LESSなどのCSSプリプロセッサ
サイト名 | URL |
---|---|
Sass: Syntactically Awesome Style Sheets | http://sass-lang.com/ |
Compass Home | http://compass-style.org/ |
LESS - The Dynamic Stylesheet language | http://less-ja.studiomohawk.com/ |
Stylus — expressive, robust, feature-rich CSS preprocessor | http://learnboost.github.io/stylus/ |
Codekit | https://incident57.com/codekit/ |
Prepros | https://prepros.io/ |
02 スタイルガイドを作成する
サイト名 | URL |
---|---|
Pattern Primer | https://github.com/adactio/Pattern-Primer |
Style Guide Boilerplate | http://bjankord.github.io/Style-Guide-Boilerplate/ |
Kalei Style guide | http://kaleistyleguide.com/ |
styleDocco | http://jacobrask.github.io/styledocco/ |
KSS | http://warpspire.com/kss/styleguides/ |
03 レガシーブラウザへの対応
サイト名 | URL |
---|---|
デスクトップブラウザシェア(StatCounter Global Stats) | http://gs.statcounter.com/ |
iOS のバージョン別シェア(App Store Distribution) | https://developer.apple.com/support/appstore/ |
Androidのバージョン別シェア(Android Developers) | http://developer.android.com/about/dashboards/ |
Internet Explorerのサポートライフサイクルポリシーに関するFAQ | http://support.microsoft.com/gp/Microsoft-Internet-Explorer |
CSS3 PIE | http://css3pie.com/ |
html5shiv | https://github.com/aFarkas/html5shiv |
Respond.js | https://github.com/scottjehl/Respond |
Modernizr | http://modernizr.com/ |
Modernizrドキュメントページ | http://modernizr.com/docs/ |
AndroidやiPhoneのHTML, CSS, JavaScriptのバグまとめ(to-R) | http://blog.webcreativepark.net/2012/03/13-093853.html |
Can I use... | http://caniuse.com/ |
MDN | https://developer.mozilla.org/ja/ |
06 Webフォントを活用する
サイト名 | URL |
---|---|
Google Fonts | https://www.google.com/fonts/ |
Fonts.com | http://www.fonts.com/ja |
Adobe Typekit | https://typekit.com/ |
MyFonts | https://www.myfonts.com/ |
TypeSquare | http://typesquare.com/ |
FONTPLUS | http://webfont.fontplus.jp/ |
Font Awesome | http://fortawesome.github.io/Font-Awesome/ |
Foundation Icon Fonts 3 | http://zurb.com/playground/foundation-iconfonts-3 |
Entypo | http://www.entypo.com/ |
Fontello | http://fontello.com/ |
07 CSS3のアニメーションを活用する
サイト名 | URL |
---|---|
Ceaser | http://matthewlein.com/ceaser/ |
08 Media Queriesを使ったレスポンシブWebデザイン
サイト名 | URL |
---|---|
あなたに特化したメガネを!メガネの選び方なら − メガネNAVI | http://www.aigan.co.jp/meganenavi/ |
プレイステーション® オフィシャルサイト | http://www.jp.playstation.com/ |
Quay Restaurant | http://www.quay.com.au/ |
Responsive Web Design JP | http://responsive-jp.com/ |
Responsive from ZURB | http://zurb.com/responsive |
09 CSSフレームワークの導入方法と使い方
サイト名 | URL |
---|---|
Bootstrap | http://getbootstrap.com/ |
Foundation | http://foundation.zurb.com/ |
Gumby | http://gumbyframework.com/ |
Bitters | http://bitters.bourbon.io/ |
Bourbon | http://bourbon.io/ |
Pure | http://purecss.io/ |
Bourbon Neat | http://neat.bourbon.io/ |
10 管理しやすく破綻しないCSS設計の手法
サイト名 | URL |
---|---|
CSS Architecture | http://philipwalton.com/articles/css-architecture/ |
OOCSSドキュメント──Object-oriented CSS | http://oocss.org |
OOCSSドキュメント──GitHub - stubbornella/oocss | https://github.com/stubbornella/oocss |
OOCSSドキュメント──Slideshare - Object Oriented CSS | http://www.slideshare.net/stubbornella/object-oriented-css |
SMACCS | https://smacss.com/ |
BEM | https://bem.info/ |
MCSS | http://operatino.github.io/MCSS/ja/ |
FLOCCS | https://github.com/hiloki/flocss |
KSS | http://warpspire.com/kss/ |
StyleDocco | http://jacobrask.github.io/styledocco/ |