現場のプロが教えるHTML+CSSコーディングの最新常識

CHAPTER3──掲載サイトリンク集

01 Sass・LESSなどのCSSプリプロセッサ

サイト名URL
Sass: Syntactically Awesome Style Sheetshttp://sass-lang.com/
Compass Homehttp://compass-style.org/
LESS - The Dynamic Stylesheet languagehttp://less-ja.studiomohawk.com/
Stylus — expressive, robust, feature-rich CSS preprocessorhttp://learnboost.github.io/stylus/
Codekithttps://incident57.com/codekit/
Preproshttps://prepros.io/

02 スタイルガイドを作成する

サイト名URL
Pattern Primerhttps://github.com/adactio/Pattern-Primer
Style Guide Boilerplatehttp://bjankord.github.io/Style-Guide-Boilerplate/
Kalei Style guidehttp://kaleistyleguide.com/
styleDoccohttp://jacobrask.github.io/styledocco/
KSShttp://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のサポートライフサイクルポリシーに関するFAQhttp://support.microsoft.com/gp/Microsoft-Internet-Explorer
CSS3 PIEhttp://css3pie.com/
html5shivhttps://github.com/aFarkas/html5shiv
Respond.jshttps://github.com/scottjehl/Respond
Modernizrhttp://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/
MDNhttps://developer.mozilla.org/ja/

06 Webフォントを活用する

サイト名URL
Google Fontshttps://www.google.com/fonts/
Fonts.comhttp://www.fonts.com/ja
Adobe Typekithttps://typekit.com/
MyFontshttps://www.myfonts.com/
TypeSquarehttp://typesquare.com/
FONTPLUShttp://webfont.fontplus.jp/
Font Awesomehttp://fortawesome.github.io/Font-Awesome/
Foundation Icon Fonts 3http://zurb.com/playground/foundation-iconfonts-3
Entypohttp://www.entypo.com/
Fontellohttp://fontello.com/

07 CSS3のアニメーションを活用する

サイト名URL
Ceaserhttp://matthewlein.com/ceaser/

08 Media Queriesを使ったレスポンシブWebデザイン

サイト名URL
あなたに特化したメガネを!メガネの選び方なら − メガネNAVIhttp://www.aigan.co.jp/meganenavi/
プレイステーション® オフィシャルサイトhttp://www.jp.playstation.com/
Quay Restauranthttp://www.quay.com.au/
Responsive Web Design JPhttp://responsive-jp.com/
Responsive from ZURBhttp://zurb.com/responsive

09 CSSフレームワークの導入方法と使い方

サイト名URL
Bootstraphttp://getbootstrap.com/
Foundationhttp://foundation.zurb.com/
Gumbyhttp://gumbyframework.com/
Bittershttp://bitters.bourbon.io/
Bourbonhttp://bourbon.io/
Purehttp://purecss.io/
Bourbon Neathttp://neat.bourbon.io/

10 管理しやすく破綻しないCSS設計の手法

サイト名URL
CSS Architecturehttp://philipwalton.com/articles/css-architecture/
OOCSSドキュメント──Object-oriented CSShttp://oocss.org
OOCSSドキュメント──GitHub - stubbornella/oocsshttps://github.com/stubbornella/oocss
OOCSSドキュメント──Slideshare - Object Oriented CSShttp://www.slideshare.net/stubbornella/object-oriented-css
SMACCShttps://smacss.com/
BEMhttps://bem.info/
MCSShttp://operatino.github.io/MCSS/ja/
FLOCCShttps://github.com/hiloki/flocss
KSShttp://warpspire.com/kss/
StyleDoccohttp://jacobrask.github.io/styledocco/

Indexへ戻る