第３回Web講座

CSSのセレクタ指定演習

Transcript

1. 第３回Web講座 present by kagawa 1
2. メニュー CSSのセレクタとプロパティ セレクタの指定方法 擬似クラス・擬似要素 付録：パスについて(復習+) 2
3. セレクタ セレクタとは HTMLのどの要素に対してスタイルを適用するか指定する部分 h2 { color : #a40019; } 例：h2要素に適用する 複数要素を追加で指定できる...後述 3
4. プロパティ h2 { color : #a40019; } 例：color ~文字色指定プロパティ プロパティとは どのようなスタイルを適用するかを指定する部分 4
5. カラープロパティ h2 { color : #a40019; } プロパティの例 [color]で文字色指定する、＃ +１６進数でRGBの順(赤,緑,青) 「：#」 ←を忘れないこと 5
6. セレクタの指定方法 1. 要素名 2. class 属性 3. id 属性 4. 全称セレクタ 5. 複数セレクタ 6. 子孫セレクタ 7. 子セレクタ 8. 隣接セレクタ 9. 後続セレクタ 10.擬似要素 11.擬似クラス 6
7. 1.要素名で指定 p, h1, tableなど要素名を指定してスタイルを適用する方法。 指定した要素がHTMLファイル内に複数含まれている場合、 その全てに対して適用される 7
8. 1.要素名で指定 8
9. EMMET/小技 「要素名[属性名=“属性値”]」で 指定した属性と属性値を持つ要素を補完する 9
10. 2.class属性で指定 HTMLファイルにて要素にclass属性を設定し、その値を指定する方法。 「．属性値」 という形で指定する。 10
11. 3.class属性で指定 11
12. 2.id属性で指定 HTMLファイルにて特定の要素にid属性を設定し、その値を指定する方法。 「#属性値」 という形で指定する。 12
13. 2.id属性で指定 13
14. 4.全称セレクタで指定 *で指定し、全ての要素に対して適用される。 14
15. 5.複数セレクタで指定 複数のセレクタを指定する方法。 セレクタごとにカンマ（ , ）で区切って指定する。 例:「要素名, 要素名, 要素名」 15
16. 5.複数セレクタで指定 16
17. 6.子孫セレクタで指定 要素の下の階層に配置された要素を指定する方法。 要素ごとに スペース で区切って指定する。 例:「要素名 要素名 要素名」 17
18. 7.子セレクタで指定 要素の直下に存在する要素・属性を指定する方法。 例:「要素名 > 要素名」 18
19. 7.子セレクタで指定 19
20. 8.隣接セレクタで指定 ある要素と同じ階層で隣接する要素を指定する方法。 例：「要素名 + 要素名」 20
21. 9.後続セレクタで指定 同じ階層で指定した要素より後にくる要素を指定する方法 例：「要素名 ～ 要素名」 という形で指定する。 21
22. 9.後続セレクタで指定 22
23. 10.擬似要素で指定 「要素名:擬似要素名」で指定し、 擬似要素ごとに指定された場所にスタイルを適用する。 p:after{background-color: #987654;} 23
24. 擬似要素の種類 :before ･･･指定した要素の前 :after ･･･指定した要素の後 :first-line ･･･指定した要素の最初の行 :first-letter ･･･指定した要素の最初の文字 24
25. 書いてみよう 「p-element.html」 を新規作成 <title>タグ以前は いつものテンプレ 25
26. 書いてみよう cssフォルダ内に 「p-element.css」を 作成し右のように記述 26
27. 結果 27
28. 11.擬似クラスで指定 擬似クラスごとに指定された条件を満たした場合に適用する。 例：「要素名：擬似クラス名」 a:link{ color: #abcdef; } 28
29. 擬似クラスの種類 :link ･･･a要素で作ったリンクにのみ適用される :visited ･･･a要素で作ったリンクが訪問済みの場合 :hover ･･･マウスカーソルが要素の上にある場合 :active ･･･要素がアクティブである場合 :first-child ･･･指定した要素の内最初の要素 :last-child ･･･指定した要素の内最後の要素 29
30. 擬似クラスの種類  :not( s ) コロンの前に指定した要素の中で、（）内に指定した条件に合致するもの 以外にスタイルを適用する * :not(h2){ color: #123456; } p:not(.red){ color: #00ff00; } 30
31. 実演 これ→を 「p-class.html」 で保存 31
32. 実演 cssフォルダ内に「p-class.css」という ファイル名で→を保存 32
33. 結果 スクリーンショットだと難しいので実演します 初期状態だと↓こうなる 33
34. 付録：絶対パス→相対パス 1. パスを見比べて、一致している部分を双方の先頭から消す 参照元パス C:/circle/network/index.html 参照先パス C:/circle/cg/sample.png 相対パス 34
35. 付録：絶対パス→相対パス 2. 参照元パスからファイル名を消す 参照元パス network/index.html 参照先パス cg/sample.png 相対パス 35
36. 付録：絶対パス→相対パス 3. 参照元パス側にフォルダ名が残っている場合、その数だけ相対パスに 「../」をつける 参照元パス network/ 参照先パス cg/sample.png 相対パス ../ 36
37. 付録：絶対パス→相対パス 4. 相対パスの末尾に参照先パスの残りをくっつける 参照先パス cg/sample.png 相対パス ../cg/sample.png 参照元パス 37
38. 付録：相対パス→絶対パス 1. 参照元パスからファイル名を消す 参照元パス C:/circle/network/css/style.css 相対パス ../img/sample.gif 参照先パス 38
39. 付録：相対パス→絶対パス 2. 相対パスに「../」がついている場合、その数だけ参照元パスからフォル ダ名を消す（下の階層から消していく） 参照元パス C:/circle/network/css/ 相対パス ../img/sample.gif 参照先パス 39
40. 付録：相対パス→絶対パス 3. 参照元パスの残りの末尾に、相対パスの残りをくっつける 参照元パス C:/circle/network/ 参照先パス C:/circle/network/img/sample.gif 相対パス img/sample.gif 40