Más contenido relacionado
La actualidad más candente (20)
Similar a レスポンシブWebデザイン@マカベンvol.5 (20)
レスポンシブWebデザイン@マカベンvol.5
- 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,デスクトップから指定す
- 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への対応
- 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への対応
属性セレクタ、疑似クラス