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
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
660
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
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
540
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
140
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
86
4.7k
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
͓ΘΓ