* Selectors Level 3

セレクタのタイプ * E#x - IDセレクタ * E.x - クラスセレクタ * E[x] - 属性セレクタ、属性値によって選択する * E:x - 疑似クラスセレクタ、ユーザ操作や要素の位置、数などで特定の状態である要素を選択する * E::x - 疑似要素セレクタ、HTMLの要素ではない部分を要素のようにを選択する * E1 E2 - 子孫セレクタ、E1の子孫要素であるE2 * E1 > E2 - 子セレクタ、E1の子要素であるE2 * E1 + E2 - 隣接セレクタ、E1の次の弟要素であるE2 * E1 ~ E2 - 間接セレクタ、E1の全ての弟要素であるE2

iPhone用のview port設定（拡大縮小の禁止設定）

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

iPhone、iPad用にCSS振り分け

<!-- iPhone -->
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css">
 
<!-- iPhone Not Retina -->
<link rel="stylesheet" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="iphone3.css">
 
<!-- iPhone Retina -->
<link rel="stylesheet" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css">
 
<!-- iPad -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="iPad.css">
 
<!-- iPad 縦表示 -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPadPortrait.css">
 
<!-- iPad 横表示 -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="iPadLandscape.css">
 
<!-- PC用 -->
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">