CSS
- BootstrapでレスポンシブなWebサイト制作 第2回 グリッドシステムとブレイクポイントを理解する http://gihyo.jp/design/serial/01/bootstrap3/0002
- CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
- flexboxの旧仕様、改定仕様、現行仕様の一覧 http://developers.linecorp.com/blog/?p=2479
- CSS ARROW PLEASE! http://www.cssarrowplease.com/
- 意外と知らない!?CSSセレクタ20個のおさらい http://weboook.blog22.fc2.com/blog-entry-268.html
高速化のtips
css/js
- 外部CSSはHTML中の上の方でよんでかまわない.レンダリング上、後から読むと表示崩れが起きる可能性があるので。
- 外部jsは、必要がない限り、極力HTMLの下のほうでよみこむ
HTMLの評価は、読み込んだソースの上から順に行われるため、htmlの解釈等より先にjsを読み込みに行くと、その分体感時間が遅くなる - css,jsはできるだけ圧縮する。
ツール例
- mac
SublineText + YUI Compressor http://thesaibase.com/html/st3-yui - web
css compressor http://www.cssdrive.com/index.php/main/csscompressor/
画像
- jpg/png等の埋め込み画像は極力必要なサイズに収める＋ひどく劣化しない程度に圧縮してから使用する
- 可能なら、base64化してHTML中に埋め込む（リクエスト数の低減）
ツール例
- tiny png https://tinypng.com/
- tiny jpeg https://tinyjpg.com/
- 画像をdataURLに変換する http://hi0a.com/demo/img-base64-datauri/