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
3.1k
今日から使えるCSSパターン
Yu Watanabe
June 17, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Amazon Neptuneに入門してみる
yuw27b
0
13k
Other Decks in Programming
See All in Programming
API Platform 4.2: Redefining API Development
soyuka
0
240
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
旅行プランAIエージェント開発の裏側
ippo012
2
930
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
160
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
3.5k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
610
アセットのコンパイルについて
ojun9
0
130
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Bash Introduction
62gerente
615
210k
Code Reviewing Like a Champion
maltzj
525
40k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Orchestrator
shlominoach
190
11k
Writing Fast Ruby
sferik
628
62k
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 &/%