1. レスポンシブ
webデザイン＠マカベンvol.5

2. 自己紹介
2
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/

3. 自己紹介
3
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
水族館のサイトを作りたいです。

4. 本日の内容
4
レスポンシブwebデザインの話
∼ブラウザ幅でミャッとね∼

5. 本日の内容
5
レスポンシブwebデザインとは

6. 本日の内容
6
レスポンシブwebデザインとは
PC、タブレット、スマートフォンなどの
あらゆるデバイスに…

7. 本日の内容
7
いえ…

8. 本日の内容
8
今日は、ミャってしたいんです！

9. 本日の内容
9
• ミャってするには
• はまったこと
• あるといいやつ

10. ミャってするにはどうする？
10
レスポンシブ対応する時に
気になることは？

11. ミャってするにはどうする？
11
1. メディアクエリはどうすんの？
2. グリッドはどうすんの？
3. 画像はどうすんの？
4. tableとかパーツはどうすんの？
5.HTML5、CSS3はどうすんの？
みんな気になる「5大どうすんの？」

12. 1. メディアクエリ
12
1. メディアクエリはどうすんの？

13. 13
@media メディアタイプ and (条件){ }
1. メディアクエリ

14. 14
1. メディアクエリ
@media screen and (min-width: 940px) {
.media-box {
background: #999;
}
}
@media メディアタイプ and (条件){ }

15. 15
メディア特性論理演算メディアタイプ
1. メディアクエリ
@media メディアタイプ and (条件){ }
@media screen and (min-width: 940px) {
.media-box {
background: #999;
}
}

16. 16
@media メディアタイプ and (条件){ }
1. メディアクエリ

17. 17
メディアクエリの指定方法は？
1. メディアクエリ
メディアクエリを記述する場所は？

18. 18
メディアクエリの指定方法は？
1,モバイルから指定する 2,デスクトップから指定す
1. メディアクエリ

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
メディアクエリはデスクトップから指定すると良い。
●デスクトップから指定する事でIE8以下は今まで通りに対応できる。
●IE8以下にレスポンシブ対応をしなくていい。
●デスクトップ以下にIE8以下で使えないCSS3の要素を使える。
デメリットとして上書きする箇所などあり記述に無駄があるが、
現状、IE8以下などを考えるとこれが良い。
1. メディアクエリ
メディアクエリの指定方法は？

21. 21
1,メディアクエリごとに記述 2,link要素に指定する
3,パーツ単位で記述する
1. メディアクエリ
メディアクエリを記述する場所は？

22. 22
修正が大変(´；ω；｀)ﾌﾞﾜｯ
1. メディアクエリ
1,メディアクエリごとに記述 2,link要素に指定する
3,パーツ単位で記述する
メディアクエリを記述する場所は？

23. 23
修正が大変(´；ω；｀)ﾌﾞﾜｯ 修正が大変(´；ω；｀)ﾌﾞﾜｯ
1. メディアクエリ
1,メディアクエリごとに記述 2,link要素に指定する
3,パーツ単位で記述する
メディアクエリを記述する場所は？

24. 24
修正が大変(´；ω；｀)ﾌﾞﾜｯ 修正が大変(´；ω；｀)ﾌﾞﾜｯ
管理しやすい(・∀・)♪
1. メディアクエリ
1,メディアクエリごとに記述 2,link要素に指定する
3,パーツ単位で記述する
メディアクエリを記述する場所は？

25. 25
パーツ単位で記述すると良い。
●管理しやすく修正が楽。
●@mediaが増えるのが嫌なら「Grunt」を
使ってまとめる事も出来る。
メディアクエリを記述する場所は？
1. メディアクエリ

26. 26
現状はデスクトップから指定する方が現実的なのではと思う。
IE8以下を無視してよくなったらモバイルから指定すると良いのでは。
更新を考えると@mediaを分けて記述するのはやめた方がいいので
パーツ単位で書きましょう。
メディアクエリまとめ
1. メディアクエリ

27. 27
https://github.com/scottjehl/Respond https://code.google.com/p/
css3-mediaqueries-js/
IE8以下はメディアクエリを使えないので対応したい場合は
この辺りがよさそう
1. メディアクエリ

28. 2. フルードグリッド
28
2. グリッドはどうすんの？

29. 29
フルードグリッドに必要なもの
box-sizing:border-box; グリッドデザイン
2. フルードグリッド
widthの値をpaddingやborderを
含めたて計算する。
12グリッドとか16グリッドとか
カラム幅の計算
1,幅から計算する
2,カラム数から計算する

30. 30
1,幅から計算する 2,カラム数から計算する
求める幅÷親要素の幅x100=値
ガターはマージン
計算が面倒
他のサイトに使い回しにくい
求めるカラム数÷全体のカラム数
x100=値
ガターはパディング
計算が楽
他のサイトに使い回しやすい
Bootstrapはこっちを使ってる
2. フルードグリッド
フルードグリッドの計算

31. 31
1,幅から計算する 2,カラム数から計算する
デザインが先にあって
その後コーディングって流れは
こっちが良い気がする
デザイニングインザブラウザって
呼ばれるような方法主流になったら
こっちが良いかも
2. フルードグリッド
フルードグリッドの計算

32. 32
サイトごとに幅から計算するほうが良いと思うが、
カラム数から計算したグリッドを使ってないので
なんとも言えないです…
デメリットとしてサイトごとに使い回しにくいが、
なんだかんだその都度計算して作った方がやりやすい気がする。
計算は場合はsassのmixinを作っておくと便利。
フルードグリッドまとめ
2. フルードグリッド

33. 33
http://gridpak.com/
Gridpark
幅から計算する時にいい
2. フルードグリッド
http://griddle.it/
Griddle.it
コーディングするとき背景に敷く
画像を簡単に指定できる
このへんを使うとやりやすい。

34. 3. フルードイメージ
34
3. 画像はどうすんの？

35. 35
レスポンシブイメージ
3. フルードイメージ
max-width backgroundに指定する
Response.jsを使う
img {
max-width: 100%;
}
.ie8 img {width: auto; height: auto;}
Response.jsを使うとよさそう
サイズごとに画像を用意する

36. 36
max-width:100%を指定する。
●IE8はmax-widthの対応が不完全なので個別に対応
メディアクエリごとに切り替える場合は
backgroundに指定するか、Response.jsを使うとよい。
レスポンシブイメージまとめ
3. フルードイメージ

37. 4. パーツをフルード化する
37
4. tableとかパーツはどうすんの？

38. 5. パーツをフルード化する
38
table

39. 39
●そのまま
デメリット：小さくなると見にくい
●display:block
デメリット：縦にながくなる
●overflow-x
●theadを左に回り込み
デメリット：スクロールがわかりずらい
table
5. パーツをフルード化する

40. 5. パーツをフルード化する
40
form

41. 41
●入力フィールドは100%にしたら枠からはみ出るので
box-sizing:border-boxを記述するといい
●iOSのデフォルトのスタイルを消す
-webkit-appearance:none
form
5. パーツをフルード化する

42. 5. パーツをフルード化する
42
video

43. 43
●エラスティックビデオと言うらしい。
iframeを囲んでるdivに「position:relative」、
iframeに「position:absolute」を指定すると
iframeはdivを基準とする。
video
5. パーツをフルード化する
http://webdesignerwall.com/tutorials/css-elastic-videos

44. 5. パーツをフルード化する
44
font

45. 45
●ウインドウサイズが小さくなるにつれて文字サイズは
小さくなった方がいいみたい。
●em,remで指定するといい。
●px = 1pxが1とする大きさ 【固定】
●em = 基準となるフォントサイズが1em 【可変】
●rem = ルート（html要素）を基準 【可変】
●メディアクエリでhtml要素に%でサイズを指定してする事で
基準を変える
font
5. パーツをフルード化する

46. 46
5. HTML5、CSS3はどうすんの？
5. HTML5、CSS3への対応

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
<!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
❶ 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
❹ 自動リンクを無効にする
iPhoneのSafariには、HTML内の電話番号を検出して自動的にリンクする機能が
あるけど電話番号以外の番号も検出するので無効化する
❺ HTML5の新要素を認識さる
IE8以下はHTML5の新要素を認識できないので「 html5shiv.js 」で対応している
http://code.google.com/p/html5shiv/
1. HTML5、CSS3への対応

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
box-sizing
display: table
display: inline-block
DataURI
対応ブラウザがIE8からならいろいろ使えるよ
1. HTML5、CSS3への対応
プロパティ
min-width
max-width
min-height
max-height

53. 53
このあたりを見て確認してます。
http://fmbip.com/litmus/ http://caniuse.com/
1. HTML5、CSS3への対応

54. 54
はまったこと
角丸とボックスシャドウを沢山使ったらIE8でめちゃくちゃ重たくな
った…
CSS3PIE
Androidのline-heightが倍ぐらい指定されてずれる…
日本語Webフォント
border-leftを指定すると上下の真ん中に反映される…
safari border-radiusバグ
IE8でimg要素に指定すると効かない…
box-sizing

55. 55
はまったこと
リストとかでするやつの時は親要素の幅がマイナスマージン分増え
る…
マイナスマージン
投稿一覧などがグリッドを繰り返し表示させる場合、折り返しの時
困った…
CMSの動的箇所
画像が読み込まれてから実行しないと幅高さが取得できないので気
をつける
高さそろえるjs
結構やりなおした…
@mediaの指定

56. あると便利なやつ
56
あると便利なやつ

57. あると便利なやつ
57
レスポンシブ確認作業

58. 58
http://html.adobe.com/jp/edge/inspect/
あると便利なやつ
Adobe Edge Inspect CC
複数のモバイル端末の確認に良い

59. 59
http://bradfrostweb.com/demo/ish/
あると便利なやつ
.ish
さまざまなスクリーンサイズで確認出来る

60. 60
http://lab.maltewassermann.com/viewport-resizer/
あると便利なやつ
VIEWPORT RESIZER
ブラウザから指定のデバイスへリサイズして確認で

61. 61
あると便利なやつ
VIEWPORT RESIZER

62. 62
あると便利なやつ
VIEWPORT RESIZER

63. 63
あると便利なやつ
作業効率化

64. 64
http://emmet.io/
あると便利なやつ
Emmet
HTML,CSSを簡略化して書ける

65. 65
http://sass-lang.com/ http://compass-style.org/
あると便利なやつ
Sass Compass
CSSのメタ言語 Sassの拡張みたいなの

66. 66
さらに、スタイルガイドを作成する事によって
効率アップ！！
あると便利なやつ

67. 67
http://jacobrask.github.io/styledocco/
あると便利なやつ
Style Docco
サイトごとにスタイルガイドが作成出来る

68. 68
あると便利なやつ

69. 69
あると便利なやつ
あとはCSSを圧縮して、
画像の圧縮をして… んでんで…

70. 70
あると便利なやつ
する事がいっぱいで面倒くさい。

71. 71
あると便利なやつ
面倒な作業を自動化する

72. 72
http://gruntjs.com/
あると便利なやつ
GRUNT
Javascriptのタスクランナー

73. 73
あると便利なやつ
•cssの圧縮
•ファイルをつなぎ合わせる
•Sassのwatch
•ファイルの削除
•@mediaをまとめる
•watchのエラー
•スタイルガイドの作成
•画像の圧縮
•CSSLint
この辺をまとめてます。

74. ありがとうございました。