Cat Paw Software

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== CSS ======
===== セレクタ =====
  * [[http://www.w3.org/TR/css3-selectors/#selectors|Selectors Level 3]]

==== セレクタのタイプ ====

|*|全て|
|E|要素セレクタ|
|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|
|E:not(s)|否定疑似クラスセレクタ、sで指定したセレクタに該当しないE|

==== 属性セレクタ ====

|E[attr]|attr属性を持つE要素|
|E[attr="hoge"]|値がhogeであるattr属性を持つE要素|
|E[attr*="hoge"]|値がhogeに部分一致するattr属性を持つE要素|
|%%E[attr^="hoge"]%%|値がhogeに前方一致するattr属性を持つE要素|
|E[attr$="hoge"]|値がhogeに後方一致するattr属性を持つE要素|
|E[attr~="hoge"]|値がhogeであるattr属性を持つE要素、値を複数もつ場合はどれか一つが一致すればよい|
|%%E[attr|="hoge"]%%|値をハイフン区切りし、そのうちどれかがhogeであるattr属性を持つE要素|

==== 疑似クラスセレクタ ====

|E:root|ルート要素、HTML文書ではhtml要素のこと|
|E:nth-of-type(n)|兄弟要素中のE要素でn番目のもの|
|E:nth-last-of-type(n)|兄弟要素中のE要素で後ろからn番目のもの|
|E:first-of-type|兄弟要素中のE要素で最初のもの ＝ E:nth-of-type(1)|
|E:last-of-type|兄弟要素中のE要素で最後のもの ＝ E:nth-last-of-type(1)|
|E:only-of-type|兄弟にE要素がひとつしかない場合、そのE要素|
|E:nth-child(n)|兄弟の中でn番目にあるE要素|
|E:nth-last-child(n)|兄弟の中で後ろからn番目にあるE要素|
|E:first-child|兄弟の中で最初の要素であるE|
|E:last-child|兄弟の中で最後の要素であるE|
|E:only-child|兄弟要素のないE要素|
|E:empty|子要素の無いE要素|
|E:link|リンク|
|E:visited|訪問済みリンク|
|E:active|アクティブ|
|E:hover|マウスオーバー|
|E:focus|フォーカス|
|E:target|ページ内リンクターゲット|
|E:lang(fr)|言語|
|E:enabled|有効|
|E:disabled|無効|
|E:checked|チェック|
|E:indeterminate|JavaScriptでindeterminateがtrueにされた場合|

xxxx-childとxxxx-of-typeは兄弟要素の中の位置、順番で指定する疑似クラス。childは全ての兄弟要素が数え上げの対象になるが、of-typeでは自分と同一種類の兄弟要素のみが数え上げの対象になる。
==== nth の指定方法 ====

an + b の形で指定できる（b + an はダメ、n = 0,1,2,3...、a, bは整数）

  * 2を指定すると2番目のみ 
  * 2nを指定すると偶数番目
  * evenを指定すると偶数番目（=> 2n と同じ）
  * oddを指定すると奇数番目（=> 2n + 1 または 2n - 1 と同じ）
  * 3nを指定すると3の倍数番目
  * 10n-1を指定すると、9、19, 29 .. 番目
  * n+2と指定すると2つ目の要素以降が対象（＝最初の要素を除外）
  * -n+4とすると最初の4つまでを指定（a = -1, b = 4）

nth-xxx では n に 0, 1, 2, 3, 4 ... を代入して選択される要素を計算する
 
  * 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 ====

いずれも兄弟要素の中の指定番目の要素を選択するもの

  * -of-typeは、自分と異なる兄弟要素を数えない。
  * -childは、自分と異なる兄弟要素も数える。

子要素がすべて同一の要素であれば、どちらを使っても同じである。

==== 疑似要素セレクタ ====

|E::first-line|E要素の１行目|
|E::first-letter|E要素の１文字目|
|E::after|E要素の後に生成された空間|
|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設定（拡大縮小の禁止設定） ====

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

==== iPhone、iPad用にCSS振り分け ====

<code html>
<!-- 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">
</code>