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
AWS発のAIエディタKiroを使ってみた
iriikeita
1
120
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
AIでLINEスタンプを作ってみた
eycjur
1
220
パスタの技術
yusukebe
1
550
A Gopher's Guide to Vibe Coding
danicat
0
190
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
110
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
390
為你自己學 Python - 冷知識篇
eddie
1
310
Langfuseと歩む生成AI活用推進
licux
3
320
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Thoughts on Productivity
jonyablonski
69
4.8k
Music & Morning Musume
bryan
46
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Unsuck your backbone
ammeep
671
58k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Statistics for Hackers
jakevdp
799
220k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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 &/%