2013.1.18赤羽デザイン勉強会でのおまけのお話です。

1. WordPressのデフォルトテーマ
Twenty Twelveから見る
レスポンシブウェブデザインと
モバイルファーストの考え方
2013.1.18 赤羽デザイン勉強会 おまけ
うぇぶるじょん

2. レスポンシブ・ウェブデザインって何？

3. 難しいことはいったん置いておいて

4. ちょっと見てみましょう

5. http://responsivepx.com

6. このように、色々なデバイスに対して、
よりよい表示を提供していこう、
という考え方の中の
一つの方法を
レスポンシブ・ウェブデザイン
と呼んでいます

7. メリット
ソースは一つなので管理が楽 実際には難しいケースもあり
新しいデバイスごとに対応しなくていい
URLが分散しないのでSEO的に有利と
いわれている

8. 難しい面
ファイルサイズが大きくなりがち
（モバイル苦しい）
設計失敗すると大変
ワークフローの変化
古いブラウザへの対応

9. 全てに対応できる魔法の技術ではない
でもやる価値はある

10. ところでスマホって表示に時間が
かかったりしませんか？

11. 最近は少し早い回線も出てきたようですが、
多くは3G
Wifiを使える環境も限られています

12. 解像度や画面も大きくなってきていますが、
画面は狭いですね。
一度に表示できるものに限界があります

13. スマホには
本当に大事なことを
表示させたい

14. はじめに、ちょっと不便なモバイルのことを
考えてあげましょうよ
モバイルファーストの
考え方の基本

15. カラムを落とすんじゃなくって

16. 広くなったから
増やす。
複雑なレイアウトもできる

17. いらないものを隠すんじゃなくて

18. 多くの情報を見せられる
いっぱい飾っても平気

19. そんな風に考えたら
わかりやすいかもしれないですね

20. メディアクエリ
と
ブレイクポイント

21. メディアクエリ
と
ブレイクポイント
この2つをまず覚えましょう

22. もう一度レスポンシブのサイトを
見てみましょう

23. 表示が切り替わるところがありますね？
ブレイクポイント

24. ブレイクポイントで表示をわける
メディアクエリ
CSS3
media属性 によってCSSを使い分ける
画面サイズ

25. Twenty Twelveのブレイクポイントは
600pxと960px

26. Twenty Twelveのブレイクポイントは
600pxと960px
見てみましょう

27. こんな風に書きます

28. style.css 1420行目∼
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
}
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
}

29. 全体に共通するスタイル
600px以上で適用したいスタイル
960px以上で適用したいスタイル

30. 相対的に考える

31. コンテンツの幅、マージンなど
相対的に考えます

32. 例えばこんな感じ
相対的 絶対的
100% 1000px
5% 50px
75% 20% 750px 200px
30% 30% 30% 300px 300px 300px
100% 1000px
＊実際の数字はもっと複雑になることが多い

33. ブレイクポイントでの切り替わりのみ、
という方法もある
必ずしも常に変化する必要はない！
PC用に固定レイアウト、スマホで切り替わる、
というのも立派なレスポンシブです
レスポンシブとリキッドを
混同しやすい

34. よくあるのがこのような
%による計算ですが

35. Twenty Twelveでは
rem
ベースになっています

36. rem
フォントサイズ
CSS3から登場
%やemのような相対単位
ルートのフォントサイズを継承

37. /* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase: 14;
$line-height: 24;
---------- Examples 1remが14px相当
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)
では5pxは？
* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
5 14
line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )
}
remを理解しないブラウザのため

38. 実際のCSSファイルを見ながら
感覚をつかみましょう！

39. Twenty Twelve に限らず
Twitter Bootstrapなどのフレームワーク
気に入ったサイトの作り方などをみていけば
ヒントはいっぱい。

40. とにかく触ってみよう！

41. 補足
viewportの設定
IE8以下への対応 メディアクエリを読ませちゃうとクラッシュしちゃうことも
あるとかないとか...
画像の切り替え方法