WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
•
6 likes•4,643 views
2013.1.18赤羽デザイン勉強会でのおまけのお話です。
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
- 1. WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方 2013.1.18 赤羽デザイン勉強会 おまけ うぇぶるじょん
- 4. ちょっと見てみましょう
- 6. このように、色々なデバイスに対して、 よりよい表示を提供していこう、 という考え方の中の 一つの方法を レスポンシブ・ウェブデザイン と呼んでいます
- 7. メリット ソースは一つなので管理が楽 実際には難しいケースもあり 新しいデバイスごとに対応しなくていい URLが分散しないのでSEO的に有利と いわれている
- 8. 難しい面 ファイルサイズが大きくなりがち （モバイル苦しい） 設計失敗すると大変 ワークフローの変化 古いブラウザへの対応
- 14. はじめに、ちょっと不便なモバイルのことを 考えてあげましょうよ モバイルファーストの 考え方の基本
- 15. カラムを落とすんじゃなくって
- 16. 広くなったから 増やす。 複雑なレイアウトもできる
- 17. いらないものを隠すんじゃなくて
- 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) { }
- 30. 相対的に考える
- 31. コンテンツの幅、マージンなど 相対的に考えます
- 32. 例えばこんな感じ 相対的 絶対的 100% 1000px 5% 50px 75% 20% 750px 200px 30% 30% 30% 300px 300px 300px 100% 1000px ＊実際の数字はもっと複雑になることが多い
- 33. ブレイクポイントでの切り替わりのみ、 という方法もある 必ずしも常に変化する必要はない！ PC用に固定レイアウト、スマホで切り替わる、 というのも立派なレスポンシブです レスポンシブとリキッドを 混同しやすい
- 35. Twenty Twelveでは rem ベースになっています
- 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を理解しないブラウザのため
- 39. Twenty Twelve に限らず Twitter Bootstrapなどのフレームワーク 気に入ったサイトの作り方などをみていけば ヒントはいっぱい。
- 40. とにかく触ってみよう！
- 41. 補足 viewportの設定 IE8以下への対応 メディアクエリを読ませちゃうとクラッシュしちゃうことも あるとかないとか... 画像の切り替え方法