今日は何位かな～(._.)？
”脱サラ”した
20歳の”学歴皆無”
こと
石原としきです( ..)φメモメモ
本日のタイトルは、
【セレクタ】
セレクタの考え方
CSSはHTMLの要素単位でスタイルを設定していく
CSSを意図どおりにコントロールするには
どの要素に設定するかを決める「セレクタ」の
特性をしっかり理解する必要がある。
※セレクタの考え方※
セレクタ…「選択するもの」の意味
→箇条書きの部分の色を変更したければ
その部分をピンポイントで選択する必要がある。
セレクタでHTMLの要素を設定しその部分を
ピンポイントで捉える必要がある。
セレクタには非常にたくさんの種類があり
その使い分けによっては製作効率やメンテナンスのしやすさが大きく変わる。
※同じ種類の全ての要素に適用する※
一般的に利用頻度が高い５つのセレクタ
最もわかりやすいタイプ（タイプ）セレクタはHTMLのタグ名を指定し
h2 font - size : 50px ;
文章内の同じ要素全てがその対象になる。
ページ内のh２要素全てに対して、指定の装飾が適用される。
※特定の ID名やクラス名を持つ要素に適用される※
IDセレクタは『 ＃ ＋ ID名 』で構成するセレクタ
例えば＃wrapper [ width : 980px ]
のように主にサイト全体の骨格を形成するような指定に利用する
クラスセレクタは 『 . ＋ クラス名』で構成するセレクタ
基本的なルールはID セレクタと同じ。
※要素の中にある要素を選択するセレクタ※
子孫セレクタは要素の親子関係を利用するセレクタ
タイプセレクタやIDセレクタと組み合わせて書きます
セレクタの間は半角スペースで区切る
header h1 margin : 0 ;
header 要素の中にあるh1要素に対して適用するという解釈になる。
子孫と呼ばれるだけに
親 → 子 → 子の子の要素全てに適用される。
※複数のセレクタに同じ要素を適用する
複数セレクタはセレクタを２つ以上まとめて書く方法
タイプセレクタ、IDセレクタなど、どんな組み合わせでもできる
th. td vertical - align : top ;
異なる要素に対して同じ装飾を適用したい場合に利用
五種
タイプセレクタ
クラスセレクタ
ID セレクタ
子孫セレクタ
複数セレクタ
ではでは今日はこの辺で。。
応援クリックしてもらえたら本当に嬉しいです(:_;)