九日目！（CSS 適用、セレクタ、擬似クラス・擬似要素）

先日のブログに書いていたように、イマイチＣＳＳを理解できなかったので、実際になにか書いてみて、ＣＳＳを適用させたらもう少し、現実的にわかるのではないかということで、書いてみました。

こんな感じで書いて見ました。現段階で書いても意味がないものも含まれてるように思うのですが、とりあえず、勉強してきた事の復習もかねて、いろいろ書きました。

そして次に、同じフォルダ内に別のテキストでCSSのソースコードも書きました。

こんな感じです。中身はテキストの例にあったのを使ったので、適用されたらどうなるか？というのは知らないままソースコードうちこみました。自分で考えてやったのは、セレクタくらいしかないかもしれませんが。。








で、実際に適用してみました。

 上の黒字が適用前、でブルーの白抜き文字が適用後です。
これではじめて、「自分のPC上で書いたhtmlにＣＳＳを適用させてデザインを変える 」ということが出来ました。だいぶ理解できてきました。

まず、わかってなかった事はＣＳＳを読み込む為のソースコード
<link rel="stylesheet"type="text/css"href="TEST.css" media="screen,projection,tv"/>
この部分と、読み込む対象のＣＳＳ、TEST.cssの部分を、テキストの入力例そのままで書いていたりした為、実際に読み込ませたいCSSのソースコードが書かれたものと名前が違っていたりで、うまく適用できてませんでした。

これで、実際にＣＳＳを適用できるのかがわかったので、ソースコードだけみても、わからないものは、試してみて理解していけるので、すすみやすくなった気がします。

 それでは、昨日の続きです。

●ＸＨＴＭＬにＣＳＳを適用する方法
１．ｌink要素でＣＳＳファイルを読み込む
<link rel="stylesheet" type="text/css" href="○○○.css" />

２．@importでＣＳＳファイルを読み込む
<style type="text/css">
@import "○○○.css";
</style>

３．style要素でＣＳＳソースを指定
<style type="text/css">
p { margin: 15px;
</style>
４．style属性でＣＳＳソースを指定
<p style="margin: 15px;">テキスト</p>

これらのなかでは、１．や２．のようにＣＳＳファイルを読み込む方法が望ましい。

●ＣＳＳ内での文字コードの指定
１．や２．の方法で読み込むＣＳＳファイルの１行目には
@charset "UTF-8";
と文字コードを指定しておくのが一般的。

●ＣＳＳを適用するメディアの種類
ＣＳＳを適用するメディア（デバイスやソフトウェア）指定することができる。
パソコンのモニタやプロジェクターにＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="screen, projection"/>
テレビ、テレビゲーム機にＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="tv />
プリンターなどの印刷メディアに適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="print"/>
携帯端末にＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="handheld"/>

●セレクタの種類
ユニバーサルセレクタ（*）
セレクタにアスタリスクを指定すると全ての要素にスタイルが適用される。

タイプセレクタ
要素名のセレクタ。その要素すべてにスタイルが適用される。たとえば、「body」や「p」と指定する。

子孫セレクタ
要素のなかの子孫要素にスタイルを適用するセレクタ。スペースで区切りセレクタをつなげる。
たとえば、「div p」と指定した場合、「div」に子孫要素として含まれる「p」に適用される。

クラスセレクタ
クラス属性でクラス名が指定された要素に適用。たとえば「.articles」は、「class="articles"」が指定された要素に適用される。

ＩＤセレクタ
id属性で、そのID名が指定された要素にスタイルを適用。「#header」は、「id="header"」が指定された要素に適用される。

●擬似クラス・擬似要素の種類
擬似クラス・擬似要素は特殊なセレクタであり、要素名や属性名、属性値を手がかりにスタイルを適用するのではなく、「状況」や「状態」（カーソルオンしたり、要素の１文字目など）をもとに適用。これが「擬似」（英語では「pseudo」）という名前の由来。

リンク擬似クラス（:link／:vidited）
未訪問リンクのときに適用する「:link」、既訪問リンクのときに適用する「:visited」。基本的にアンカー（a要素）で利用する擬似クラス。

ダイナミック擬似クラス（:hover／:focus／:active）
要素がカーソルオンされたときなどにスタイルを適用する「:hover」（ホバー）、フォーカスされたとき(選択状態になった場合など）に適用する「:focus」、 アクティブになったとき（クリック後に何らかのアクションを行っている場合など）に適用する「:active」がある。

:first-letter擬似要素（:first-letter）
要素の１文字目のみにスタイルを適用するのが「:first-letter」たとえば、段落（p要素）の１文字目だけ大きくして目立たせ、後続のテキストを回りこませるのに利用。

:before／:after擬似要素（:before／:after）
要素前後に何らかの内容を生成するためには、「:before」「:after」を利用。どちらもcontentプロパティで生成内容を指定。たとえば「p.note:before {content:"注意！";}」というスタイルでは、「class="note"」と指定されたp要素の直前に、「注意！」というテキストが生成されることになる。

今日はここまで。