□□□cssとは□□□
css（Cascading Style Sheets）は、ウェブページのフォント指定、サイズ指定、色指定、レイアウト規制のための言語です。
htmlの中で記述して文書のスタイルを指定することは可能だが、
htmlはあくまで文書構造、スタイル指定部分はhtmlから切り離したcssで記述ができる。
cssでデザインを規定することができるため、
たとえ数万ページに及ぶような膨大なhtmlを抱えていたとしても、cssファイルを一箇所修正するだけで、
全ページのスタイルを瞬時に切り替えることができる便利な言語としてウェブページ作成では、
htmlとcssは切っても切り離せない関係性を持っている。
□□□cssの記述場所□□□
cssが記述できる場所は、インラインcss、ヘッダーcss(内部参照)、外部cssと3箇所ある。
外部cssは、htmlファイルとは別に「□□□.css」のcssファイルを作成しスタイル部分を記述する。
各htmlファイルからそのcssファイルを読み込む。
□□□インラインcssの書き方□□□
htmlのタグの中に直接書いていくやり方
あいうえお
color…プロパティ
red…値
□□□ヘッダcss(内部参照)の書き方□□□
headタグに書くやり方
(例)
・・
□□□外部cssの読み込み方□□□
上記コードを、cssを読み込ませたいhtmlファイルの、headタグ内に記述する。
□□□外部cssの書き方□□□
p{
color:green;
font-size:24px;
}
記述したcssファイルをhtmlで読み取ると、「pタグ」で囲われた文字色「緑」、フォントサイズ「24px」となる。
ページ内のpタグで囲われた全箇所に一括で適用される。
命令の最後は、必ずセミコロン「;」で閉めくくるのがcssのルールとして決まっている。
cssファイルでセミコロン「;」の記述を忘れると、外部cssの読み込みが反映されない。
□□□セレクタとは□□□
p { color:green }
このcssは、pタグで囲われたテキストの文字色を緑にする。
セレクタとは、pタグに該当する部分、{}内の命令文を適用する選択対象をセレクタと呼び、
body { color:#gray }
という命令文なら、「body」がセレクタとなる。
この「セレクタ」に選べる対象は、「html要素」と「クラス名」と「ID名」の3種類。
□□□html要素をセレクタにする□□□
pやbodyなど、「htmlの要素」をセレクタにする方法は、
pをセレクタに選んで命令を書くと、ページ内のpで囲われたテキストすべてが命令適用の対象となる。
□□□クラス名をセレクタにする□□□
html要素に割り当てた「クラス名」を、cssのセレクタに選ぶこともでき、
あいうえお
pタグの中にtestという名前のクラスを割り当て、testというクラス名が割り当てられたテキストに命令を適用させる場合、cssには
.test { color:green }
と書く。html要素をセレクタにする場合と異なり、頭に「.」を置く記述がクラスをセレクタにした状態となる。
pタグ全てに命令が適用されるのではなく、testというクラス名を与えられたテキストだけが緑色となる。
□□□ID名をセレクタにする□□□
クラス名同様、html要素に割り当てられたID名をセレクタにすることも可能。
かきくけこ
html内で、IDをtest2とpタグに割り当てたとき、このテキストのみに命令を与える場合、cssには
#test2 { color:orange }
と書く。クラス名をセレクタにした場合、頭には「.」を置いたが、ID名をセレクタにする場合は、頭に「#」を置く。
□□□クラスとIDの違い□□□
クラス名はhtmlの中で何度でも使用できるのに対し、ID名はhtmlの中で一度しか使えない。