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
04 - CSS - OpenWebSchool
Search
openwebschool
August 14, 2012
Programming
4
360
04 - CSS - OpenWebSchool
openwebschool
August 14, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
350
09 - Node.JS - OpenWebSchool
openwebschool
1
390
07 - Javascript - OpenWebSchool
openwebschool
3
340
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
280
05 - MySQL - OpenWebSchool
openwebschool
1
250
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
280
03 - PHP II - OpenWebSchool
openwebschool
2
400
01 - W3 intro - OpenWebSchool
openwebschool
3
250
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
250
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.4k
CSC307 Lecture 06
javiergs
PRO
0
680
Fragmented Architectures
denyspoltorak
0
150
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
130
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.8k
Architectural Extensions
denyspoltorak
0
280
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
260
Featured
See All Featured
Music & Morning Musume
bryan
47
7.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
36k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
Skip the Path - Find Your Career Trail
mkilby
0
54
Claude Code のすすめ
schroneko
67
210k
Building Applications with DynamoDB
mza
96
6.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Paper Plane (Part 1)
katiecoart
PRO
0
4.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
180
How to train your dragon (web standard)
notwaldorf
97
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Transcript
Cascading Style Sheets «ÂIe
ÛY »Ð C
ºìéaNa TiàÂ= åâ0_
Æéaª^ Î?í½Þ Üê¡s
Õ
äãá I{@bA® Æ;Xéaª^
ð{ Ib¤¾ Æ;Xéaª^
Ú g¬w Æ;Xéaª^
Æ { ;Xéa: ª¿ } äãá ð{ Ú
n { 4H¼M: ; r: s/ }
Æ { ;Xéa: ª¿; ¸: ¦6 ; }
p { color: red; font-size: 200%; }
pL<
b9 ªGWy®Ã <p style=”color: red”></p>
9 1ªG #$( <style> p { color: red }
</style>
H²Éú 1ªGSv <link href=”style.css” rel=”stylesheet”> #$(## p { color: red
} '$
éa
SX black white red yellow green blue cyan
rgb(0, 255, 120)
rgba(0, 255, 120, 0.5)
#345 #0F12AB
hsl(120, 50%, 20%)
hsla(0, 50%, 20%, 0.1)
µd
%, ¹
"" " # %( % ¶
" , XØ" X¡,
äãá
8äãá p { ... }
!''äãá .banana
äãá #hahaha
ÄLäãá *
©Á p.banana img#hahaha *.banana
55äãá p img
5äãá p > img
Bgxwäãá p ~ img
F[eUËâ Bgxwäãá p + img
©Á p .banana #hahaha > p
#8 p:first-of-type p:nth-of-type (3n+1) p:nth-of-type (even) p:last-of-type
#58 p:first-child p:nth-child (3n+1) p:nth-child (even) p:nth-last-child (2n)
9 p::first-letter p::first-line p::selection
²» a:link a:active a:visited
nP p:hover
nP input:focus input:checked input:enabled input:disabled
;X
éa $!$& <¼M>
Xó46 $#('. <fl> <6Y> medium small x-small xx-large smaller
Xó®¯ $#(+( normal bold light 100 900
X $#("!- <Hk>
¢ëçÙ $#( 10px red bold Helvetica
XóÇÌ (,($&($# none underline line-through overline
Ï× (,(!# center left right justify
b¾ (,(!# <fl> <6Y>
X¾ +$&'%# !((&'%# <fl>
¸
¸éa &$)#$!$& <¼M>
¸ÎÍ &$)#" url(“pony.png”)
¸ß &$)#&%( repeat repeat-x repeat-y no-repeat
b9Ô£À8
8D@:b9ԣb98 E4H+Â d0N
£À8 =:µ ´yau
b9U£ÀÈ zi-
òO<Y '%!- none inline block inline-block
«5
£À8[$,"$!
9 <" ½² "" 3!
89 £¨^_ObF5
Ø +( <fl> <6Y> ¢o100%
¡ ( <fl> h?2}l[\ Til0~@<6Y>eB
9 <" ½² "" 3! +( (
íÞ ½² K©lK¼MKV³
íÞØ $&&+( <fl>
íÞéa $&&$!$& <¼M>
íÞÛY $&&'(-! solid dotted dashed double
çÙ $&& 2px black solid
æQ[21IEGíÞ |@3D:f[GÒÛY
$&&($%+( $&&&(+( $&&$(($"+( $&&&(+( <fl>
<RçÙ DK;¤ -,=:+Lª -, =: - =: , - :
, =
9 <" ½² "" 3! $&&+(
9¾ 2}3|Z½² r+c]Q½²
9¾Ø %# <fl>
9 <" ½² "" 3! %#
H¾ 2}¦2}b»
H¾Ø "&# <fl>
2}3½² 2}¿° 2}3½² 2}¿° < < <
2}3½² 2}¿° 2}3½² 2}¿° < -,<t <
Ѭ
K£À8F21¤ñ
Ѭô£À8 IEm¤ñ
Ѭ !$( none left right
¨¥l>tA 8R`7IE¤ñ
¨ !& none left right both
yd
8dÅKM z]¤ñîjy
ydJ±oî §h8}UydÅ
yd %$'($# static relative absolute fixed
Ïyd %$'($#&!(* 8z>Po
¼Ïyd %$'($#'$!)( 8´y¥vo
vyyd %$'($#, 8o 0¸¥v
æQ[GÒyd<R /\´VFÖLusÒ
2 ($% <fl> ¦-ub½b»
1 $(($" <fl> ¦,ub½b»
I !( <fl> ¦=½b½b»
E &( <fl> ¦:½b½b»
ÓÊ2ÉÃ
" '9xb $$!# & !" ) " #
®9x\b U.Xq¡jj
tAÛYÕk
èH·q°VW~c §`¶*Ĭ*#$%#' ³ÝïZ rL
%(J¯4CmÁ $$! ###
R±À E-p| m7 $$! #### "
(-!)' ¹0· $$! " #$$% #$(%#