PC向け開発からモバイル開発へ 実践モバイルファースト · 「Webアプリ」として開発 ② オフライン環境での利用が想定されていたり、
WordPressのデフォルトテーマ Twenty...
-
Upload
chieko-aihara -
Category
Technology
-
view
6.190 -
download
5
description
Transcript of WordPressのデフォルトテーマ Twenty...
![Page 1: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/1.jpg)
WordPressのデフォルトテーマTwenty Twelveから見る
レスポンシブウェブデザインとモバイルファーストの考え方
2013.1.18 赤羽デザイン勉強会 おまけうぇぶるじょん
![Page 2: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/2.jpg)
レスポンシブ・ウェブデザインって何?
![Page 3: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/3.jpg)
難しいことはいったん置いておいて
![Page 4: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/4.jpg)
ちょっと見てみましょう
![Page 6: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/6.jpg)
このように、色々なデバイスに対して、よりよい表示を提供していこう、
という考え方の中の一つの方法を
レスポンシブ・ウェブデザインと呼んでいます
![Page 7: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/7.jpg)
ソースは一つなので管理が楽新しいデバイスごとに対応しなくていい
実際には難しいケースもあり
メリット
URLが分散しないのでSEO的に有利といわれている
![Page 8: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/8.jpg)
難しい面
ファイルサイズが大きくなりがち(モバイル苦しい)
設計失敗すると大変
ワークフローの変化
古いブラウザへの対応
![Page 9: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/9.jpg)
全てに対応できる魔法の技術ではない
でもやる価値はある
![Page 10: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/10.jpg)
ところでスマホって表示に時間がかかったりしませんか?
![Page 11: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/11.jpg)
最近は少し早い回線も出てきたようですが、多くは3G
Wifiを使える環境も限られています
![Page 12: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/12.jpg)
解像度や画面も大きくなってきていますが、画面は狭いですね。
一度に表示できるものに限界があります
![Page 13: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/13.jpg)
スマホには
本当に大事なことを
表示させたい
![Page 14: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/14.jpg)
はじめに、ちょっと不便なモバイルのことを考えてあげましょうよ
モバイルファーストの考え方の基本
![Page 15: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/15.jpg)
カラムを落とすんじゃなくって
![Page 16: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/16.jpg)
広くなったから
増やす。複雑なレイアウトもできる
![Page 17: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/17.jpg)
いらないものを隠すんじゃなくて
![Page 18: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/18.jpg)
多くの情報を見せられる
いっぱい飾っても平気
![Page 19: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/19.jpg)
そんな風に考えたらわかりやすいかもしれないですね
![Page 20: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/20.jpg)
メディアクエリと
ブレイクポイント
![Page 21: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/21.jpg)
メディアクエリと
ブレイクポイント
この2つをまず覚えましょう
![Page 22: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/22.jpg)
もう一度レスポンシブのサイトを見てみましょう
![Page 23: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/23.jpg)
表示が切り替わるところがありますね?
ブレイクポイント
![Page 24: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/24.jpg)
ブレイクポイントで表示をわける
メディアクエリ
CSS3media属性 によってCSSを使い分ける
画面サイズ
![Page 25: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/25.jpg)
Twenty Twelveのブレイクポイントは
600pxと960px
![Page 26: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/26.jpg)
Twenty Twelveのブレイクポイントは
600pxと960px
見てみましょう
![Page 27: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/27.jpg)
こんな風に書きます
![Page 28: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/28.jpg)
/* 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行目~
![Page 29: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/29.jpg)
全体に共通するスタイル
600px以上で適用したいスタイル
960px以上で適用したいスタイル
![Page 30: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/30.jpg)
相対的に考える
![Page 31: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/31.jpg)
コンテンツの幅、マージンなど相対的に考えます
![Page 32: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/32.jpg)
100%
75% 20%
30% 30%30%100%
例えばこんな感じ
*実際の数字はもっと複雑になることが多い
5%
1000px
750px 200px50px
300px 300px 300px1000px
相対的 絶対的
![Page 33: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/33.jpg)
ブレイクポイントでの切り替わりのみ、という方法もある
レスポンシブとリキッドを混同しやすい
必ずしも常に変化する必要はない!
PC用に固定レイアウト、スマホで切り替わる、というのも立派なレスポンシブです
![Page 34: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/34.jpg)
よくあるのがこのような%による計算ですが
![Page 35: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/35.jpg)
Twenty Twelveでは
remベースになっています
![Page 36: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/36.jpg)
rem
CSS3から登場
ルートのフォントサイズを継承
フォントサイズ
%やemのような相対単位
![Page 37: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/37.jpg)
/* =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を理解しないブラウザのため
![Page 38: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/38.jpg)
実際のCSSファイルを見ながら感覚をつかみましょう!
![Page 39: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/39.jpg)
Twenty Twelve に限らずTwitter Bootstrapなどのフレームワーク気に入ったサイトの作り方などをみていけばヒントはいっぱい。
![Page 40: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/40.jpg)
とにかく触ってみよう!
![Page 41: WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方](https://reader034.fdocument.pub/reader034/viewer/2022042701/559d94e31a28ab807f8b4641/html5/thumbnails/41.jpg)
補足
viewportの設定
IE8以下への対応 メディアクエリを読ませちゃうとクラッシュしちゃうこともあるとかないとか...
画像の切り替え方法