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
960
プログラマが知っておくといいかもしれない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.1k
DynamoDB Step Zero to One
zephiransas
0
610
ECSとALBで始めるblue/greenデプロイメント
zephiransas
2
300
DynamoDB関連のアップデート紹介 #reinvent2018
zephiransas
0
700
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
不感対策ソリューション
jtes
0
230
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
270
【ログ分析勉強会】EDR ログで内部不正を検出できるのか、Copilot に聞いてみた
hssh2_bin
2
270
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
300
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
140
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
190
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
210
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
2.9k
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
2
460
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
270
KDD2024参加報告
cyberagentdevelopers
PRO
1
200
Valuable Software Engineering
avandeursen
0
250
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
BBQ
matthewcrist
84
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
Statistics for Hackers
jakevdp
796
220k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Clear Off the Table
cherdarchuk
91
320k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Web Components: a chance to create the future
zenorocha
310
42k
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
͓ΘΓ