小川 裕之
レスポンシブWebの基礎と
コーディング実習
schoo ‘03.09.31
   
   
      
   
   
13年9月30日月曜日
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等...
   
   
      
   
   
レスポンシブWebデザインでサイト
制作したことはありますか?
Q
13年9月30日月曜日
本講のアジェンダ
•レスポンシブWebデザインとは?
•レスポンシブWebデザインの実装方法
•ハンズオン
•RWDのワークフロー
•RWDとこれからのWeb
•まとめ
•質疑応答
13年9月30日月曜日
   
   
      
   
   
レスポンシブWebデザインとは
13年9月30日月曜日
Am I Responsive?
13年9月30日月曜日
Photo by Jeremy Keith
スマートデバイスの増加
13年9月30日月曜日
1日の平均インターネット接続時間
博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より
72,8分
50.6分
13年9月30日月曜日
マルチデバイス対応の手法
•レスポンシブWebデザイン
•専用サイト
•プログラム変換
13年9月30日月曜日
RWDの特徴
13年9月30日月曜日
RWDの特徴
•URLがひとつ
•ワンソース
•更新が比較的簡単
•新しいデバイスにも対応しやすい
13年9月30日月曜日
ワンソースで各デバイスの画面サイズに
対応したレイアウトを実現
HTML
CSSCSS CSS
幅768px
以下
幅480px
以下
幅769px
以上
13年9月30日月曜日
URLがひとつ
13年9月30日月曜日
ワンソース
13年9月30日月曜日
HTML
CSSCSS CSS
更新の手間が少ない
更新
! !
!
13年9月30日月曜日
新しいデバイスにも対応しやすい
? ?
?
?
?
13年9月30日月曜日
それぞれのメリット・デメリット
手法 メリット デメリット
レスポンシブWebデザイン
更新がラク
URLがひとつ
無数のデバイスに適応できる
構成の制限
設計が難しい
テストの工数が増える
マルチソース
デバイスの特性にあった最適化ができる
...
サイトの目的を明確にし、
最適な手段を選択する
13年9月30日月曜日
   
   
      
   
   
レスポンシブWebデザインの実装
13年9月30日月曜日
A LIST APART
13年9月30日月曜日
RWDを実現する要素
•Fluid Gird
•Fluid Image
•Media Queries
13年9月30日月曜日
Fluid Grid
13年9月30日月曜日
規則性をもったライン(Grid)にそって
コンテンツを配置
Grid Design
13年9月30日月曜日
グリッドの幅を相対値で指定
Fluid Grid
%
13年9月30日月曜日
求める要素の幅 親要素の幅 100%
相対値の求め方
620px 300px
960px
60px 20px
13年9月30日月曜日
=64.58333%
300÷960
×100
960px
相対値の求め方
620÷960×100
=31.25%
求める要素の幅 親要素の幅 100%
13年9月30日月曜日
Fluid Grid Systemが便利
pxからいちいち計算するのは手間
13年9月30日月曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
13年9月30日月曜日
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
960px
13年9月30日月曜日
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
3カラム= (60px×3+20×2) ÷960px×100%=22.91667%
4カラム=...
8カラム 4カラム
100%
=31.25%=64.58333%
13年9月30日月曜日
px %
幅を相対値にする
13年9月30日月曜日
Fluid Image
13年9月30日月曜日
画像が親要素より
はみ出してしまう
画像を可変にする
13年9月30日月曜日
<img src="photo.jpg"alt"="photo">
img{
max-width: 100%;
height: auto;
}
HTML
CSS
画像を可変にする
親要素内に
収まる
13年9月30日月曜日
Media Queries
13年9月30日月曜日
メディアタイプと特性に関する条件を調べ
その結果に応じて処理を行う
13年9月30日月曜日
@media screen and (min-width: 640px){
body{
background-color: red;
}
}
メディアがスクリーンで表示領域幅が
640px以上の場合、背景色を赤にする
メディアタイプ メディア特...
メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表...
@import url ("pc.css") screen and (min-
width:600px);
<link rel="stylesheet" href="pc.css"
media="screen and (min-width:60...
body{
backgorund-color:red;
}
モバイルファースト
1025px768px
全サイズ
に適用
13年9月30日月曜日
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
モバイルファースト
1025px768px
...
モバイルファースト
幅1025px
以上に適用
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
...
body{
backgorund-color:red;
}
767px1024px
デスクトップファースト
全サイズ
に適用
13年9月30日月曜日
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
767px1024px
デスクトップファー...
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
@media screen and (ma...
モバイルファーストのメリット
•スタイルが少なくなる
768px
   
#main
#sub
#main #sub
13年9月30日月曜日
モバイルファーストのメリット
•スタイルが少なくなる
#main{
float:left;
width:80%;
}
@media screen and (max-width:
768px){
#main{
float: none;
width...
デスクトップファーストのメリット
•Media Queriesに非対応のブラウザ対応が簡単
モバイルファースト デスクトップファースト
13年9月30日月曜日
ブレイクポイント
13年9月30日月曜日
@media screen and (min-width: 480px){
/*style*/
}
@media screen and (min-width: 940px){
/*style*/
}
940px480px
ブレイクポイント
13...
   
   
      
   
   
ブレイクポイントはどのように
決めますか?
Q
13年9月30日月曜日
Sorce:Design Spice
サイトによって様々
13年9月30日月曜日
ブレイクポイントを決めるヒント
•主要となるデバイスの幅から
•コンテンツの最適なレイアウトから
13年9月30日月曜日
デバイスの幅から
主要となるデバイス、シェアの多いデバイスなど
を元に決める
13年9月30日月曜日
コンテンツから
動かしてみて調整が必要な部分に適時ブレイク
ポイントを追加する
13年9月30日月曜日
Viewport
13年9月30日月曜日
Viewportの設定をしてないとき
980pxのウインドウサイズで
アクセスしたときと同じ表示
13年9月30日月曜日
<meta name="viewport" content="width=device-width,
initial-scale=1">
そのデバイスの幅で
サイトが表示される
13年9月30日月曜日
   
   
      
   
   
セミハンズオン
13年9月30日月曜日
※モダンブラウザ・IE8∼
13年9月30日月曜日
768px 940px
nav
article
aside
footer
article aside
footer
nav
#wrapper
#wrapper
mainImage
fixedmainImage
13年9月30日月曜日
620px 300px
940px
13年9月30日月曜日
   
   
      
   
   
さらに最適化を
13年9月30日月曜日
Responsive Web Design
Performance
Responsive Web Design
Usability
Content Strategy User Interface
Readability
SEO
Accessib...
Responsive Web Design
Usability
Performance
Content Strategy User Interface
Readability
SEO
Accessibility
Information Arch...
Good performance is good design
Brad Frost
13年9月30日月曜日
表示に時間が
かかる
光回線3G回線
13年9月30日月曜日
画像の最適化
•CSSを使う
•画像を圧縮する
•Webフォント
•Webアイコンフォント
•画像を差し替える
13年9月30日月曜日
レスポンシブWebデザインの画像問題の解決方法
13年9月30日月曜日
ハイパフォーマンスWebサイト
13年9月30日月曜日
   
   
      
   
   
RWDワークフロー
13年9月30日月曜日
•特定のデバイス対応
•コンテンツの幅は固定
•どの表示領域でもレイアウトは変わらない
ワークフローを見直す
今までの
サイト
•マルチデバイス対応
•コンテンツ幅は可変
•表示領域幅でレイアウトが変わる
RWD
13年9月30日月曜日
作ってみないとわからない
13年9月30日月曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
ワークフロー例
13年9月30日月曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
早めにプロトタイプを作成して
テストをしながら完成へと近づける
13年9月30日月曜日
カンプをどのようにつくるか
13年9月30日月曜日
=
従来のサイト制作におけるカンプ
13年9月30日月曜日
=    
   
RWDにおけるカンプ
13年9月30日月曜日
体制や案件に応じて作り方を変える
•各ブレイクポイントで作成
•PCサイズのみ作成
•主要な部分のみ作りこんで
他はざっくりと
•Designing in the browserで
13年9月30日月曜日
その都度都度で体制を柔軟に
変えられることが大事
13年9月30日月曜日
   
   
      
   
   
RWDとこれからのWeb
13年9月30日月曜日
   
   
      
   
   
スマートフォン・タブレット以外の
デバイスでサイトにアクセスしたことは?
Q
13年9月30日月曜日
Android Fragmentation Visualized
多様化するデバイス
13年9月30日月曜日
Future of Screen Technology
Productivity Future Vision
13年9月30日月曜日
それぞれのデバイス専用にサイトを作るのは
現実的ではなくなってくる
少ない労力でより多くのデバイスに
対応できるのが理想
13年9月30日月曜日
Best practice?
Photo by Jeremy Keith
13年9月30日月曜日
RWDは発展途上
•Media Queries Level4
•Responsive Images
•flexbox ,Regions,Column,...
•vw,vh
13年9月30日月曜日
Photo by Barb Dybwad
考え方も変える
13年9月30日月曜日
完全を求めない
Photo by Peter Miller
13年9月30日月曜日
“The control which designers know in the print medium, and often desire
in the web medium, is simply a function of the lim...
   
   
13年9月30日月曜日
   
   
13年9月30日月曜日
What is king?
Photo by Kyle Johnston
13年9月30日月曜日
未来を想像し、変化に順応する
Photo by dalioPhoto
13年9月30日月曜日
   
   
      
   
   
まとめ
13年9月30日月曜日
本日のまとめ
•RWDはワンソースでマルチデバイスに対応する手法
•RWDを実装する要素
(Fluid Grid, Fluid Image, Media Queries)
•表示だけでなくパフォーマンスも最適化する工夫を
•早めにテストを行いリ...
   
   
      
   
   
質疑応答
13年9月30日月曜日
   
   
      
   
   
課題
•過去に作成したサイトをレスポンシブ
Webデザインにしてみる
•レスポンシブWebデザインをいちから
作成してみる
13年9月30日月曜日
Upcoming SlideShare
Loading in...5
×

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之

3,874

Published on

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

Published in: Business
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,874
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之"

  1. 1. 小川 裕之 レスポンシブWebの基礎と コーディング実習 schoo ‘03.09.31                        13年9月30日月曜日
  2. 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。 2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin  hiro.ogw 13年9月30日月曜日
  3. 3.                        レスポンシブWebデザインでサイト 制作したことはありますか? Q 13年9月30日月曜日
  4. 4. 本講のアジェンダ •レスポンシブWebデザインとは? •レスポンシブWebデザインの実装方法 •ハンズオン •RWDのワークフロー •RWDとこれからのWeb •まとめ •質疑応答 13年9月30日月曜日
  5. 5.                        レスポンシブWebデザインとは 13年9月30日月曜日
  6. 6. Am I Responsive? 13年9月30日月曜日
  7. 7. Photo by Jeremy Keith スマートデバイスの増加 13年9月30日月曜日
  8. 8. 1日の平均インターネット接続時間 博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より 72,8分 50.6分 13年9月30日月曜日
  9. 9. マルチデバイス対応の手法 •レスポンシブWebデザイン •専用サイト •プログラム変換 13年9月30日月曜日
  10. 10. RWDの特徴 13年9月30日月曜日
  11. 11. RWDの特徴 •URLがひとつ •ワンソース •更新が比較的簡単 •新しいデバイスにも対応しやすい 13年9月30日月曜日
  12. 12. ワンソースで各デバイスの画面サイズに 対応したレイアウトを実現 HTML CSSCSS CSS 幅768px 以下 幅480px 以下 幅769px 以上 13年9月30日月曜日
  13. 13. URLがひとつ 13年9月30日月曜日
  14. 14. ワンソース 13年9月30日月曜日
  15. 15. HTML CSSCSS CSS 更新の手間が少ない 更新 ! ! ! 13年9月30日月曜日
  16. 16. 新しいデバイスにも対応しやすい ? ? ? ? ? 13年9月30日月曜日
  17. 17. それぞれのメリット・デメリット 手法 メリット デメリット レスポンシブWebデザイン 更新がラク URLがひとつ 無数のデバイスに適応できる 構成の制限 設計が難しい テストの工数が増える マルチソース デバイスの特性にあった最適化ができる デザインの自由度が高い 開発コストがかかる 更新の手間がかかる 新しいデバイスを判定する必要がある プログラム変換 更新が比較的ラク URLが共通 デザインの自由度が高い 開発コストがかかる 新しいデバイスを判定する必要がある 13年9月30日月曜日
  18. 18. サイトの目的を明確にし、 最適な手段を選択する 13年9月30日月曜日
  19. 19.                        レスポンシブWebデザインの実装 13年9月30日月曜日
  20. 20. A LIST APART 13年9月30日月曜日
  21. 21. RWDを実現する要素 •Fluid Gird •Fluid Image •Media Queries 13年9月30日月曜日
  22. 22. Fluid Grid 13年9月30日月曜日
  23. 23. 規則性をもったライン(Grid)にそって コンテンツを配置 Grid Design 13年9月30日月曜日
  24. 24. グリッドの幅を相対値で指定 Fluid Grid % 13年9月30日月曜日
  25. 25. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px 300px 960px 60px 20px 13年9月30日月曜日
  26. 26. =64.58333% 300÷960 ×100 960px 相対値の求め方 620÷960×100 =31.25% 求める要素の幅 親要素の幅 100% 13年9月30日月曜日
  27. 27. Fluid Grid Systemが便利 pxからいちいち計算するのは手間 13年9月30日月曜日
  28. 28. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 13年9月30日月曜日
  29. 29. 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 960px 13年9月30日月曜日
  30. 30. 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 3カラム= (60px×3+20×2) ÷960px×100%=22.91667% 4カラム= (60px×4+20×3) ÷960px×100%=31.25% 5カラム= (60px×5+20×4) ÷960px×100%=39.5833% 960px 13年9月30日月曜日
  31. 31. 8カラム 4カラム 100% =31.25%=64.58333% 13年9月30日月曜日
  32. 32. px % 幅を相対値にする 13年9月30日月曜日
  33. 33. Fluid Image 13年9月30日月曜日
  34. 34. 画像が親要素より はみ出してしまう 画像を可変にする 13年9月30日月曜日
  35. 35. <img src="photo.jpg"alt"="photo"> img{ max-width: 100%; height: auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年9月30日月曜日
  36. 36. Media Queries 13年9月30日月曜日
  37. 37. メディアタイプと特性に関する条件を調べ その結果に応じて処理を行う 13年9月30日月曜日
  38. 38. @media screen and (min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合、背景色を赤にする メディアタイプ メディア特性 13年9月30日月曜日
  39. 39. メディア特性 情報 max-/min- width 表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○ 13年9月30日月曜日
  40. 40. @import url ("pc.css") screen and (min- width:600px); <link rel="stylesheet" href="pc.css" media="screen and (min-width:600px)"> @media screen and (min-width:600px){ /*style*/ } CSS CSS HTML 13年9月30日月曜日
  41. 41. body{ backgorund-color:red; } モバイルファースト 1025px768px 全サイズ に適用 13年9月30日月曜日
  42. 42. body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年9月30日月曜日
  43. 43. モバイルファースト 幅1025px 以上に適用 body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } @media screen and (min-width:1025px){ body{ background-color:yellow; } } 1025px768px 幅768px 以上に適用 全サイズ に適用 13年9月30日月曜日
  44. 44. body{ backgorund-color:red; } 767px1024px デスクトップファースト 全サイズ に適用 13年9月30日月曜日
  45. 45. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } 767px1024px デスクトップファースト 幅1024px 以下に適用 全サイズ に適用 13年9月30日月曜日
  46. 46. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } @media screen and (max-width:767px){ body{ background-color:yellow; } } 767px1024px デスクトップファースト 幅767px 以下に適用 幅1024px 以下に適用 全サイズ に適用 13年9月30日月曜日
  47. 47. モバイルファーストのメリット •スタイルが少なくなる 768px     #main #sub #main #sub 13年9月30日月曜日
  48. 48. モバイルファーストのメリット •スタイルが少なくなる #main{ float:left; width:80%; } @media screen and (max-width: 768px){ #main{ float: none; width: auto; } } デスクトップファースト @media screen and (min-width: 769px){ #main{ float: left; width: 80%; } } モバイルファースト 13年9月30日月曜日
  49. 49. デスクトップファーストのメリット •Media Queriesに非対応のブラウザ対応が簡単 モバイルファースト デスクトップファースト 13年9月30日月曜日
  50. 50. ブレイクポイント 13年9月30日月曜日
  51. 51. @media screen and (min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年9月30日月曜日
  52. 52.                        ブレイクポイントはどのように 決めますか? Q 13年9月30日月曜日
  53. 53. Sorce:Design Spice サイトによって様々 13年9月30日月曜日
  54. 54. ブレイクポイントを決めるヒント •主要となるデバイスの幅から •コンテンツの最適なレイアウトから 13年9月30日月曜日
  55. 55. デバイスの幅から 主要となるデバイス、シェアの多いデバイスなど を元に決める 13年9月30日月曜日
  56. 56. コンテンツから 動かしてみて調整が必要な部分に適時ブレイク ポイントを追加する 13年9月30日月曜日
  57. 57. Viewport 13年9月30日月曜日
  58. 58. Viewportの設定をしてないとき 980pxのウインドウサイズで アクセスしたときと同じ表示 13年9月30日月曜日
  59. 59. <meta name="viewport" content="width=device-width, initial-scale=1"> そのデバイスの幅で サイトが表示される 13年9月30日月曜日
  60. 60.                        セミハンズオン 13年9月30日月曜日
  61. 61. ※モダンブラウザ・IE8∼ 13年9月30日月曜日
  62. 62. 768px 940px nav article aside footer article aside footer nav #wrapper #wrapper mainImage fixedmainImage 13年9月30日月曜日
  63. 63. 620px 300px 940px 13年9月30日月曜日
  64. 64.                        さらに最適化を 13年9月30日月曜日
  65. 65. Responsive Web Design Performance Responsive Web Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
  66. 66. Responsive Web Design Usability Performance Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年9月30日月曜日
  67. 67. Good performance is good design Brad Frost 13年9月30日月曜日
  68. 68. 表示に時間が かかる 光回線3G回線 13年9月30日月曜日
  69. 69. 画像の最適化 •CSSを使う •画像を圧縮する •Webフォント •Webアイコンフォント •画像を差し替える 13年9月30日月曜日
  70. 70. レスポンシブWebデザインの画像問題の解決方法 13年9月30日月曜日
  71. 71. ハイパフォーマンスWebサイト 13年9月30日月曜日
  72. 72.                        RWDワークフロー 13年9月30日月曜日
  73. 73. •特定のデバイス対応 •コンテンツの幅は固定 •どの表示領域でもレイアウトは変わらない ワークフローを見直す 今までの サイト •マルチデバイス対応 •コンテンツ幅は可変 •表示領域幅でレイアウトが変わる RWD 13年9月30日月曜日
  74. 74. 作ってみないとわからない 13年9月30日月曜日
  75. 75. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト ワークフロー例 13年9月30日月曜日
  76. 76. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト 早めにプロトタイプを作成して テストをしながら完成へと近づける 13年9月30日月曜日
  77. 77. カンプをどのようにつくるか 13年9月30日月曜日
  78. 78. = 従来のサイト制作におけるカンプ 13年9月30日月曜日
  79. 79. =         RWDにおけるカンプ 13年9月30日月曜日
  80. 80. 体制や案件に応じて作り方を変える •各ブレイクポイントで作成 •PCサイズのみ作成 •主要な部分のみ作りこんで 他はざっくりと •Designing in the browserで 13年9月30日月曜日
  81. 81. その都度都度で体制を柔軟に 変えられることが大事 13年9月30日月曜日
  82. 82.                        RWDとこれからのWeb 13年9月30日月曜日
  83. 83.                        スマートフォン・タブレット以外の デバイスでサイトにアクセスしたことは? Q 13年9月30日月曜日
  84. 84. Android Fragmentation Visualized 多様化するデバイス 13年9月30日月曜日
  85. 85. Future of Screen Technology Productivity Future Vision 13年9月30日月曜日
  86. 86. それぞれのデバイス専用にサイトを作るのは 現実的ではなくなってくる 少ない労力でより多くのデバイスに 対応できるのが理想 13年9月30日月曜日
  87. 87. Best practice? Photo by Jeremy Keith 13年9月30日月曜日
  88. 88. RWDは発展途上 •Media Queries Level4 •Responsive Images •flexbox ,Regions,Column,... •vw,vh 13年9月30日月曜日
  89. 89. Photo by Barb Dybwad 考え方も変える 13年9月30日月曜日
  90. 90. 完全を求めない Photo by Peter Miller 13年9月30日月曜日
  91. 91. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'” John Allsopp, “A Dao of Web Design” 13年9月30日月曜日
  92. 92.         13年9月30日月曜日
  93. 93.         13年9月30日月曜日
  94. 94. What is king? Photo by Kyle Johnston 13年9月30日月曜日
  95. 95. 未来を想像し、変化に順応する Photo by dalioPhoto 13年9月30日月曜日
  96. 96.                        まとめ 13年9月30日月曜日
  97. 97. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 (Fluid Grid, Fluid Image, Media Queries) •表示だけでなくパフォーマンスも最適化する工夫を •早めにテストを行いリスクを減らし効率的に進める •今後マルチデバイス対応は必須となる •変化は必ず訪れるので少しずつ順応していく 13年9月30日月曜日
  98. 98.                        質疑応答 13年9月30日月曜日
  99. 99.                        課題 •過去に作成したサイトをレスポンシブ Webデザインにしてみる •レスポンシブWebデザインをいちから 作成してみる 13年9月30日月曜日

×