ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/423/room ーーーーーーーーーーーーーーーーーーーーーーー

2. 本日のアジェンダ
1. レスポンシブデザインとは何か？ 30分
2. レスポンシブを支える技術 10分
3. レスポンシブデザインを作ろう！ 10分
4. レスポンシブデザイン例 20分
5. 質疑応答 20分

5. いきなり質問 1
schooのページを
スマホで見た事が
ありますか？

6. schooのページを
スマホで見た事が
ある人に聞きます。

7. schooのスマホサイトと
PCサイトは、
a
全くおなじ
b
全然ちがう

8. 答えを見てみましょう

10. 正解は
b
ぜんぜん違う

15. だから、スマホ専用デザインが必要。
もう一つ
大事な事
スマートフォン向け検索での
ランキングの変更について
!
http://googlewebmastercentral-ja.blogspot.jp/2013/06/
changes-in-rankings-of-smartphone.html

17. デバイスのサイズがわかるサイト
http://screensiz.es/phone

18. 各スマホの横幅を
PCで見てみるとこんな感じ
http://design-spice.com/sample/viewport/index.php

21. リアルのデバイスの幅と、実際のピクセルの数は違う

23. レスポンシブデザインキーワード
1
viewport ビューポート
2
Fluid Image フルードイメージ
3
Fluid grid フルードグリッド
4 Media Queries メディアクエリー

24. レスポンシブデザインキーワード(1)
viewport
ビューポート

25. web
ページは

30. レスポンシブデザインキーワード(2)
Fluid Image
フルードイメージ

31. 同じ画像を
デバイスやブラウザ幅にフィットさせる！

32. cssに以下を指定するだけ!
img {
width:100%;
height:auto;
} 横幅に応じて
アスペクト比で伸び縮みする

33. レスポンシブデザインキーワード(３)
Fluid grid
フルードグリッド

34. 960は約数が28＊もあり、
要素の配置を決める時に
均等に割り付け易い！
「960」の約数＝1、2、3、4、5、6、8、10、12、
15、16、20、24、30、32、40、48、60、64、80、
96、120、160、192、240、320、480、960
http://960.gs/

37. という風に、全てのcssの
widthの指定を％に
変えていくだけ!
簡単ですが
めんどくさいです。

38. フルードグリッドに対応した
フレームワークを利用すると
簡単にレスポンシブデザインの
サイトを作る事ができます。
!
慣れるまでは、そのようなオープンソースを
マッシュアップして制作、
熟練したらテンプレート制作にチャレンジ！

39. フルードグリッド実装の
便利なフレームワーク
!
FlexGRID
http://www.volumethemes.com/flexgrid
※中身の高さが異なっていても、高さが
う便利機能
Bootstrap
http://getbootstrap.com/
http://getbootstrap.com/css/#grid
※cssが12のグリッド何個分かでネーミングされている！

40. イシジマミキ
先生の
Bootstrap
デザイナーのためのラクして作る神速WEBサイト
∼Bootstrap編∼
http://schoo.jp/class/313
で、詳しく説明されてます！

41. その他フルードグリッド実装のフレームワーク
Kube ̶ Professional CSS-framework
http://imperavi.com/kube/
http://imperavi.com/kube/grid/#toc-grid
!
lessframework
http://lessframework.com/
!
Foundation
http://foundation.zurb.com/
http://foundation.zurb.com/docs/components/grid.html

42. レスポンシブデザインキーワード(４)
Media Queries
メディアクエリー

43. いきなり質問 ２
メディアクエリー
とは何でしょう？

44. メディアの、
a
不具合をアラートする機能
b
表示スピードを上げる機能
c
デザインを切り替える機能

45. 正解は
c
デザインを切り替える機能

52. 詳しくは、
こちら
Google がお勧めするスマートフォンに
最適化されたウェブサイトの構築方法
http://googlewebmastercentral-ja.blogspot.jp/2012/06/
google.html

53. レスポンシブデザインを作ろう！
10分
!
仕上がりサンプル確認
演習問題のダウンロード

54. 仕上がり見本を
Mobilizerでレビューしてみる。
※ネット上にないと表示できない。
演習用html
http://behomazn.com/schoo140208/
http://behomazn.com/schoo140208/work.html
!
サンプルhtml
http://behomazn.com/schoo140208/sample1.html
http://behomazn.com/schoo140208/sample2.html

55. それでは実際に
メディアクエリーを体験してみましょう。
!
コード一式を下記よりダウンロード
https://github.com/Behomazn/responsive

61. では

62. いきなり質問 3
html5shiv.js
はどこの回し者でしょう？

63. html5shiv.jsは、
a
Microsoftの回し者
b
googleの回し者
c
JQueryの回し者

64. 正解は
b
googleの回し者でした！

65. https://code.google.com/p/html5shiv/
ここで配布しています。
これを呼び出す事によって、
html5に対応していない∼IE９でも
html5を正しく表示しできます。

66. respond.js
はこちらで配布しています。
https://github.com/scottjehl/Respond
これを呼び出す事によって、
メディアクエリーに対応していない∼IE9でも
ブラウザ幅で切り替えできます。

67. こちらもgoogle製
css3-mediaqueries.js
https://code.google.com/p/css3-mediaqueries-js/
これも、メディアクエリーを、
∼IE8に対応させます。
ただし、@mediaの書き方のみ対応

68. レスポンシブなサイトまとめ
カリモク ニュー スタンダード
http://www.karimoku-newstandard.jp/top/
NHKスタジオパーク
http://www.nhk.or.jp/studiopark/
佐賀大学美術館
http://suam102.com/
マスミ
http://msilk.jp/
日本大学藝術学部
http://real.art.nihon-u.ac.jp/2012/

69. レスポンシブなサイトまとめ
無料テンプレート集
http://photoshopvip.net/archives/50917
http://w3q.jp/t/4237
http://www.html5mania.com/category/freeresponsive-themes/#.UvMhlkJ_uh0

70. レスポンシブなサイトまとめ
Bootstrapテーマ集
http://bootswatch.com/
!
http://www.blacktie.co/
!
WordPressテーマ集
http://www.hongkiat.com/blog/free-responsivewordpress-themes/
!
http://www.webdesignrazzi.com/2014/freewordpress-themes/
!