cssの基本的な書式

用語等めも

• @規則(アットルール) : @import,@charset,@media,@pageなどがある。
• @pageとは、通常のスクロールして表示する連続メディアではなく、ページボックスによって改ページによってアクセスするページメディアに対してのスタイルを指定する。
  ページメディアはembossed(点字),print(プリンタ),projection(プロジェクタ)を指す。handheld(携帯),tvはページメディアと連続メディアどちらの特性もあるとされる。
  指定できるスタイルはmargin,orphnas,windows,page-break-before,page-break-inside,page-break-afterだけで、それ以外は無効。参照元

コメント：/*...*/

スタイルの適用要素: 各プロパティはどれもすべての要素に適用されるわけではない。プロパティによって適用される要素が決められる。

スタイルの継承: プロパティには、親要素に指定した値が子要素に継承されるものとされないものがある。また、強制的に継承させるためのキーワード「inherit」がある。

スタイルの優先順位: CSSで指定する優先順位は様々なルールから最終的な優先順位が決定される。適用方法(外部スタイルシートかどうかなど)、制作者(文書制作者のスタイルかどうかなど)、最優先スタイル(!importantしていがあるか)、とか...。

セレクタ

セレクタのグループ化 : カンマで区切る。e.g.) h1,h2,h3 { color: blue; }

タイプセレクタ : 要素名のみのセレクタ。e.g.) h1 { color: blue; }

ユニバーサルセレクタ : *をセレクタとし、全ての要素に対してスタイルを適用する。e.g.) * { color: blue; }

属性セレクタ :

• 要素名[属性名] e.g.) h1[title] { color: blue; }
• 要素名[属性名="値"] e.g.) span[class="example"] { color: blue; }
• 要素名[属性名~="値"]:値が空白区切りで複数あった場合、そのうち1つに一致すれば適用される。 e.g.) span[class~="example"] { color: blue; }
• 要素名[属性名|="値"]:値がハイフン区切りで複数あった場合、そのうち1つが指定の値で始まっていれば適用される。一般的にlang属性で指定した言語の属性をセレクタとする場合に使われる。 e.g.) *[lang|="en"] { color: blue; } (※en,en-US,en-cockneyなどに適用)
• 要素名[属性名^="値"]:属性の値が指定の値で始まっている要素に対して適用。 e.g.) a[href^="http"] { background-color: gold; }
• 要素名[属性名$="値"]:属性の値が指定の値で終わる要素に対して適用。 e.g.) a[href$=".php"] { background-color: gold; }
• 要素名[属性名*="値"]:属性の値の中に指定の値でを含む要素に対して適用。 e.g.) p[title*="hello"] { color: blue; }

クラスセレクタ : 要素名.クラス名 の形式をクラスセレクタという。(class属性の値は複数の要素で同じものが指定可能) e.g.) *.pastral { color: blue; }

IDセレクタ : 要素名#id名 の形式。(id属性は文書内でユニーク) e.g.) h1#chapter1 { color: blue; }

擬似クラス(要素の状態や特徴で分類するもの。):

• 要素名:link -- まだ見ていない(キャッシュされてない)ページへのリンクにスタイルを適用。
• 要素名:visited -- すでに見た(キャッシュされている)ページへのリンクにスタイルを適用
• 要素名:hover -- 要素にマウスカーソルなどのポインティングデバイスが重なった(まだアクティブでない)ときに適用。
• 要素名:active -- 要素を選択した(クリックなど)ときに適用。
• 要素名:focus -- 要素にフォーカスが移った時に適用。
• 要素名:target -- <a href="#pos1">のような特定の位置へ移動するリンクがあり、そのリンクをアクティブにした場合、移動先となる要素に対してスタイルを適用。
  e.g.) p:target { border: 1px dotted blue; } ※移動先p要素にスタイルが適用される
• 要素名:lang(en) -- lang属性の値が指定された言語コードで始まっている要素に対して適用。 e.g.) *:lang(en) { font-family: Verdana,Arial,sans-serif; } ※lang=en,en-US,en-conckneyなどに適用
• 要素名:enabled -- 有効な要素(disabled属性が指定されてない)に対して適用。
• 要素名:disable -- 無効な要素(disabled属性が指定されてる)に対して適用。
• 要素名:checked -- ラジオボタンやチェックボックスが選択された状態のときに適用
• 要素名:root ー 文書内のルート要素に対して適用。html文書ではhtml要素。
• 要素名:nth-child(式) ー 親要素内のn番目の子要素ごとにスタイルを適用。要素名にはその子要素を指定する。但し、何番目かを数える際は全ての要素が対象。式には「an+b」書式や「odd(奇数)」、「even(偶数)」を指定できる。例えば、oddは2n+1と同じで、evenは2nと同じになる。(nは0以上の整数) e.g.) tr:nth-child(2n+1) { background-color: #9999ff; }
• 要素名:nth-last-child(式) ー nth-childの後ろから数えるバージョン。
• 要素名:nth-of-type() ー nth-child擬似クラスとは異なり、要素名に指定した以外の他の種類の兄弟要素は数えない。
• 要素名:nth-last-of-type() ー nth-last-child擬似クラスとは異なり、要素名以外の他の種類の要素は数えない。
• 要素名:first-child ー 指定した要素が、親要素の中の最初の子要素である場合に適用。nth-child(1)と同様。他の種類の要素が最初にある場合は適用外。
• 要素名:last-child ー 指定した要素が、親要素の中の最後の子要素である場合に適用。nth-last-child(1)と同様。他の種類の要素が最後にある場合は適用外。
• 要素名:first-of-type ー first-childとは異なり、要素名に指定した要素だけを見るので、指定以外の要素が最初にあっても、指定要素の最初の要素が適用対象となる。
• 要素名:last-of-type ー 上を参照。メンドイ...
• 要素名:only-child ー 指定した要素が、親要素の中の唯一の子要素である場合に適用
• 要素名:only-of-type ー 指定した要素が親要素の中で1つしかない場合に適用。指定以外の要素なら兄弟にあっても良い。
• 要素名:empty ー 子要素や要素内容を持たない要素に対して適用 e.g.) td:empty { background: gray; } ※<td></td>の場合に適用
• 要素名:not(セレクタ) ー 指定したセレクタとは一致しない要素に対してスタイルを適用。 e.g.) p:not(.sample) { color: navy; } ※class=“sample1”が指定されてないp要素に適用。(1ってなんだろ？)

擬似要素（htmlの要素では表せない性質に対してスタイルを適用するもの。擬似クラスは指定要素の集合から特定の要素を選択する形だが、擬似要素は要素としては表せない内容、つまり要素内の部分的な内容を対象とするもの、、でいいのか?）※css2.1ではコロン1つcss3ではコロン2つなんで注意らしい :

• 要素名::first-line ー 指定した要素の最初の1行にスタイルを適用。
• 要素名::first-letter ー 指定した要素の最初の1文字に適用
• 要素名::before, 要素名::after ー 要素の直前(before)/直後(after)に生成追加される内容に適用。contentプロパティと共に使用する。

セレクタの組み合わせ（親兄弟や前後関係などで適用対象を選べる。擬似クラスと似てるが、組合せなら dev:enabled input:focus { color: red; } などのようにできるってことかね?。。ただし、擬似要素については最後のセレクタにのみ適用されるらしい。つまり適用されるのは最後、一番右側に書いた要素に対して適用されるってことだね。）:

• 結合子が半角スペース: 親要素に含まれる子・孫要素に対して適用。e.g.) h1 em {color:red;} ※h1要素に含まれるem要素に適用される
• 結合子が > : 親要素の直接の子要素に対して適用(孫不可)。e.g.) body > p {font-size:medium;}
• 結合子が + : 同じ親を持つ兄弟要素のうち、ある要素のすぐ後に現れる要素(直接の弟要素)に対して適用。e.g.) h1 + h2 {font-style:italic;} ※h1要素のすぐ後にh2要素がある場合に適用される
• 結合子が ~ : 同じ親を持つ兄弟要素のうち、ある要素の後に現れる要素に対して適用する。すぐ後でなくても構わない。e.g.) h1 ~ pre {color:blue;}

html文書への適用方法

その文書のデフォルトのスタイルシートを指定する必要がある。(ということは要素ごとに指定しようと思えばできるってことか）。html文書でcssをデフォとする場合は、head要素内に、<meta http-equiv=“Content-Style-Type” content=“text/css”>と記述する。因みに、html5ではcssがデフォルトのスタイルシート言語となっているため、この記述は不要。

適用方法(推奨は柔軟性の高い外部スタイルシート)

• style属性で要素に直接スタイルを指定する e.g.) <h1 style=“color: #003366; background-color:#99ccff;”>CSSとは</h1>
• style要素で文書中にまとめて指定。
  e.g.)
  <style type=“text/css”>
   h1 { color: #003366; ... }
  </style>
• link要素で外部スタイルファイルを読み込む。e.g.) head要素内に.. <link rel=“stylesheet” href=“sample.css” type=“text/css”>※html5ではtype=“text/css”を省略できる。
• @importで外部スタイルシートを読込む。@import “sample.css”; や @import url(sample.css); という書式で読込む。他の外部ファイルや、html文書のstyle要素内に記述して利用する。てことはスタイルファイルを階層化できるってことか。。

外部スタイルファイルの文字コードは@charsetで指定する。
e.g.)
@charset “UTF-8”;
h1 {
 color:whilte;
}

メディアクエリー

• link要素のmedia属性で指定。e.g.) <link rel=“stylesheet” type=“text/css” media=“screen” href=“sans-serif.css”>
• @importのファイルのURLの後ろにメディアタイプを指定。e.g.) @import url(sans-serif.css) screen;
• @mediaでスタイルシートの一部に対しメディアタイプを指定。e.g.) @media screen { body { font-family: sans-serif; } } ※これはスタイルシートに直に記述するタイプか。

メディアクエリーはメディアタイプなどをcss3で拡張したもの。メディアタイプとメディア特性、論理演算子を利用してより細かくメディア条件を設定できる。

基本的な書式: メディアタイプ and (メディア特性: 値) and (メディア特性: 値) ...
e.g.ⅰ) screen and (color) ※カラー環境のスクリーン
e.g.ⅱ) screen and (min-width: 400px) and (max-width: 700px) ※400ピクセル以上700ピクセル以下

複数指定はカンマ区切り。e.g.) @media screen and (color), projection and (color) {...}
notで否定。これはメディアクエリに指定された条件以外の環境を示すもので、メディアタイプ(screen等)を否定するものでは無いので注意！e.g.) @media not screen and (color) {...} ※カラー環境以外のスクリーンを意味する。
メディアクエリー非対応ブラウザに当該スタイルを適用させない、only。e.g.) @media only screen and (color) {...} 対応しているブラウザではonlyが無視される。恐らくonlyは、初期css勧告時に後々新機能を追加しやすくするためのキーワードで、onlyが付いている宣言(ブロック)は、宣言構文に非対応なら宣言自体を無効とするものとするものだと思う。。

使用例

• <link rel=“stylesheet” type=“text/css” media=“screen and (color)” href=“example.css”>
• @import url(example.css) screen and (color);
• @media screen and (color) {...}

ボックスモデル

ボックスの構成を下記に示す。上にあるものほど、前面に表示される

内容領域

要素の内容が表示される領域。width/heightプロパティで指定したサイズは、この領域に適用される。但し、box-sizingプロパティにborder-boxを指定すると、width/heightの値はボーダーボックスのサイズになる。

パディング

内容領域とボーダーの間の領域

パディングボックス

css3で規定されたパディング辺より内側の領域。パディング領域と内容領域を含む

ボーダー

要素の周りに表示される枠線。ここまでが、要素に指定した背景画像や背景色が適用される範囲。

ボーダーボックス

css3で規定されたボーダー辺から内側の領域。

マージン

ボーダーの外側に設定される空白領域。要素に指定した背景は適用されない(親要素の背景が見える)。

上下に隣接したボックスがある場合、それらのマージンは相殺されて多い方が設定される。が下記のようなルールがある。(ん、つまりマージンは上下で重なるのが前提ってこと?) 。ボックス間の左右のマージンは相殺されない。

• どちらもプラスの値の場合は、大きい方の値を適用する。
• プラスの値とマイナスの値の場合は、両方を足し合わせた値を適用する(プラス+マイナス)
• どちらもマイナスの場合は、小さい方の値を適用する。

単位や色など

単位の指定方法

• 相対単位
  • em : その要素のfont-sizeの値を1とする単位。font-size自身にemが使われた場合は、親要素のfont-sizeを1とする。親要素がなければブラウザの規定値。e.g.) h1 { margin: 1em; }
  • ex : その要素のフォントのx-height(小文字xの高さ)の値を1とする単位。font-size自身にexが使われた場合は親要素の小文字xの高さ、親要素がなければブラウザ規定値の小文字xの高さを基準とする。
  • px : PCディスプレイの1ピクセルを1とする単位。(ディスプレイの解像度に対し相対的)
  以下はcss3で追加された単位。vw,vh,vmin,vmaxはビューポート(ブラウザのコンテンツが表示される領域)のサイズを基準とするため、ブラウザのウィンドウサイズを変更すると、値も変更される。
  • ch : その要素で使われるフォントの「0」の幅を1とする単位。
  • rem : ルート要素のfont-sizeの値を1とする単位。ルート要素のfont-size自身にremが使われた場合、ルート要素の初期値を基準とする。
  • vw : ビューポートの幅を100とする単位。
  • vh : ビューポートの高さを100とする単位
  • vmin : vwとvhのどちらか小さい方と同じ
  • vmax : vwとvhのどちらか大きい方と同じ
• パーセント値

  % : 他の値に対する割合で、長さや大きさを指定。e.g.) p { font-size: 120%; }

色の指定方法

• RGB
  • #rrggbb : r,g,bをそれぞれ00〜ffの16進数2桁で表す。
  • #rgb : r,g,bをそれぞれ00〜ffの16進数1桁で表す。これは #fb0 → #ffbb00 というように2桁に変換されてから色が表現される。
  • rgb(n, n, n) : r,g,bの値を10進数の整数で指定。
  • rgb(n%, n%, n%) : r,g,bの値をパーセントで指定。

• RGBA

  RGBに不透明度を表すアルファ値を加えた指定方法。0.0〜1.0の間で指定。16進数指定はできない。
  e.g.ⅰ) p { color: rgba(0, 0, 255, 0.5) }
  e.g.ⅱ) p { color: rgba(100%, 50%, 0%, 0.1) }

• HSL

  HSL色空間に基づく指定方法。e.g.) p { color: hsl(0, 100%, 50%) } ※赤

  Hue(色相)

  色合いをカラーサークル(色相環)上の角度で指定。赤0/360,緑120,青240

  Saturation(彩度)

  色鮮やかさ(色みの強さ)の度合いを、0%(無彩色)〜100%(純色)の範囲で指定する。

  Lightness/Luminance(輝度)

  色の明るさの度合いを、0%(黒)〜100%(白)の範囲で指定。(50%が純色)

• HSLA

  HSLにアルファ値を加えた指定方法。0.0〜1.0の間でアルファ値を指定。e.g.) p { color: hsla(240, 100%, 50%, 0.5) }

• 色名

  色名で指定。大文字小文字は区別されない。

• currentColor

  当該要素のcolorプロパティに指定されている色を指定。

• transparent

  透明を指定

• システムカラー

  ユーザーのOSに設定されているシステムカラーをキーワードとして指定。但しCSS3では非推奨

角度の指定方法

• deg : 度(度数法に基づく角度。360deg=1回転) e.g.) div { transform: rotate(45deg); }
• grad : グラード(グラード法に基づく角度。400grad=1回転)
• rad : ラジアン(ラジアン法/弧度法に基づく角度。2π rad=1回転)
• turn : 回転(1turn=1回転)

URLの指定方法

CSSでURL(URI)やファイルの位置を指定する場合には、url() を使用し、絶対url,相対urlで記述する。また、引用符("や')で括ることもできる。