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
CSSのはなし①
Search
Kaneko Takeshi
January 25, 2019
Technology
0
33
CSSのはなし①
pizza_jp#13
Kaneko Takeshi
January 25, 2019
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
26
Eye Tracking on the Browser
tkckaneko
0
83
IEEE754を完全に理解した
tkckaneko
1
75
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
92
多分これが一番早いと思います
tkckaneko
0
25
暗黒面の話
tkckaneko
0
23
CSR / SSR / SSG / JAMstack
tkckaneko
0
68
BOLT
tkckaneko
0
28
CSS Logical Properties and Values
tkckaneko
0
32
Other Decks in Technology
See All in Technology
サンドボックス技術でAI利活用を促進する
koh_naga
0
130
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
940
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
110
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
210
Webアクセシビリティ入門
recruitengineers
PRO
3
1.4k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
780
モダンフロントエンド 開発研修
recruitengineers
PRO
9
6k
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.3k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building Applications with DynamoDB
mza
96
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
RailsConf 2023
tenderlove
30
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Navigating Team Friction
lara
189
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Transcript
CSSのはなし①
CSSって何か知ってますか?
Cascading Style Sheets
構造化文書にスタイルを 付加できるようにする スタイルシート言語
構造化文書 = HTMLとか
スタイル = 文字色とか
つまり
HTMLとかに文字色とかを 付加できるようにする スタイルシート言語
Cascading...?
None
つまり
スタイルが設定された順に 流れるように引き継がれて 適用される
プロパティの最終値は 4段階の計算結果
優先順に基づいて プロパティに指定値を割り当てる
指定値はカスケード処理時に 算出値に解決する
算出値から依存関係を 解決した結果を使用値とする
最終的にローカル環境の制限に 応じて変換されたものが実効値
具体的に説明
body { font-size: 30pt; } h1 { font-size: 200%; }
<h1>A <em>large</em> heading</h1>
.red { color: red; } .blue { color: blue; }
<p class="red">page <a href="/">link</a> Red</p> <p class="blue">page <a href="/">link</a> Blue</p>
.red { color: red; } .blue { color: blue; }
a { color: inherit; } <p class="red">page <a href="/">link</a> Red</p> <p class="blue">page <a href="/">link</a> Blue</p>
おわり ※ 次回はもっとがんばります。