Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第3回Web講座
Search
北海道科学大学 電子計算機研究部
May 17, 2017
Programming
0
110
第3回Web講座
CSSのセレクタ指定演習
北海道科学大学 電子計算機研究部
May 17, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Programming
See All in Programming
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
CDK引数設計道場100本ノック
badmintoncryer
2
480
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Writing Fast Ruby
sferik
628
62k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
第3回Web講座 present by kagawa 1
メニュー CSSのセレクタとプロパティ セレクタの指定方法 擬似クラス・擬似要素 付録:パスについて(復習+) 2
セレクタ セレクタとは HTMLのどの要素に対してスタイルを適用するか指定する部分 h2 { color : #a40019; } 例:h2要素に適用する
複数要素を追加で指定できる...後述 3
プロパティ h2 { color : #a40019; } 例:color ~文字色指定プロパティ プロパティとは
どのようなスタイルを適用するかを指定する部分 4
カラープロパティ h2 { color : #a40019; } プロパティの例 [color]で文字色指定する、# +16進数で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