css

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- css [2012/03/05 05:04] – [疑似クラスセレクタ] nullpon
+++ css [2019/03/18 04:24] (現在) – [外観モードによる振り分け] nullpon
@@ 行 68: / 行 68: @@
   * -n+4とすると最初の4つまでを指定（a = -1, b = 4）
-nthの考え方
+nth-xxx では n に 0, 1, 2, 3, 4 ... を代入して選択される要素を計算する
-n = 0,1,2,3,4 ... のとき、2n+1 は 1,3,5,7,9... となるので奇数が選択される。また、-n+4 は 4,5,6,7,8 .... となるので4番目以降が選択される。n+2 は 2,3,4,5,6.... となるので最初の一つは選択されない。
+  * 2 は 2, 2, 2, 2, 2 ... なので、2番目のみが選択される（a = 0, b = 2、 0n + 2 と考える）
+  * n は 0, 1, 2, 3, 4 ... なので、全ての要素が選択される。
+  * 2n+1 は 1, 3, 5, 7, 9 ... となるので、奇数が選択される。
+  * -n+4 は 4, 3, 2, 1, 0, -1, -2 ... となるので最初の4つが選択される（0番目やマイナス番目の要素は存在しない）
+  * n+2 は 2, 3, 4, 5, 6 ... となるので２つ目以降が選択される
 ==== of-typeとchild ====
@@ 行 89: / 行 92: @@
 |E::before|E要素の前に生成された空間|
+===== CSS振り分け =====
+[[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries|メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN]]
+==== 外観モードによる振り分け ====
+OSのダークモードへの対応（Firefox 67以降など、2019年3月現在対応ブラウザなし）
+<code html>
+<!-- ライトモード、prefers-color-theme未対応の場合のCSS -->
+<link rel="stylesheet" href="light.css">
+<!-- ダークモードのCSS -->
+<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css">
+</code>
+==== iPhone用のview port設定（拡大縮小の禁止設定） ====
-===== CSS振り分け =====
-iPhone用のview port設定（拡大縮小の禁止設定）
 <code html>
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 </code>
-iPhone、iPad用にCSS振り分け
+==== iPhone、iPad用にCSS振り分け ====
 <code html>
 <!-- iPhone -->
@@ 行 120: / 行 136: @@
 <!-- PC用 -->
 <link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">
 </code>

css.1330923846.txt.gz · 最終更新: 2012/03/05 05:04 by nullpon