第３回Web講座

第３回Web講座 present by kagawa 1

メニュー CSSのセレクタとプロパティ セレクタの指定方法 擬似クラス・擬似要素 付録：パスについて(復習+) 2

セレクタセレクタとは HTMLのどの要素に対してスタイルを適用するか指定する部分 h2 { color : #a40019; } 例：h2要素に適用する
複数要素を追加で指定できる...後述 3

プロパティ h2 { color : #a40019; } 例：color ~文字色指定プロパティプロパティとは
どのようなスタイルを適用するかを指定する部分 4

カラープロパティ h2 { color : #a40019; } プロパティの例 [color]で文字色指定する、＃ +１６進数でRGBの順(赤,緑,青)
「：#」 ←を忘れないこと 5

セレクタの指定方法 1. 要素名 2. class 属性 3. id 属性 4.
全称セレクタ 5. 複数セレクタ 6. 子孫セレクタ 7. 子セレクタ 8. 隣接セレクタ 9. 後続セレクタ 10.擬似要素 11.擬似クラス 6

1.要素名で指定 p, h1, tableなど要素名を指定してスタイルを適用する方法。指定した要素がHTMLファイル内に複数含まれている場合、その全てに対して適用される 7

1.要素名で指定 8

EMMET/小技「要素名[属性名=“属性値”]」で指定した属性と属性値を持つ要素を補完する 9

2.class属性で指定 HTMLファイルにて要素にclass属性を設定し、その値を指定する方法。「．属性値」という形で指定する。 10

3.class属性で指定 11

2.id属性で指定 HTMLファイルにて特定の要素にid属性を設定し、その値を指定する方法。「#属性値」という形で指定する。 12

2.id属性で指定 13

4.全称セレクタで指定 *で指定し、全ての要素に対して適用される。 14

5.複数セレクタで指定複数のセレクタを指定する方法。セレクタごとにカンマ（ , ）で区切って指定する。例:「要素名, 要素名, 要素名」 15

5.複数セレクタで指定 16

6.子孫セレクタで指定要素の下の階層に配置された要素を指定する方法。要素ごとにスペースで区切って指定する。例:「要素名要素名要素名」 17

7.子セレクタで指定要素の直下に存在する要素・属性を指定する方法。例:「要素名 > 要素名」 18

7.子セレクタで指定 19

8.隣接セレクタで指定ある要素と同じ階層で隣接する要素を指定する方法。例：「要素名 + 要素名」 20

9.後続セレクタで指定同じ階層で指定した要素より後にくる要素を指定する方法例：「要素名～要素名」という形で指定する。 21

9.後続セレクタで指定 22

10.擬似要素で指定「要素名:擬似要素名」で指定し、擬似要素ごとに指定された場所にスタイルを適用する。 p:after{background-color: #987654;} 23

擬似要素の種類 :before ･･･指定した要素の前 :after ･･･指定した要素の後 :first-line ･･･指定した要素の最初の行 :first-letter ･･･指定した要素の最初の文字 24

書いてみよう「p-element.html」を新規作成 <title>タグ以前はいつものテンプレ 25

書いてみよう cssフォルダ内に「p-element.css」を作成し右のように記述 26

結果 27

11.擬似クラスで指定擬似クラスごとに指定された条件を満たした場合に適用する。例：「要素名：擬似クラス名」 a:link{ color: #abcdef; } 28

擬似クラスの種類 :link ･･･a要素で作ったリンクにのみ適用される :visited ･･･a要素で作ったリンクが訪問済みの場合 :hover ･･･マウスカーソルが要素の上にある場合 :active ･･･要素がアクティブである場合 :first-child
･･･指定した要素の内最初の要素 :last-child ･･･指定した要素の内最後の要素 29

擬似クラスの種類  :not( s ) コロンの前に指定した要素の中で、（）内に指定した条件に合致するもの以外にスタイルを適用する * :not(h2){ color:
#123456; } p:not(.red){ color: #00ff00; } 30

実演これ→を「p-class.html」で保存 31

実演 cssフォルダ内に「p-class.css」というファイル名で→を保存 32

結果スクリーンショットだと難しいので実演します初期状態だと↓こうなる 33

付録：絶対パス→相対パス 1. パスを見比べて、一致している部分を双方の先頭から消す参照元パス C:/circle/network/index.html 参照先パス C:/circle/cg/sample.png 相対パス 34

付録：絶対パス→相対パス 2. 参照元パスからファイル名を消す参照元パス network/index.html 参照先パス cg/sample.png 相対パス 35

付録：絶対パス→相対パス 3. 参照元パス側にフォルダ名が残っている場合、その数だけ相対パスに「../」をつける参照元パス network/ 参照先パス cg/sample.png 相対パス ../
36

付録：絶対パス→相対パス 4. 相対パスの末尾に参照先パスの残りをくっつける参照先パス cg/sample.png 相対パス ../cg/sample.png 参照元パス 37

付録：相対パス→絶対パス 1. 参照元パスからファイル名を消す参照元パス C:/circle/network/css/style.css 相対パス ../img/sample.gif 参照先パス 38

付録：相対パス→絶対パス 2. 相対パスに「../」がついている場合、その数だけ参照元パスからフォルダ名を消す（下の階層から消していく）参照元パス C:/circle/network/css/ 相対パス ../img/sample.gif 参照先パス 39

付録：相対パス→絶対パス 3. 参照元パスの残りの末尾に、相対パスの残りをくっつける参照元パス C:/circle/network/ 参照先パス C:/circle/network/img/sample.gif 相対パス img/sample.gif 40

第３回Web講座

第３回Web講座

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Programming

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部