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
PicoRuby on Rails
makicamel
2
130
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
PipeCDのプラグイン化で目指すところ
warashi
1
270
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
12
3.2k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Hack Claude Code with Claude Code
choplin
4
2k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Code Review Best Practice
trishagee
69
18k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Adaptive Systems
keathley
43
2.7k
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