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
1.1k
プログラマが知っておくといいかもしれない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.3k
DynamoDB Step Zero to One
zephiransas
0
680
ECSとALBで始めるblue/greenデプロイメント
zephiransas
2
320
DynamoDB関連のアップデート紹介 #reinvent2018
zephiransas
0
780
CloudGarageでGitBucketサーバをたててみた
zephiransas
0
520
ラクして学ぶ英語(LT版)
zephiransas
0
200
あなたとCrystal、いますぐダウンロード
zephiransas
1
1.7k
使ってみようLombok
zephiransas
0
260
Modern Web Development with ninjaframework
zephiransas
0
3.1k
Other Decks in Technology
See All in Technology
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.5k
多野優介
tanoyusuke
1
440
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
いまさら聞けない ABテスト入門
skmr2348
1
200
Azure Well-Architected Framework入門
tomokusaba
1
310
自動テストのコストと向き合ってみた
qa
0
170
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
180
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Unsuck your backbone
ammeep
671
58k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
KATA
mclloyd
32
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Gamification - CAS2011
davidbonilla
81
5.5k
Raft: Consensus for Rubyists
vanstee
139
7.1k
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
͓ΘΓ