セレクタのまとめ

本日の教材動画はこちら 今まで習ったセレクタのまとめ 本日は今までに習ったセレクタのまとめ動画でした。というわけで私も今まで勉強してきて、メモしてきた記事のリンクを動画の内容に沿って貼っていこうかと思います。 ・セレクタの種類と書き方について ・CSSをまとめて指定する方法 ・特殊なセレクタの記述方法について ・擬似要素について ・構造的な擬似要素について ・nth-childとnth-last-childの使い方について ・nth-of-typeとonly-of-typeについて ・直前や直後を示す擬似要素について これ以外にたくさんあり、特に擬似要素については記事にしただけでも上記より多い…

直前や直後を示す擬似要素について

本日の教材動画はこちら before と after について before は直前、after は直後を示す擬似要素です。使い方は〇〇：：before（又はafter）｛content：”表示させたい内容”；｝となります。前回同様今回もダブルコロンなので注意。一応コロン1こでもいけるようです。（どうも：はCSS2、：：はCSS3対応みたいです） もちろん文字以外にもスタイルの適応も可能。その場合はcontent：”内容”；の後ろにいつも通りCSSを追加していけばOKです。内容は文字だけでなく画像も指定可能。 その場合はcontent：url(アドレス)； となります。文字挿入せず何かしらのス…

1つ目を示す擬似要素について

本日の教材動画はこちら firs-letter と first-line について first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。 使い方はシンプルですが、唯一注意点があるとすれば記述の仕方が セレクタ：要素名｛値；｝ではなく、セレクタ：：要素名｛値；｝となる点です。コロンが1個ではなく2個なので注意しましょう。ただ調べてみると：だけでも記載してたりするので、どっちが正しいのかは正直不明です。誰か教えて。 それでは早速使ってみます。今回用意し…

UIに関わる擬似要素について

本日の教材動画はこちら enabled disabled checked について 今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り enabled ： 通常の状態（選択・入力できる状態）のinput系要素 disabled ： "disabled"オプション（選択・入力ができない）の指定されたinput系要素 checked ： 主にradio,checkboxなどで選択されたものを対象とする これだけでは何が何だかさっぱりなので、実際に記述していきながら動作をみてみましょう。 用意したHTMLとCSSがこちら。 ページソースと外部CSSの内容 上記で出来上がるページが…

nth-of-typeとonly-of-typeについて

前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。 本日の教材動画はこちら nth-of-type と only-of-type について nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「特定の親要素の中の”隣接する子要素が対象”」でしたので、少しだけ違うことが分かるかと思います。 次にonly-of-typeは「特定の親要素の中の”唯一の子要素が対象”」となります。子要素が一つのみの場合に適用されます。 言葉だけでは分かりにくいので、実際に書いて違いを見ていき…