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
Takafumi Yoshida
December 17, 2016
Technology
1
970
プログラマが知っておくといいかもしれないCSSのハナシ
合同勉強会 in 大都会岡山 -2016 Winter-
Takafumi Yoshida
December 17, 2016
Tweet
Share
More Decks by Takafumi Yoshida
See All by Takafumi Yoshida
ECSとSQSでスケーラブルなバッチを作った
zephiransas
2
1.2k
DynamoDB Step Zero to One
zephiransas
0
620
ECSとALBで始めるblue/greenデプロイメント
zephiransas
2
310
DynamoDB関連のアップデート紹介 #reinvent2018
zephiransas
0
710
CloudGarageでGitBucketサーバをたててみた
zephiransas
0
490
ラクして学ぶ英語(LT版)
zephiransas
0
190
あなたとCrystal、いますぐダウンロード
zephiransas
1
1.7k
使ってみようLombok
zephiransas
0
240
Modern Web Development with ninjaframework
zephiransas
0
3k
Other Decks in Technology
See All in Technology
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
ドメイン名の終活について - JPAAWG 7th -
mikit
33
20k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
210
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
150
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
570
Lexical Analysis
shigashiyama
1
150
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
120
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Designing for humans not robots
tammielis
250
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Side Projects
sachag
452
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Navigating Team Friction
lara
183
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Unsuck your backbone
ammeep
668
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Transcript
ϓϩάϥϚ͕͓ͬͯ͘ͱ ͍͍͔͠Εͳ͍ $44ͷϋφγ ߹ಉษڧձd8JOUFSd ٢ాوจʢ![FQIJSBOTBT Ԭࢁ+BWBϢʔβձ
8IPBN* w ٢ాوจ ![FQIJSBOTBT w Ԭࢁ+BWBϢʔβձɹද w גࣜձࣾϦκʔϜॴଐ w
3VCZ 3VCZPO3BJMT ͕ϝΠϯ
None
None
ࠓ+BWBͷ ͡Όͳ͍
ࠓ͢͜ͱ w #PPUTUSBQͬΆ͞ΛऔΖ͏ w σβΠϯ͞ΕͨνΣοΫϘοΫεϥδΦϘλϯ w qFYCPYศར
#PPUTUSBQͬΆ͞Λ औΖ͏
ΤϯδχΞେ͖ #PPUTUSBQ w $44ৄ͘͠ͳͯ͘ɺΠϚυΩͬΆ͍ϖʔδ͕࡞Ε Δ w σβΠϯࡁͷίϯϙʔωϯτ͕͋ΔͷͰָ w ྲྀߦͬͨނʹɺͲ͔͜ͰΈͨΑ͏ͳαΠτʹ w
͖Δ
#PPUTUSBQΆ͞Λফ͢ w ͏ͷάϦουγεςϜ͚ͩ w ϑΥϯτʹຊޠ༻ϑΥϯτΛࢦఆ͢Δ w CPPUTUSBQͷίϯϙʔωϯτΛΊΔ w ͍ΖΜͳαΠτͷؾʹೖͬͨίϯϙʔωϯτΛࢀ ߟʹ͢Δ
σβΠϯ͞Εͨ νΣοΫϘοΫεͱ ϥδΦϘλϯ
σϑΥϧτͷ··ʂ
νΣοΫϘοΫε ϥδΦϘλϯ σβΠϯͰ͖ͳ͍
CFGPSF BGUFSٙࣅཁૉͰ ࣗલͰඳը͢Δ
<div class="form-checkbox"> <input type="checkbox" value="0" id="song1"> <label for="song1"> 君のこころは輝いてるかい? </label>
</div> 2.labelͷ֎ଆʹinputλάΛઃஔ͢Δ 3.forଐੑͰνΣοΫରͷidΛࢦఆ 1.શମΛదͳΫϥεΛ͚ͨdivͰғΉ
ී௨ͷνΣοΫϘοΫεΛফͯ͠ɺ৽ͨʹνΣο ΫϘοΫεͷʮΑ͏ͳͷʯΛඳը͢Δ
.form-checkbox { input[type="checkbox"] { display: none; } label { &:before
{ content: ''; width: 20px; height: 20px; border: 2px solid darken(#ddd, 15%); border-radius: 3px; background: #ddd; } } } 1.ී௨ͷνΣοΫϘοΫεΛফ͢ 2:labelͷbeforeཁૉͱͯ͠ϘοΫεΛඳը͢Δ
νΣοΫϚʔΫΛͲ͏͢Δʁ
BGUFSͱDIFDLFEٙࣅཁૉ ΛΈ߹Θͤͯඳը
.form-checkbox { input[type="checkbox"] { display: none; &:checked + label:after {
font-family: FontAwesome; content: '\f00c'; color: #59b200; } } } 1.νΣοΫ͕ೖͬͯɺ͔ͭɺޙͷlabel༻ͷafterʹඳը 2.νΣοΫϚʔΫͱͯ͠FontAwesomeͷνΣοΫΛ͏
Ϣχίʔυͷจࣈίʔυ͕͋Δ
None
w ಉ༷ͷखޱͰɺϥδΦϘλϯͰ͖Δ w εϥΠυͷ$44ϨΠΞτपΓΛলུͯ͠ΔͷͰɺ ࣮ࡍ(JU)VCͷαϯϓϧΛͲ͏ͧ
qFYCPYศར
ΤϯδχΞ͕ $44ͰΉͷϨΠΞτ w ಛʹԣฒͼͷϨΠΞτ w EJTQMBZͷCMPDL JOMJOF JOMJOFCMPDLͷҧ͍ w qPBUͰϨΠΞτ่͕ΕΔ
w UFYUBMJHOɺWFSUJDBMBMJHOޮ͔ͳ͍ɾɾɾFUD
qFYCPY͕ศར
ରԠঢ়گ
.flex-container { display: flex; justify-content: flex-start; align-items: stretch; } ίϯςφʹʮdisplay:flexʯΛࢦఆ
ϤίํͷϨΠΞτΛʮjustify-contentʯͰࢦఆ λςํͷϨΠΞτΛʮalign-itemsʯͰࢦఆ
KVTUJGZDPOUFOU w ԣํͷϨΠΞτΛࢦఆ w qFYTUBSU EFGBVMU w DFOUFS w
qFYFOE w TQBDFCFUXFFO w TQBDFBSPVOE
qFYTUBSU
DFOUFS
qFYFOE
TQBDFCFUXFFO
TQBDFBSPVOE
BMJHOJUFNT w ॎํͷϨΠΞτΛࢦఆ w TUSFUDI EFGBVMU w qFYTUBSU w
DFOUFS w qFYFOE
TUSFUDI
qFYTUBSU
DFOUFS
qFYFOE
·ͱΊ w #PPUTUSBQάϦου͚ͩ͏ w ϑΥϯτΛͪΌΜͱࢦఆ͢Δ w #PPUTUSBQͷίϯϙʔωϯτΛΊͯΈΔ w BGUFS CFGPSFͰνΣοΫϘοΫεɾϥδΦϘλϯ
͔ͬ͜Α͘ w qFYCPYศར
αϯϓϧ w σβΠϯ͞ΕͨνΣοΫϘοΫεͱϥδΦϘλϯͷ αϯϓϧ w IUUQTHJUIVCDPN[FQIJSBOTBT HCEBJUPLBJ
͓ΘΓ