CSSとは

カスケーディングスタイルシート（Cascading Style Sheets）の略。
フォント、色、背景など、HTMLの見栄えを定義する言語です。
セレクタで「どの要素の」プロパティで「何を」値で「どうする」を表します。

CSSリファレンス

---

CSSのシンタックス

CSSの基本的なシンタックス（書式）は以下のとおりです。

• 1. スタイルを適用する対象をセレクタごとに { } で区切る。
• 2. プロパティと値を：（コロン）で分ける。
• 3. 値の最後に；（セミコロン）を付ける。

• ●  セレクタ { プロパティ:値; プロパティ:値; }
  ※ プロパティが複数の場合、改行または一行で区切る
  区切らない場合は「;」は省略できる。
  例：h1要素の行揃えをセンター、文字色を黒、背景色を白にする。

  h1{
  　text-align:center;
  　color:#000;
  　background-color:#fff;
  }
  

• ●  セレクタ,セレクタ { プロパティ:値 }
  ※ 複数のセレクタの場合は、半角カンマ「,」で区切る。
  例： h1 h2 h3 要素の文字サイズを120％にする。

h1,h2,h3 {
　font-size:120%; 
}

• ●  セレクタ { プロパティ: 値 値 値 }
  ※ 複数の値の場合は、半角スペースで区切る。
  例： a要素の下線を1pxの破線で黒にする。

a { 
　border-bottom:1px dashed #000; 
}

• ●  親要素 子要素 { プロパティ: 値 ; }
  ※ 特定の子要素（直接の下位要素）のみ定義する。
  例： div要素内のb要素のみ「文字色」を赤にする。

div b { 
　color:#f00;
}

---

CSSのコメントの挿入

CSSファイルにコメントを挿入する場合、テキストを /* と */ で囲みます。

/* ここはコメントです */

• ※ コメントは入れ子にすることはできない。
• ※ 外側は「*」ではなく「/」であること注意。

---

CSSの組み込み方法

CSSをHTMLに組み込む方法は大きくわけて3種類あります。
XHMLで上では、外部スタイルシートを参照する方法が推奨されている。

link要素で外部スタイルシートを読み込む

HTMLのhead要素内にlink要素を配置して、外部CSSを読み込ませる。
link要素は空要素で閉じタグは不要。
詳しく見る

style要素でHTMLのhead要素内に記述する

HTML内のhead要素内にstyle要素を配置して任意の属性で関連づける。
詳しく見る

style属性でHTMLのbody要素内に記述する

HTML内のbody要素内にある任意の要素に記述する。
{ } の替わりに " " を用いる。
詳しく見る

---

代替スタイルシートの設定

代替スタイルシートとは、link要素で指定することでユーザが任意で切り替えられるCSSです。作成側からみて固定、優先、代替の3つに分類されます。

固定スタイルシートとは

常に他の代替スタイルシートと一緒に適用しなければならない。
パーシステントスタイルシート（persistent style sheets）という。
・rel属性の値： stylesheet
・title属性の値： 指定なし
詳しく見る

優先スタイルシートとは

ユーザが別の代替スタイルシートを選択しない限り、優先スタイルシートが適用される。
プリファード スタイルシート（preferred style sheets）という。
・rel属性の値： stylesheet
・title属性の値： 指定あり
詳しく見る

代替スタイルシートとは

ユーザが任意に代替スタイルシートを選択する仕組みを提供する。
オルタネイト スタイルシート（alternate style sheets）という。
・rel属性の値： alternate stylesheet
・title属性の値： 指定あり
詳しく見る

xml-stylesheet処理命令 [1] で外部スタイルシートを参照する場合は、alternate疑似属性とtitle疑似属性を利用する必要があります。

---

セレクタによる指定

特定の要素に対してスタイルを適用するために、以下のセレクタを使います。

classセレクタとは

常に他の代替スタイルシートと一緒に適用しなければならない。
パーシステントスタイルシート（persistent style sheets）という。
詳しく見る

idセレクタとは

常に他の代替スタイルシートと一緒に適用しなければならない。
パーシステントスタイルシート（persistent style sheets）という。
詳しく見る

タイプセレクタとは

ある要素にスタイルを適用するときに使用する。要素セレクタともいう。

子孫セレクタとは

親要素に含まれる「すべての子要素」にスタイルを適用するときに使用する。下位要素セレクタともいう。

子セレクタとは

ある要素にスタイルを適用するときに使用する。要素セレクタともいう。

属性セレクタとは

属性セレクタは特定の属性名、属性値に対して適用する。要素のなかでもある属性名をもつ要素に対してスタイルを適用するとき、要素名[属性名]で指定する。

---

疑似クラスとは

疑似クラスとは、スタイルを適用する対象について、要素名や属性名などによって分類するのではなく「状況」によって分類するものです。a要素に適用する疑似クラスは以下のとおりで、順序はlink、visited、hover、active の順に記述する必要があります。

link疑似クラスとは

未訪問のリンク（例： a:link {color:red}）

visited疑似クラスとは

訪問済みのリンク（例： a:visited {color:blue}）

hover疑似クラスとは

オンマウスの状態（例： a:hover {color:yellow}）

active疑似クラスとは

クリックした状態（例： a:active {color:red}）

focus疑似クラスとは

キーボード操作でフォーカスされた状態（例： a:focus {color:yellow}）

※ 3.～5. は「ダイナミック疑似クラス」と呼ばれ、組み合わせて指定できる。
例：a:hover:focus {color:yellow}

---

カスケードとは

カスケードとは、スタイルを適用する優先順位のことです。
以下の順に優先度が決まります。

指定による優先順位

【1】 style属性による指定   例： <h1 style="color:green;">
【2】 style要素による指定   例： <style type="text/css">
【3】 link要素による外部CSS   例： link rel="stylesheet"…

環境とキーワードによる優先順位

【1】閲覧者（ユーザ）のCSS + !importantのキーワードを指定
【2】制作者のCSS + !importantのキーワードを指定
【3】制作者のCSS
【4】閲覧者（ユーザ）のCSS
【5】ユーザーエージェント（ブラウザ）のデフォルトCSS

セレクタによる優先順位

【1】 idセレクタ = 100pt  例： h1#01 {color:green;}
【2】 classセレクタ = 10pt  例： h1.title {color:green;}
【3】 タイプ（要素）セレクタ = 1pt  例： h1 {color:green;}

 ※ ユニバーサルセレクタ「*」は 0pt で加算されない。

※ 同じ優先順位でスタイルが衝突した場合、後に記述されたものが優先される。

---

ボックスモデルとは

ボックス（包含ブロック）とは、それぞれの要素について作られる四角形の領域のことです。ボックスは以下の領域から構成されます。

• ●  content（内容）
  
• ●  padding（内容と枠線との余白）
  
• ●  border（枠線）
  
• ●  margin（ボーダーと他の要素との余白）
  

margin の領域 padding の領域 content ※実線の箇所が borderの領域

---

ショートハンドプロパティとは

ショートハンドプロパティとは、指定する値の数によって「上下左右」の適用対象が異なるプロパティです。それぞれの値は、半角スペースで区切ります。

• ●  margin
  
• ●  padding
  
• ●  border / border-width / border-style / border-color
  

• 1つの場合 = 上下左右  …  例： p{margin:15px;}
• 2つの場合 = 上下と左右  …  例： p{margin:0 10px}
• 3つの場合 = 上と左右と下  …  例： p{padding:15px 10px 12px}
• 4つの場合 = 上と右と下と左  …  例： p{padding:15px 10px 12px 10px}