1. Web講座 第３回

2. 前回のおさらい
セレクタについて
擬似クラス・擬似要素について
「マージン」と「パディング」について
次回の講座

3. 前回の講座では、タグ・要素・属性と
CSSの基本的な記述について説明しました。

4. 要素名にCSSを適用する

5. 指定したidにCSSを適用する

6. 指定したクラスにCSSを適用する

7. 前回の講座では
要素型セレクタ・idセレクタ・classセレクタ
について説明しました。
この３つのセレクタの他にも子孫セレクタや子セレクタなど
スタイルを指定する上で様々なセレクタがある。

8. 全称セレクタ ～すべての要素に適用～

9. 複数セレクタ ～複数のセレクタに適用～

10. 子孫セレクタ ～要素の下の階層にあるセレクタに適用～

11. 子セレクタ ～直下の階層にあるセレクタのみ適用～

12. 隣接セレクタ ～同じ階層のある要素の直後にある要素に適用～

15. 下のように表示されたでしょうか？
子セレクタや子孫セレクタなどをうまく使うことで
綺麗に記述することができます

16. 擬似クラスは要素の状況の変化に応じて
スタイルを適用したいときに使用する。
擬似要素は要素内の特定の文字や行に
スタイルを適用したいときに使用する。

17. 擬似クラスと擬似要素は次のように記述します。
要素名:擬似クラス{
}
要素名:擬似要素{
}

18. :link擬似クラス ～:linkはリンク先が未訪問の場合に適用～
:linkはaタグのみ適用されます。

19. :visited擬似クラス ～:visitedはリンク先が訪問済みの場合に適用～
:visitedはaタグのみ適用されます。

20. :hover擬似クラス ～:hoverは要素の上にカーソルがある時に適用～

21. :active擬似クラス
～:activeは要素がアクティブになっている時に適用～

24. :before擬似要素 ～:beforeは要素の前に指定した内容を追加～

25. :after擬似要素 ～:afterは要素の後に指定した内容を追加～

28. マージンは外側の余白で、パディングは内側の余白
テキスト
マージン
マージン
パディング パディング
マ
ー
ジ
ン
マ
ー
ジ
ン
height
width

29. ６月３日
GitHubについて