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
Yu Watanabe
June 17, 2017
Programming
1
3k
今日から使えるCSSパターン
Yu Watanabe
June 17, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Amazon Neptuneに入門してみる
yuw27b
0
12k
Other Decks in Programming
See All in Programming
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
How to use Macrobenchmark
veronikapj
0
160
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
生成AIをkintoneに連携してみた
hideg
0
230
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A Philosophy of Restraint
colly
200
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Into the Great Unknown - MozCon
thekraken
20
1.3k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Six Lessons from altMBA
skipperchong
24
3.2k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
In The Pink: A Labor of Love
frogandcode
139
22k
Transcript
ࠓ͔Β͑Δ$44ύλʔϯ :V8BUBOBCF !ZVXC /%4Ԭ*5։ൃऀษڧձ ୈճษڧձ
ࣗݾհ ඇৗۈΤϯδχΞʴϑϦʔϥϯε ˙ 41"ʴ"1*ʴ%#ͳ8FCαʔϏεͷ੍࡞ +BWB4DSJQU3FBDU /PEFKT3VCZ1)1 .Z42-/FPK3%' αʔόͷઃఆͱ͔ɾɾɾ ˙ )5.-ʴ$44ʴ+BWB4DSJQUͷίʔσΟϯά
ɾɾɾͳͲΛ͍ͬͯ·͢ɻ
ຊͷςʔϚ $44 $BTDBEJOH4UZMF4IFFU ɾɾɾ$44͖Ͱ͔͢ʁ
ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν $44ϑϨʔϜϫʔΫ ˙ ྫ͑#PPUTUSBQɾɾɾ CPPUTUSBQNJODTTɾɾɾLC ྫ͑ ۉʹׂͷΧϥϜ࡞Εͳ͍ ϑϨʔϜϫʔΫલఏͷσβΠϯ͕ඞཁ PSΧόʔͰ͖ͳ͍ͱ͜ΖࣗྗͰॻ͘
ॻ͔ͣʹࡁ·ͤΔͱ͍͏Ξϓϩʔν ࣗಈͰੜͰ͖ͳ͍ͷʁ ˙ ྫ͑"EPCF.VTFɾɾɾ ͜ΜͳͷΛඳ͍ͯΈͨΒߦ͍ۙ $44͕ੜ͞Εͨ ੜ͞Εͨ$44Λਓ͕ؒ͞ΘΔͷແཧͦ͏ɻ
ਓ͕ؒ$44Λॻ͓͘ࣄ݈ࡏͰ͢ σβΠϯΧϯϓΛΒͬͯը૾ΛεϥΠεɺ)5.-ͱ$44Λॻ͋͘Ε Ͱ͢ɻ ͜͜ͰαΠτҎ্Γ·ͨ͠ɻ ࣭ ͱ ࡞ ۀ ޮ
Λ ͦΕͳΓʹ҆ఆͤ͞ΒΕΔΑ͏ʹͳͬͨ ͲΜͳΞϓϩʔνͰίʔσΟϯά͍ͯ͠Δ͔Λ͓͠͠·͢
$44ͷ৽͍͠ػೳΛऔΓೖΕΔ ˙ )5.-ʹແҙຯͳEJWΛ࡞ΒͣʹࡁΉ ˙ ০༻ͷը૾ͷΛݮΒͤΔ ͜Μͳͷɺ )5.-PMͱMJ͚ͩͰʂ $44ߦ͘Β͍ ඪ४༷ͱϒϥβͷ࣮ঢ়گΛ͋Δఔ͓ͬͯ͘ʂ
มߋʹڧ͍$44Λࢦ͢ ˙ ҰՕॴม͑ͨΒɺଞͷͱ͜Ζ่͕ΕͨʂɺͱͳΒͳ͍ ˙ ಡΈ͍͢ ʹΫϥε໊͔ΒͲͷ෦ͷίʔυ͔͔Δ ΫϥΠΞϯτ͕ޙ͔ΒՃमਖ਼Λߦ͏͜ͱ͕͋Δ ϲ݄ޙͷࣗଞਓͰ͋Δɾɾɾ શମΛ؏͘ʮઃܭํʯ͕ඞཁͳͷͰɺ ઌਓͷܙΛआΓ·͢ɻ
ê
ઃܭํ r ͏·͍͔͘ͳ͔ͬͨέʔε 00$44తͳΞϓϩʔν ˙ ͋ΔఔҎ্ͷنʹͳΔͱɺ࡞ऀͰ͢ΒύʔπΛѲ͖͠Εͳ͍ɻ ˙ ͏·͍͚͘ඇৗʹٕతͳɺهड़ྔͷগͳ͍$44͕ΊΔͱࢥ͏͕ɺ ݱ࣮ͷΫϥΠΞϯτϫʔΫͰٻΊΒΕ͍ͯΔͷͱҧ͏ɻ .text-red
{ color: red; } .button-base{ border: solid 2px; color: white; … } .button-base .button-blue .button-base .button-green
ઃܭํ r #&. #&.r #MPDL &MFNFOU .PEJGJFS ˙ গ͠ϧʔϧΛΏΔΊͯɺऔΓೖΕ͍ͯΔ .JOE#&.EJOH
Block Element Modifier Element http://getbem.com/ ύʔπΛϒϩοΫ୯ҐͰׂɻ ٖࣅతͳ໊લۭ͕ؒͰ͖Δɻ ϒϩοΫ֎͔ΒΧεέʔυ͢Δ͜ͱ͠ͳ͍ɻ .itemBox .itemBox_thumbnail .itemBox_title .tabMenu .tabMenu_item .tabMenu_item—active
มߋʹڧ͍$44 #&. ˙ ֤ϒϩοΫɺϒϩοΫ֎ͱΧεέʔσΟϯά͢Δ͜ͱ͕ͳ͘ૄ݁߹ ˙ ࠷ॳʹϒϩοΫׂΛߟ͑Δͱ࡞ۀྔ͕ݟੵΓ͍͢ .commonButton .commonButton--download .mainVisual
.mainVisual_pic .introduction .introduction_attention .linkList .sideMenu .sideMenu_item .sideDownload .sideDownload_attention .introduction_text
มߋʹڧ͍$44 &$44 &OEVSJOH $44 ˙ ʮಉ͡هड़Λ܁Γฦ͠ॻ͍͍͍ͯʯͱஅݴ͢Δ࢟ʹײಈͨ͠ By Ben Frain http://ecss.io/
… even at the cost of repetition, isolation can buy you greater advantages; $44ϑΝΠϧͷׂख๏ͳͲɺ༷ʑͳΞΠσΞʹݴٴ͍ͯ͠Δ͕ɺ
มߋʹڧ͍$44 &$44 &$44Λࢀߟʹيಓमਖ਼ ˙ ʮଞͷϖʔδʹࣅͨΑ͏ͳͷ͔͋ͬͨΒڞ௨෦·ͱΊͯɾɾɾʯ ͱߟ͑ΔͷΛΊͨɻ ˙ ෆཁʹͳͬͨͱ͖ʹআ͍͢͠ɻ この2つのボタン(Block)は、
同じBlockのModifier(変化形) ではなく、 まったく別のBlockにした。 .commonButton ! .campaignButton .commonButton-download ! .downloadButton
සग़ύʔπͷ͍ճ͠ Α͘͏ʮϒϩοΫʯΛετοΫ ˙ ׂͨ͠ʮϒϩοΫʯಠཱ͍ͯ͠ΔͷͰɺͲ͜ʹͰຒΊࠐΊΔ ˙ ελΠϧΨΠυδΣωϨʔλΛར༻ͯ͠8FCϖʔδΛ࡞
·ͱΊ ˙ நύʔπΛΧεέʔυ͢ΔΞϓϩʔν͠ͳ͍ ˙ ಠཱͨ͠۩ϒϩοΫʹ͢Δ ˙ ॏෳͨ͠هड़ɺίʔυͷ૿Ճؾʹ͠ͳ͍ ˙ ٕతͰͳ͍͕ɺ҆ఆ࣭ͨ͠ʹͳΔ ˙
Ҋ݅Λ·͍͍ͨͩճ͠Ͱ͖Δ ê
˙ $44ઃܭख๏ #&.IUUQHFUCFNDPN '-0$$4IUUQTHJUIVCDPNIJMPLJGMPDTT 4."$$4IUUQTTNBDTTDPN ˙ ελΠϧΨΠυδΣωϨʔλ ,44IUUQXBSQTQJSFDPNLTT )PMPHSBNIUUQTUSVMJBHJUIVCJPIPMPHSBN BJHJT
IUUQTQYHSJEHJUIVCJPBJHJT ࢀߟ
&OKPZ$44 &/%