文書の過去の版を表示しています。

CSS

セレクタ

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

CSS振り分け

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">

Cat Paw Software

目次

CSS

セレクタ

CSS振り分け