Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブWebデザイン@マカベンvol.5

1,727 views

Published on

レスポンシブWebデザイン@マカベンvol.5

  1. 1. レスポンシブ webデザイン@マカベンvol.5
  2. 2. 自己紹介 2 田村章吾 屋号:ましじめ フリーのマークアップエンジニア 山登りしてます。 ブログ書いてます。 http://tamshow.com/
  3. 3. 自己紹介 3 田村章吾 屋号:ましじめ フリーのマークアップエンジニア 山登りしてます。 ブログ書いてます。 http://tamshow.com/ 水族館のサイトを作りたいです。
  4. 4. 本日の内容 4 レスポンシブwebデザインの話 ∼ブラウザ幅でミャッとね∼
  5. 5. 本日の内容 5 レスポンシブwebデザインとは
  6. 6. 本日の内容 6 レスポンシブwebデザインとは PC、タブレット、スマートフォンなどの あらゆるデバイスに…
  7. 7. 本日の内容 7 いえ…
  8. 8. 本日の内容 8 今日は、ミャってしたいんです!
  9. 9. 本日の内容 9 • ミャってするには • はまったこと • あるといいやつ
  10. 10. ミャってするにはどうする? 10 レスポンシブ対応する時に 気になることは?
  11. 11. ミャってするにはどうする? 11 1. メディアクエリはどうすんの? 2. グリッドはどうすんの? 3. 画像はどうすんの? 4. tableとかパーツはどうすんの? 5.HTML5、CSS3はどうすんの? みんな気になる「5大どうすんの?」
  12. 12. 1. メディアクエリ 12 1. メディアクエリはどうすんの?
  13. 13. 13 @media メディアタイプ and (条件){ } 1. メディアクエリ
  14. 14. 14 1. メディアクエリ @media screen and (min-width: 940px) { .media-box { background: #999; } } @media メディアタイプ and (条件){ }
  15. 15. 15 メディア特性論理演算メディアタイプ 1. メディアクエリ @media メディアタイプ and (条件){ } @media screen and (min-width: 940px) { .media-box { background: #999; } }
  16. 16. 16 @media メディアタイプ and (条件){ } 1. メディアクエリ
  17. 17. 17 メディアクエリの指定方法は? 1. メディアクエリ メディアクエリを記述する場所は?
  18. 18. 18 メディアクエリの指定方法は? 1,モバイルから指定する 2,デスクトップから指定す 1. メディアクエリ
  19. 19. 19 // 560pxのサイズまでのスタイル #hoge {width: 100%;} // 560px以上のサイズ向けスタイル @media screen and (min-width: 560px) { #hoge{width: 100%;} } // 960px以上のサイズ向けのスタイル @media screen and (min-width: 800px) { #hoge {width: 100%;} } // 960pxより大きなサイズまでのスタイル #hoge {width: 100%;} // 960px以下のサイズ向けスタイル @media screen and (max-width: 960px) { #hoge{width: 100%;} } //560px以下のサイズ向けのスタイル @media screen and (max-width: 560px) { #hoge {width: 100%;} } 1. メディアクエリ メディアクエリの指定方法は? 1,モバイルから指定する 2,デスクトップから指定す
  20. 20. 20 メディアクエリはデスクトップから指定すると良い。 ●デスクトップから指定する事でIE8以下は今まで通りに対応できる。 ●IE8以下にレスポンシブ対応をしなくていい。 ●デスクトップ以下にIE8以下で使えないCSS3の要素を使える。 デメリットとして上書きする箇所などあり記述に無駄があるが、 現状、IE8以下などを考えるとこれが良い。 1. メディアクエリ メディアクエリの指定方法は?
  21. 21. 21 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する 1. メディアクエリ メディアクエリを記述する場所は?
  22. 22. 22 修正が大変(´;ω;`)ブワッ 1. メディアクエリ 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する メディアクエリを記述する場所は?
  23. 23. 23 修正が大変(´;ω;`)ブワッ 修正が大変(´;ω;`)ブワッ 1. メディアクエリ 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する メディアクエリを記述する場所は?
  24. 24. 24 修正が大変(´;ω;`)ブワッ 修正が大変(´;ω;`)ブワッ 管理しやすい(・∀・)♪ 1. メディアクエリ 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する メディアクエリを記述する場所は?
  25. 25. 25 パーツ単位で記述すると良い。 ●管理しやすく修正が楽。 ●@mediaが増えるのが嫌なら「Grunt」を 使ってまとめる事も出来る。 メディアクエリを記述する場所は? 1. メディアクエリ
  26. 26. 26 現状はデスクトップから指定する方が現実的なのではと思う。 IE8以下を無視してよくなったらモバイルから指定すると良いのでは。 更新を考えると@mediaを分けて記述するのはやめた方がいいので パーツ単位で書きましょう。 メディアクエリまとめ 1. メディアクエリ
  27. 27. 27 https://github.com/scottjehl/Respond https://code.google.com/p/ css3-mediaqueries-js/ IE8以下はメディアクエリを使えないので対応したい場合は この辺りがよさそう 1. メディアクエリ
  28. 28. 2. フルードグリッド 28 2. グリッドはどうすんの?
  29. 29. 29 フルードグリッドに必要なもの box-sizing:border-box; グリッドデザイン 2. フルードグリッド widthの値をpaddingやborderを 含めたて計算する。 12グリッドとか16グリッドとか カラム幅の計算 1,幅から計算する 2,カラム数から計算する
  30. 30. 30 1,幅から計算する 2,カラム数から計算する 求める幅÷親要素の幅x100=値 ガターはマージン 計算が面倒 他のサイトに使い回しにくい 求めるカラム数÷全体のカラム数 x100=値 ガターはパディング 計算が楽 他のサイトに使い回しやすい Bootstrapはこっちを使ってる 2. フルードグリッド フルードグリッドの計算
  31. 31. 31 1,幅から計算する 2,カラム数から計算する デザインが先にあって その後コーディングって流れは こっちが良い気がする デザイニングインザブラウザって 呼ばれるような方法主流になったら こっちが良いかも 2. フルードグリッド フルードグリッドの計算
  32. 32. 32 サイトごとに幅から計算するほうが良いと思うが、 カラム数から計算したグリッドを使ってないので なんとも言えないです… デメリットとしてサイトごとに使い回しにくいが、 なんだかんだその都度計算して作った方がやりやすい気がする。 計算は場合はsassのmixinを作っておくと便利。 フルードグリッドまとめ 2. フルードグリッド
  33. 33. 33 http://gridpak.com/ Gridpark 幅から計算する時にいい 2. フルードグリッド http://griddle.it/ Griddle.it コーディングするとき背景に敷く 画像を簡単に指定できる このへんを使うとやりやすい。
  34. 34. 3. フルードイメージ 34 3. 画像はどうすんの?
  35. 35. 35 レスポンシブイメージ 3. フルードイメージ max-width backgroundに指定する Response.jsを使う img { max-width: 100%; } .ie8 img {width: auto; height: auto;} Response.jsを使うとよさそう サイズごとに画像を用意する
  36. 36. 36 max-width:100%を指定する。 ●IE8はmax-widthの対応が不完全なので個別に対応 メディアクエリごとに切り替える場合は backgroundに指定するか、Response.jsを使うとよい。 レスポンシブイメージまとめ 3. フルードイメージ
  37. 37. 4. パーツをフルード化する 37 4. tableとかパーツはどうすんの?
  38. 38. 5. パーツをフルード化する 38 table
  39. 39. 39 ●そのまま  デメリット:小さくなると見にくい ●display:block  デメリット:縦にながくなる ●overflow-x ●theadを左に回り込み  デメリット:スクロールがわかりずらい table 5. パーツをフルード化する
  40. 40. 5. パーツをフルード化する 40 form
  41. 41. 41 ●入力フィールドは100%にしたら枠からはみ出るので  box-sizing:border-boxを記述するといい ●iOSのデフォルトのスタイルを消す  -webkit-appearance:none form 5. パーツをフルード化する
  42. 42. 5. パーツをフルード化する 42 video
  43. 43. 43 ●エラスティックビデオと言うらしい。  iframeを囲んでるdivに「position:relative」、  iframeに「position:absolute」を指定すると  iframeはdivを基準とする。 video 5. パーツをフルード化する http://webdesignerwall.com/tutorials/css-elastic-videos
  44. 44. 5. パーツをフルード化する 44 font
  45. 45. 45 ●ウインドウサイズが小さくなるにつれて文字サイズは  小さくなった方がいいみたい。 ●em,remで指定するといい。 ●px = 1pxが1とする大きさ 【固定】 ●em = 基準となるフォントサイズが1em 【可変】 ●rem = ルート(html要素)を基準  【可変】 ●メディアクエリでhtml要素に%でサイズを指定してする事で  基準を変える font 5. パーツをフルード化する
  46. 46. 46 5. HTML5、CSS3はどうすんの? 5. HTML5、CSS3への対応
  47. 47. 47 <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <meta name="keywords" content="*"> <meta name="description" content="*"> <title>***</title> <link rel="stylesheet" type="text/css" href="/common/css/style.css" media="all"> <script type="text/javascript" src="/common/js/jquety.js"></script> <script type="text/javascript" src="/common/js/common.js"></script> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="/common/css/ie.css" media="all"> <script src="/common/js/html5shiv-printshiv.js"></script> <![endif]--> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <section>コンテンツ</section> </body> </html> 1. HTML5、CSS3への対応
  48. 48. 48 <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <meta name="keywords" content="*"> <meta name="description" content="*"> <title>***</title> <link rel="stylesheet" type="text/css" href="/common/css/style.css" media="all"> <script type="text/javascript" src="/common/js/jquety.js"></script> <script type="text/javascript" src="/common/js/common.js"></script> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="/common/css/ie.css" media="all"> <script src="/common/js/html5shiv-printshiv.js"></script> <![endif]--> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <section>コンテンツ</section> </body> </html> ❶ ❷ ❸ ❹ ❺ 1. HTML5、CSS3への対応
  49. 49. 49 ❶ IE条件付きコメント IEのバージョンにあわせて表示非表示できるのでclassをふってる 2014年1月で開発は終了。 ❸ ビューポートの指定 コンテンツ幅に端末幅を合わせて初期倍率を1とする <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <meta name="viewport" content="width=device-width"> iOS5.1以前のバグ iillitial-scaleを1.0に指定すると縦横切り替え時に表示が1.5倍にズームされる対策 ❷ Chrome Frame for IE IEの古いバージョンでGoogleのレンダリングエンジンを利用できる プラグイン 1. HTML5、CSS3への対応
  50. 50. 50 ❹ 自動リンクを無効にする iPhoneのSafariには、HTML内の電話番号を検出して自動的にリンクする機能が あるけど電話番号以外の番号も検出するので無効化する ❺ HTML5の新要素を認識さる IE8以下はHTML5の新要素を認識できないので「 html5shiv.js 」で対応している http://code.google.com/p/html5shiv/ 1. HTML5、CSS3への対応
  51. 51. 51 CSS2 E > F (子要素にのみ適用) E + F (隣接している要素に適用) E[foo] (foo属性に適用) E[foo="bar"] (完全一致) E[foo~="bar"] (foo属性のbarに適用) E:first-child (最初のE要素に適用) E:before (E要素の前に生成される) E:after (E要素の後ろに生成される) CSS3 E ~ F (後にある要素に適用) E[foo*="bar"] (部分一致) E[foo^="bar"] (前方一致) E[foo$="bar"] (後方一致) 対応ブラウザがIE8からならいろいろ使えるよ 1. HTML5、CSS3への対応 属性セレクタ、疑似クラス
  52. 52. 52 box-sizing display: table display: inline-block DataURI 対応ブラウザがIE8からならいろいろ使えるよ 1. HTML5、CSS3への対応 プロパティ min-width max-width min-height max-height
  53. 53. 53 このあたりを見て確認してます。 http://fmbip.com/litmus/ http://caniuse.com/ 1. HTML5、CSS3への対応
  54. 54. 54 はまったこと 角丸とボックスシャドウを沢山使ったらIE8でめちゃくちゃ重たくな った… CSS3PIE Androidのline-heightが倍ぐらい指定されてずれる… 日本語Webフォント border-leftを指定すると上下の真ん中に反映される… safari border-radiusバグ IE8でimg要素に指定すると効かない… box-sizing
  55. 55. 55 はまったこと リストとかでするやつの時は親要素の幅がマイナスマージン分増え る… マイナスマージン 投稿一覧などがグリッドを繰り返し表示させる場合、折り返しの時 困った… CMSの動的箇所 画像が読み込まれてから実行しないと幅高さが取得できないので気 をつける 高さそろえるjs 結構やりなおした… @mediaの指定
  56. 56. あると便利なやつ 56 あると便利なやつ
  57. 57. あると便利なやつ 57 レスポンシブ確認作業
  58. 58. 58 http://html.adobe.com/jp/edge/inspect/ あると便利なやつ Adobe Edge Inspect CC 複数のモバイル端末の確認に良い
  59. 59. 59 http://bradfrostweb.com/demo/ish/ あると便利なやつ .ish さまざまなスクリーンサイズで確認出来る
  60. 60. 60 http://lab.maltewassermann.com/viewport-resizer/ あると便利なやつ VIEWPORT RESIZER ブラウザから指定のデバイスへリサイズして確認で
  61. 61. 61 あると便利なやつ VIEWPORT RESIZER
  62. 62. 62 あると便利なやつ VIEWPORT RESIZER
  63. 63. 63 あると便利なやつ 作業効率化
  64. 64. 64 http://emmet.io/ あると便利なやつ Emmet HTML,CSSを簡略化して書ける
  65. 65. 65 http://sass-lang.com/ http://compass-style.org/ あると便利なやつ Sass Compass CSSのメタ言語 Sassの拡張みたいなの
  66. 66. 66 さらに、スタイルガイドを作成する事によって 効率アップ!! あると便利なやつ
  67. 67. 67 http://jacobrask.github.io/styledocco/ あると便利なやつ Style Docco サイトごとにスタイルガイドが作成出来る
  68. 68. 68 あると便利なやつ
  69. 69. 69 あると便利なやつ あとはCSSを圧縮して、 画像の圧縮をして… んでんで…
  70. 70. 70 あると便利なやつ する事がいっぱいで面倒くさい。
  71. 71. 71 あると便利なやつ 面倒な作業を自動化する
  72. 72. 72 http://gruntjs.com/ あると便利なやつ GRUNT Javascriptのタスクランナー
  73. 73. 73 あると便利なやつ •cssの圧縮 •ファイルをつなぎ合わせる •Sassのwatch •ファイルの削除 •@mediaをまとめる •watchのエラー •スタイルガイドの作成 •画像の圧縮 •CSSLint この辺をまとめてます。
  74. 74. ありがとうございました。

×