1限目：練習問題の説明
2限目：Webページ運用・作成の困った問題
3限目：練習問題の解説
4限目：擬似クラスと擬似要素について
5限目：本日の講義のまとめ
今日教わったこと
・今までの練習問題はポートフォリオに載せてもOK
・疑似クラスはコロン2個になったがCSS2まではコロン1個の時代もあったので、基本は2個で書くけど1個でも動く。
▼擬似クラス系セレクタ
・link擬似クラス（未訪問リンクスタイル）
・visited擬似クラス（訪問済リンクスタイル）
・hover擬似クラス（オンカーソルスタイル）
・active擬似クラス（アクティブスタイル）
上から未アクセスのリンク、アクセス済みのリンク、リンクにカーソル当てた時、クリックした瞬間の文字色などのスタイルを指示できる。
記載する時は必ずこの順番で書く。
・first-child/last-child擬似クラス（先頭・最終の子要素指定）
長男（first-child）か末っ子（last-child）で指定する。
・nth-child擬似クラス（n番目の子要素指定）
nの所は何番目かの数字か、odd(奇数)、even（偶数）、数式で条件を満たす子を割り出すなどと指定できる。
・nth-of-type擬似クラス（同一のセレクタを持つ n番目の子要素指定）
親の中にhやpなど複数の要素があった場合に、2番目の子がhだったら適用するみたいな指定ができる。pの中で何番目の子といった指定もできる。
実際に使う時はこの塊の中の最後の子だけこのスタイルにしてねみたいな使い方が多い。
・not擬似クラス（指定値以外の要素指定）
親の中に複数の要素がある場合、指定した要素以外にこのスタイルを適用してといったことができる。
▼擬似要素系セレクタ
・first-letter擬似要素（要素の1文字目を指定）
このセレクタのこの要素の1文字目だけを指定したサイズや色にしてくださいなどができる。
・first-line擬似要素（要素の 1行目を指定）
このセレクタのこの要素の1列目だけを指定したサイズや色にしてくださいなどができる。
・before/after擬似要素（要素の直前・直後にコンテンツの挿入）
対象のタグの中身の前と後ろどっちに疑似的に追加するか指定するもの。装飾的に使うことが多い。
(例：ひし形追加してそのひし形に色付けてね→HTMLで指定できなくもないけどpの中身をspanで区切ってそのspanに対して色をCSSで指定ってなるので面倒)
また、floatプロパティで使うclearプロパティで3つの要素しかなくて同じ子要素につけることができない場合、clearfixクラスを使って疑似的に親につけて落ち着けとさせることができる。リセットCSSでよく使う。
コメント