WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方 2013.1.18 赤羽デザイン勉強会 おまけ うぇぶるじょん
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Jul 09, 2015
2013.1.18赤羽デザイン勉強会でのおまけのお話です。
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
WordPressのデフォルトテーマTwenty Twelveから見る
レスポンシブウェブデザインとモバイルファーストの考え方
2013.1.18 赤羽デザイン勉強会 おまけうぇぶるじょん
レスポンシブ・ウェブデザインって何？
難しいことはいったん置いておいて
ちょっと見てみましょう
このように、色々なデバイスに対して、よりよい表示を提供していこう、
という考え方の中の一つの方法を
レスポンシブ・ウェブデザインと呼んでいます
ソースは一つなので管理が楽新しいデバイスごとに対応しなくていい
実際には難しいケースもあり
メリット
URLが分散しないのでSEO的に有利といわれている
難しい面
ファイルサイズが大きくなりがち（モバイル苦しい）
設計失敗すると大変
ワークフローの変化
古いブラウザへの対応
全てに対応できる魔法の技術ではない
でもやる価値はある
ところでスマホって表示に時間がかかったりしませんか？
最近は少し早い回線も出てきたようですが、多くは3G
Wifiを使える環境も限られています
解像度や画面も大きくなってきていますが、画面は狭いですね。
一度に表示できるものに限界があります
スマホには
本当に大事なことを
表示させたい
はじめに、ちょっと不便なモバイルのことを考えてあげましょうよ
モバイルファーストの考え方の基本
カラムを落とすんじゃなくって
広くなったから
増やす。複雑なレイアウトもできる
いらないものを隠すんじゃなくて
多くの情報を見せられる
いっぱい飾っても平気
そんな風に考えたらわかりやすいかもしれないですね
メディアクエリと
ブレイクポイント
メディアクエリと
ブレイクポイント
この2つをまず覚えましょう
もう一度レスポンシブのサイトを見てみましょう
表示が切り替わるところがありますね？
ブレイクポイント
ブレイクポイントで表示をわける
メディアクエリ
CSS3media属性 によってCSSを使い分ける
画面サイズ
Twenty Twelveのブレイクポイントは
600pxと960px
Twenty Twelveのブレイクポイントは
600pxと960px
見てみましょう
こんな風に書きます
/* Minimum width of 600 pixels. */@media screen and (min-width: 600px) {
}
/* Minimum width of 960 pixels. */@media screen and (min-width: 960px) {
}
style.css 1420行目～
全体に共通するスタイル
600px以上で適用したいスタイル
960px以上で適用したいスタイル
相対的に考える
コンテンツの幅、マージンなど相対的に考えます
100%
75% 20%
30% 30%30%100%
例えばこんな感じ
＊実際の数字はもっと複雑になることが多い
5%
1000px
750px 200px50px
300px 300px 300px1000px
相対的 絶対的
ブレイクポイントでの切り替わりのみ、という方法もある
レスポンシブとリキッドを混同しやすい
必ずしも常に変化する必要はない！
PC用に固定レイアウト、スマホで切り替わる、というのも立派なレスポンシブです
よくあるのがこのような%による計算ですが
Twenty Twelveでは
remベースになっています
rem
CSS3から登場
ルートのフォントサイズを継承
フォントサイズ
%やemのような相対単位
/* =Notes--------------------------------------------------------------This stylesheet uses rem values with a pixel fallback. The remvalues (and line heights) are calculated using two variables:
$rembase: 14;$line-height: 24;
---------- Examples
* Use a pixel value with a rem fallback for font-size, padding, margins, etc. padding: 5px 0; padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size font-size: 16px font-size: 1.142857143rem; (16 / $rembase) line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48pxto maintain vertical rhythm:
.my-new-div { margin: 24px 0; margin: 1.714285714rem 0; ( 24 / $rembase )}
1remが14px相当では5pxは？5÷14
remを理解しないブラウザのため
実際のCSSファイルを見ながら感覚をつかみましょう！
Twenty Twelve に限らずTwitter Bootstrapなどのフレームワーク気に入ったサイトの作り方などをみていけばヒントはいっぱい。
とにかく触ってみよう！
補足
viewportの設定
IE8以下への対応 メディアクエリを読ませちゃうとクラッシュしちゃうこともあるとかないとか...
画像の切り替え方法
Related Documents
