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
670
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
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
270
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
1.3k
S3のライフサイクル設計でハマったポイント
mkumada
0
130
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.1k
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
210
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
590
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
認知戦の理解と、市民としての対抗策
hogehuga
0
280
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
14
4.9k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Code Review Best Practice
trishagee
70
19k
Statistics for Hackers
jakevdp
799
220k
Designing Experiences People Love
moore
142
24k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Visualization
eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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
͓ΘΓ