![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への対応](https://image.slidesharecdn.com/rwd-130914100454-phpapp02/85/Web-vol-5-47-320.jpg)
![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への対応](https://image.slidesharecdn.com/rwd-130914100454-phpapp02/85/Web-vol-5-48-320.jpg)
![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への対応
属性セレクタ、疑似クラス](https://image.slidesharecdn.com/rwd-130914100454-phpapp02/85/Web-vol-5-51-320.jpg)
レスポンシブWebデザイン@マカベンvol.5
- 7. 本日の内容 7 いえ…
- 9. 本日の内容 9 • ミャってするには • はまったこと • あるといいやつ
- 11. ミャってするにはどうする？ 11 1. メディアクエリはどうすんの？ 2. グリッドはどうすんの？ 3. 画像はどうすんの？ 4. tableとかパーツはどうすんの？ 5.HTML5、CSS3はどうすんの？ みんな気になる「5大どうすんの？」
- 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. メディアクエリ
- 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,デスクトップから指定す
- 23. 23 修正が大変(´；ω；｀)ﾌﾞﾜｯ 修正が大変(´；ω；｀)ﾌﾞﾜｯ 1. メディアクエリ 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する メディアクエリを記述する場所は？
- 24. 24 修正が大変(´；ω；｀)ﾌﾞﾜｯ 修正が大変(´；ω；｀)ﾌﾞﾜｯ 管理しやすい(・∀・)♪ 1. メディアクエリ 1,メディアクエリごとに記述 2,link要素に指定する 3,パーツ単位で記述する メディアクエリを記述する場所は？
- 25. 25 パーツ単位で記述すると良い。 ●管理しやすく修正が楽。 ●@mediaが増えるのが嫌なら「Grunt」を 使ってまとめる事も出来る。 メディアクエリを記述する場所は？ 1. メディアクエリ
- 35. 35 レスポンシブイメージ 3. フルードイメージ max-width backgroundに指定する Response.jsを使う img { max-width: 100%; } .ie8 img {width: auto; height: auto;} Response.jsを使うとよさそう サイズごとに画像を用意する
- 45. 45 ●ウインドウサイズが小さくなるにつれて文字サイズは 小さくなった方がいいみたい。 ●em,remで指定するといい。 ●px = 1pxが1とする大きさ 【固定】 ●em = 基準となるフォントサイズが1em 【可変】 ●rem = ルート（html要素）を基準 【可変】 ●メディアクエリでhtml要素に%でサイズを指定してする事で 基準を変える font 5. パーツをフルード化する
- 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
- 58. 58 http://html.adobe.com/jp/edge/inspect/ あると便利なやつ Adobe Edge Inspect CC 複数のモバイル端末の確認に良い
- 59. 59 http://bradfrostweb.com/demo/ish/ あると便利なやつ .ish さまざまなスクリーンサイズで確認出来る
- 65. 65 http://sass-lang.com/ http://compass-style.org/ あると便利なやつ Sass Compass CSSのメタ言語 Sassの拡張みたいなの
- 68. 68 あると便利なやつ
- 74. ありがとうございました。