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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Yu Watanabe
June 17, 2017
Programming
1
3.2k
今日から使えるCSSパターン
Yu Watanabe
June 17, 2017
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Amazon Neptuneに入門してみる
yuw27b
0
14k
Other Decks in Programming
See All in Programming
今から始めるClaude Code超入門
448jp
8
9k
Data-Centric Kaggle
isax1015
2
780
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
MUSUBIXとは
nahisaho
0
140
組織で育むオブザーバビリティ
ryota_hnk
0
180
AI & Enginnering
codelynx
0
120
CSC307 Lecture 05
javiergs
PRO
0
500
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
AtCoder Conference 2025
shindannin
0
1.1k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
orgachem
PRO
1
190
Featured
See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
78
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Evolving SEO for Evolving Search Engines
ryanjones
0
130
Raft: Consensus for Rubyists
vanstee
141
7.3k
We Have a Design System, Now What?
morganepeng
54
8k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.1k
The Limits of Empathy - UXLibs8
cassininazir
1
220
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
93
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 &/%