Recommended
More Related Content
Viewers also liked
More from densan_teacher
More from densan_teacher (19)
Recently uploaded
Recently uploaded (6)
第四回ネットワークチーム講座資料
- 2. 概要 • パスの求め方 • セレクタとプロパティ • セレクタの指定方法 • 擬似クラス・擬似要素
- 3. 絶対パス→相対パス 1. パスを見比べて、一致している部分を双方の先頭から消す 参照元パス C:/circle/network/index.html 参照先パス C:/circle/cg/sample.png 相対パス
- 4. 絶対パス→相対パス 2. 参照元パスからファイル名を消す 参照元パス network/index.html 参照先パス cg/sample.png 相対パス
- 5. 絶対パス→相対パス 3. 参照元パス側にフォルダ名が残っている場合、その数だけ相対パ スに「../」をつける 参照元パス network/ 参照先パス cg/sample.png 相対パス ../
- 6. 絶対パス→相対パス 4. 相対パスの末尾に参照先パスの残りをくっつける 参照先パス cg/sample.png 相対パス ../cg/sample.png 参照元パス
- 7. 相対パス→絶対パス 1. 参照元パスからファイル名を消す 参照元パス C:/circle/network/css/style.css 相対パス ../img/sample.gif 参照先パス
- 8. 相対パス→絶対パス 2. 相対パスに「../」がついている場合、その数だけ参照元パスから フォルダ名を消す（下の階層から消していく） 参照元パス C:/circle/network/css/ 相対パス ../img/sample.gif 参照先パス
- 9. 相対パス→絶対パス 3. 参照元パスの残りの末尾に、相対パスの残りをくっつける 参照元パス C:/circle/network/ 参照先パス C:/circle/network/img/sample.gif 相対パス img/sample.gif
- 10. セレクタ セレクタとは、HTMLのどの要素に対してスタイルを適用するか指 定するもの h2 { color: #a40019; }
- 12. セレクタの指定方法 1. 要素名 2. id属性 3. class属性 4. 全称セレクタ 5. 複数セレクタ 6. 子孫セレクタ 7. 子セレクタ 8. 隣接セレクタ 9. 後続セレクタ 10.擬似要素 11.擬似クラス
- 14. 1.要素名で指定
- 16. 2.id属性で指定
- 18. 3.class属性で指定
- 21. 5.複数セレクタで指定
- 24. 7.子セレクタで指定
- 25. 8.隣接セレクタで指定 ある要素と同じ階層で隣接する要素を指定する方法。 「要素名 + 要素名」 という形で指定する。
- 26. 9.後続セレクタで指定 同じ階層で指定した要素より後にくる要素を指定する方法 「要素名 ～ 要素名」 という形で指定する。
- 27. 9.後続セレクタで指定
- 29. 擬似要素の種類 • :before ･･･指定した要素の前 • :after ･･･指定した要素の後 • :first-line ･･･指定した要素の最初の行 • :first-letter ･･･指定した要素の最初の文字
- 32. 結果
- 34. 擬似クラスの種類 • :link ･･･a要素で作ったリンクにのみ適用される • :visited ･･･a要素で作ったリンクが訪問済みの場合 • :hover ･･･マウスカーソルが要素の上にある場合 • :active ･･･要素がアクティブである場合 • :first-child ･･･指定した要素の内最初の要素 • :last-child ･･･指定した要素の内最後の要素
- 35. 擬似クラスの種類 • :not( s ) コロンの前に指定した要素の中で、（）内に指定した条件に合致す るもの以外にスタイルを適用する *:not(h2){ color: #123456; } p:not(.red){ color: #00ff00; }