テーマ作成で困らないためのイマドキhtml 再入門
DESCRIPTION
2014/08/30 WordFes Nagoya 2014TRANSCRIPT
![Page 1: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/1.jpg)
テーマ作成で困らないためのイマドキHTML 再入門
株式会社ワンダーズ 山田 悠矢
![Page 2: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/2.jpg)
自己紹介
•株式会社ワンダーズ 取締役(たくさん居ます)
• http://wonders.jp
•フロントエンドエンジニア
•最近、請求書を送って実際にお金に変わるのが快感になりつつあります
![Page 3: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/3.jpg)
という勉強会
![Page 4: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/4.jpg)
本日こんなことをお話ししたいと思っています。
![Page 5: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/5.jpg)
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
![Page 6: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/6.jpg)
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
Sass ってなんだよー、使わないとこれからはダメなの?
![Page 7: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/7.jpg)
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
Sass ってなんだよー、使わないとこれからはダメなの?
レスポンシブレイアウトってなんだよー意味分かんないよー
![Page 8: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/8.jpg)
本日こんなことをお話ししたいと思っています。
5年・10年前 今現在
![Page 9: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/9.jpg)
本日こんなことをお話ししたいと思っています。
5年・10年前 今現在
なぜそうなった? を押さえる!
![Page 10: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/10.jpg)
というわけでここから本編です!
• 数年間のフロントエンドの変化3つ
• 3つの変化を乗りこなす!
• まとめ・アウトプットのススメ
目次
![Page 11: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/11.jpg)
![Page 12: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/12.jpg)
数年間のフロントエンドの変化3つ
![Page 13: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/13.jpg)
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
![Page 14: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/14.jpg)
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
![Page 15: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/15.jpg)
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
3. 『対応ブラウザ』の変化
![Page 16: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/16.jpg)
『スクリーンサイズ』の変化
![Page 17: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/17.jpg)
『スクリーンサイズ』の変化
•viewport ってそもそも何だ?
![Page 18: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/18.jpg)
『スクリーンサイズ』の変化
•viewport ってそもそも何だ?
•→ 表示の比率をコントロールするもの
![Page 19: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/19.jpg)
viewport 再入門
![Page 20: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/20.jpg)
![Page 21: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/21.jpg)
![Page 22: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/22.jpg)
950px
![Page 23: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/23.jpg)
![Page 24: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/24.jpg)
![Page 25: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/25.jpg)
当然これも 950px
![Page 26: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/26.jpg)
こっちのが そのまま押しやすい
![Page 27: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/27.jpg)
こっちのが そのまま押しやすい
![Page 28: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/28.jpg)
こっちのが そのまま押しやすい
これは 320px?
![Page 29: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/29.jpg)
viewport 再入門
![Page 30: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/30.jpg)
viewport 再入門
•今まで横幅は固定で比率変えましょう
![Page 31: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/31.jpg)
viewport 再入門
•今まで横幅は固定で比率変えましょう
•これから比率は一定で、横幅変えましょう
![Page 32: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/32.jpg)
比率一定とは?
○
![Page 33: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/33.jpg)
比率一定とは?×
![Page 34: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/34.jpg)
比率一定で、横幅変えましょう
•スクリーンサイズ(特に横幅)の変化につながる
•横幅の変化に柔軟な作りが求められてきている
![Page 35: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/35.jpg)
viewportもう一歩踏み込み
![Page 36: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/36.jpg)
viewportもう一歩踏み込み
•width=device-width とは?
![Page 37: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/37.jpg)
viewportもう一歩踏み込み
•width=device-width とは?
•ディスプレイの表示可能ピクセル数とは違うよ?
![Page 38: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/38.jpg)
viewportもう一歩踏み込み
•width=device-width とは?
•ディスプレイの表示可能ピクセル数とは違うよ?
•http://screensiz.es/phone
![Page 39: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/39.jpg)
viewportもう一歩踏み込み
•width=device-width とは?
•ディスプレイの表示可能ピクセル数とは違うよ?
•http://screensiz.es/phone
•アップデートでも変わりうる(例:Nexus7: 603px -> 600px)
![Page 41: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/41.jpg)
『横幅を柔軟にする』方法いろいろ
•色々あるけど・・・
•レスポンシブレイアウトはその1つ
• レスポンシブレイアウトは難しい
•リキッドレイアウトだってその1つ
![Page 42: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/42.jpg)
![Page 43: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/43.jpg)
数年間のフロントエンドの変化
1. 『スクリーンサイズ』
2. 『制作工程』の変化
3. 『対応ブラウザ』
![Page 44: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/44.jpg)
"効率化による"『制作工程』の変化
![Page 45: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/45.jpg)
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される(当たり前
![Page 46: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/46.jpg)
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される(当たり前
•そうではないものを扱う業界も当然ある
![Page 47: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/47.jpg)
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される(当たり前
•そうではないものを扱う業界も当然ある
•変換して実行できる形式にする→ ビルド
![Page 48: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/48.jpg)
ビルド?
![Page 49: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/49.jpg)
ビルド
![Page 50: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/50.jpg)
ビルド
•例)ビルドツールとしてのDreamweaver
![Page 51: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/51.jpg)
ビルド
•例)ビルドツールとしてのDreamweaver
•例)Retina 用の縦横2倍サイズの背景画像
![Page 52: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/52.jpg)
ビルド工程の変換例変換前 変換後
Markdown HTML
HAML HTML
Sass (with compass, bourbon) CSS
LESS CSS
Stylus CSS
CoffeeScript JavaScript
TypeScript JavaScript
JSX JavaScript
![Page 53: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/53.jpg)
もっと具体的な例
![Page 54: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/54.jpg)
デメリットもあるよ
•学習コストup!
•属人化の闇・・・
![Page 55: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/55.jpg)
![Page 56: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/56.jpg)
数年間のフロントエンドの変化
1. 『スクリーンサイズ』
2. 『制作工程』
3. 『対応ブラウザ』の変化
![Page 57: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/57.jpg)
![Page 58: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/58.jpg)
『対応ブラウザ』の変化
![Page 59: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/59.jpg)
『対応ブラウザ』の変化
IE11,Chrome
![Page 60: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/60.jpg)
『対応ブラウザ』の変化
IE11,Chrome
IE8,9,10
![Page 61: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/61.jpg)
サポートが減ることによるメリット1. 単純に確認する手間の軽減
2. Web 標準に沿ってない対応ブラウザが減ることによる効率化
![Page 62: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/62.jpg)
例1: ページネーション
![Page 64: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/64.jpg)
例2: 3カラムの高さ揃え
![Page 65: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/65.jpg)
http://codepen.io/wonders_y/pen/vrcLthttp://codepen.io/wonders_y/pen/tpdhk (対応前)
![Page 66: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/66.jpg)
例3: WYSIWYGエディタの出力HTML•シンプルなHTMLでないと
成り立たない部分(例:自由入力)
•CSS Selector を知ることでより適切なスタイルをあてる
![Page 68: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/68.jpg)
![Page 69: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/69.jpg)
今が再学習のチャンス!
5年10年前
ちょっと前
最近
出来るブラウザ出来ないブラウザ
![Page 70: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/70.jpg)
![Page 71: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/71.jpg)
3つの変化を乗りこなす!
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
3. 『対応ブラウザ』の変化
![Page 72: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/72.jpg)
『スクリーンサイズ』の変化を 乗りこなす!•問題となってくるのは、
"横幅" に依存した要素
•表
•画像 など
![Page 73: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/73.jpg)
『制作工程』の変化を乗りこなす!
•携わる人同士でちゃんと相談しよう
•目安はGUIツールの有無?
•ぜひともローカルで動作する開発環境を!
•XAMPP, MAMP などのローカルでWebサーバが動作するもの
![Page 74: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/74.jpg)
『対応ブラウザ』の変化を 乗りこなす!•対応ブラウザを検討するうえで、
シェアは大事な検討要素
•当たり前のことですが、対応ブラウザはしっかり決めましょう(当然スマートフォンのOS、ブラウザまでしっかりと)
![Page 75: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/75.jpg)
まとめ
![Page 76: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/76.jpg)
必要以上に焦る必要はない
![Page 77: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/77.jpg)
必要かどうか判断する知識を最低限持つ
![Page 78: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/78.jpg)
必要かどうか判断する知識を最低限持つ
•知らないと取捨選択すら出来ない
![Page 79: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/79.jpg)
必要かどうか判断する知識を最低限持つ
•知らないと取捨選択すら出来ない
•アンテナは少し大きめに張っておこう
![Page 80: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/80.jpg)
アウトプットのススメ
![Page 81: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/81.jpg)
アウトプットのススメ
•実際にアウトプットしてみよう!
![Page 82: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/82.jpg)
アウトプットのススメ
•実際にアウトプットしてみよう!
•聞くだけで済ませるのはもったいない
![Page 83: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/83.jpg)
アウトプットのススメ
•実際にアウトプットしてみよう!
•聞くだけで済ませるのはもったいない
とかで喋ってみたらいいじゃないですかー (新人教育に最適!)
![Page 84: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/84.jpg)
ご清聴ありがとうございました!
![Page 85: テーマ作成で困らないためのイマドキHTML 再入門](https://reader034.vdocuments.pub/reader034/viewer/2022042614/555caee1d8b42aad358b50a9/html5/thumbnails/85.jpg)
参考URL
• http://www.w3.org/TR/css-device-adapt/
• http://screensiz.es/phone
• http://ebisu.com/note/nexus7-density/
• http://kidachi.kazuhi.to/blog/archives/037734.html
• http://sass-lang.com/
• http://compass-style.org/
• http://gs.statcounter.com/#desktop-browser_version_partially_combined-JP-monthly-201307-201407
• http://www.w3.org/TR/css3-selectors/
• http://uupaa.hatenablog.com/entry/2012/03/06/204911
• http://blogs.msdn.com/b/ie/archive/2014/08/07/stay-up-to-date-with-internet-explorer.aspx
• http://www.pakutaso.com