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設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Search
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Technology
7
3.3k
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
220
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
470
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
Other Decks in Technology
See All in Technology
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
240
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
310
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
120
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
データ分析エージェント Socrates の育て方
na0
6
2.1k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Cult of Friendly URLs
andyhume
79
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Music & Morning Musume
bryan
46
6.8k
Transcript
·ͩؒʹ߹͏ʮCSSઃܭʯ͜ͱ͡Ίɻ CSSͷҋʹҿΈࠐ·Εͳ͍ͨΊͷߟ͑ํɻ 2016.4.12 @WP-D Week Day 2 2016.4.12 @WP-D Week
Day 2 1
whoami ͜͡͠ΐ͏͔͍ 2016.4.12 @WP-D Week Day 2 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) Frontend Engineer / Web Designer
Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 3
ݝদຊࢢͬͯͱ͜ΖͰɺ ϑϦʔϥϯεͯ͠·͢ɻ Ͱ܈അݝग़ 2016.4.12 @WP-D Week Day 2 4
Profile • WordPress ͳਓͰ͢ɻύʔϚϦϯΫͷϓϥάΠϯ࡞ͬͨΓɺ ίΞίϯτϦϏϡʔλʔʹͳͬͨΓɺ͍Ζ͍Ζͬͯ·͢ɻ • CSSབྷΈͰɺ͍͍͢WordPressͷͨΊͷCSSͷͭ͘Γ ͔ͨ ͱ͔Ͱొஃͨ͠ΓɺBasis ͱ͍͏CSSϑϨʔϜϫʔΫʹ
ϓϧϦΫΛૹΓ͚ͭͨΓͯ͠·ͨ͠ɻ 2016.4.12 @WP-D Week Day 2 5
Ͱຊɻ 2016.4.12 @WP-D Week Day 2 6
օ͞Μɺ ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ 2016.4.12 @WP-D Week Day 2 7
• 1Ҏ্લʹೲͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ͑ͯΔCSSɻ • ΄ͱΜͲɺίϐϖίʔυͷڰتཚɻ • ͔͠ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ
2016.4.12 @WP-D Week Day 2 8
ʮطଘͷCSSʁ୭͕ಡΉ͔ʂʯ 2016.4.12 @WP-D Week Day 2 9
݁Ռ 2016.4.12 @WP-D Week Day 2 10
૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... 2016.4.12 @WP-D Week Day 2 11
ͦͯ͠ੜ·ΕΔ important! ͷւɻ ୭৮Εͳ͍ CSS ͷੜɻ 2016.4.12 @WP-D Week Day
2 12
2016.4.12 @WP-D Week Day 2 13
ผʹ͜Εͬͯɺ͜͜࠷ۙͷ͡Όແ͍ΑͶ ... 2016.4.12 @WP-D Week Day 2 14
ਓྨʮCSS͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾ͖ͮ͘ɻ 2016.4.12 @WP-D Week Day 2 15
ͦΜͳࡢࠓͰ͕͢ɺ ϚϧνσόΠεରԠɺϨεϙϯγϒͩ ͱ͔Ͱɺ·͢·͘͢͠ͳΔCSS 2016.4.12 @WP-D Week Day 2 16
• IEͷҋ͔Β͍͍Ճݮൈ͚ग़ͨ͠ͱࢥͬͨͷʹ… • ͩΕͩΑ!!! HTML/CSS؆୯ͩͱ͔ݴౕͬͨ!!! 2016.4.12 @WP-D Week Day 2
17
͍ɻ 2016.4.12 @WP-D Week Day 2 18
Q. ͰɺਓྨͲ͏ͬͯCSSͱཱͪ ͔͑ྑ͍ͷ͔ʁ 2016.4.12 @WP-D Week Day 2 19
A. ΧΦεԽ͠ͳ͍Α͏ʹCSSΛॻ͘! 2016.4.12 @WP-D Week Day 2 20
ΧΦεԽ͠ͳ͍Α͏ͳCSS • ϖʔδɾཁૉͷՃ͕؆୯ʹͰ͖Δ͜ͱɻ͋Δఔ CSS ॻ͔ ͳͯ͘ग़དྷΔΑ͏ʹ͢Δ͜ͱɻͦͦCSSΛه͠ͳ͚ ΕւԽ͠ͳ͍ɻ • อकɾσβΠϯมߋ͕؆୯ʹͰ͖Δ͜ͱɻͲ͜Λ͍͡Εྑ ͍ͷ͔͕ɺΘ͔Γ͍͢͜ͱɻෆཁͳ
CSS ͕ΓͮΒ͍ɺӨ ڹ͠ਏ͍Α͏ʹ͢ΕɺCSSͷ্ॻ͖ࠈɺimportant ࠈ ͛Δɻ 2016.4.12 @WP-D Week Day 2 21
• ਓؒʹͱͬͯಡΈ͍͢͜ͱɻͦͦɺਓ͕ؒಡΉؾʹͳ Βͳ͍ or ಡΊͳ͍ CSS ͕ւԽ͠ͳ͍Θ͚͕ͳ͍ɻͱ͍͏ ͔طʹւɻ 2016.4.12 @WP-D
Week Day 2 22
Ͳ͏ͬͯʁ 2016.4.12 @WP-D Week Day 2 23
CSS Ͱ։ൃ͢Δ্ͰͷઓུΛཱͯΔɻ 2016.4.12 @WP-D Week Day 2 24
͜ͷઓུ = ʮCSSઃܭʯ 2016.4.12 @WP-D Week Day 2 25
Google ͷΤϯδχΞͷ Philip Walton ࢯ͕͜ͷ݅ʹ͍ͭͯॻ͍ ͨهࣄ͕ͪ͜ΒɻCSS Architecture — Philip Walton
• ຊޠ൛ɿCSS Architecture 2016.4.12 @WP-D Week Day 2 26
Philip Walton ࢯͷݴ͏ྑ͍ CSS ͷ݅ͱɻ • ༧ଌ͍͢͠ (PIEͷݪଇ) • ࠶ར༻͍͢͠
(DRYݪଇ) • อक͍͢͠ / ֦ு͍͢͠ (ΦʔϓϯɾΫϩʔζυͷݪଇ) 2016.4.12 @WP-D Week Day 2 27
ͦͷͨΊʹɺ࣮ફ͍ͯ͠Δ͜ͱɻ 2016.4.12 @WP-D Week Day 2 28
1. ͪΌΜͱ OOCSS Δ 2016.4.12 @WP-D Week Day 2 29
OOCSSͷ̎େݪଇ 1. ߏͱݟͨΛɻ 2. ίϯςφͱίϯςϯπͷɻ 2016.4.12 @WP-D Week Day 2
30
ߏͱݟͨͷ 2016.4.12 @WP-D Week Day 2 31
.submit-btn { display: inline-block; padding: 10px; color: #FFF; background: #66C;
} .link-btn { display: inline-block; padding: 10px; color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 32
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 33
/*Ϙλϯͷߏ*/ .btn { display: inline-block; padding: 10px; } /*Ϙλϯͷݟͨ*/ .btn-submit
{ color: #FFF; background: #66C; } .btn-link { color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 34
ߏͱݟͨͷ͢ΔϝϦοτ 1.ίʔυͷॏෳ͕ආ͚ΒΕΔɻอकੑ্͕͕Δɻ 2.֦ு͕ͱͯ༻ҙʹͳΔɻ ྫ • Bootstrap ͷ Button 2016.4.12 @WP-D
Week Day 2 35
ίϯςφͱίϯςϯπͷ <aside class="sidebar"> <div> <img class="avatar" /> </div> </aside> .sidebar
.avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 36
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 37
<aside class="sidebar"> <div class="sidebar-widget"> <img class="avatar" /> </div> </aside> .sidebar-widget
{ /** ίϯςφ **/ width: 200px; } .avatar { /** ίϯςϯπ **/ width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 38
ίϯςφͱίϯςϯπͷͷϝϦοτ 1. ॴɺίϯςΩετʹґଘ͠ͳ͍ίʔυ͕૿͑Δɻ 2. ࠶ར༻͍͢͠ʂ 3. αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px
} Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ 2016.4.12 @WP-D Week Day 2 39
OOCSSͷྫ • Bootstrap • Foundation 2016.4.12 @WP-D Week Day 2
40
OOCSSͯ͢ͷجૅͳͷͰɺ͜Ε ຊʹ͔ͬ͠Γԡ͑͞Α͏ɻ 2016.4.12 @WP-D Week Day 2 41
ৄ͘͠ຊΛಡ͏ 2016.4.12 @WP-D Week Day 2 42
2.ࣄͷΓํ 2016.4.12 @WP-D Week Day 2 43
ϖʔδɺσβΠϯΧϯϓ͝ͱʹ CSS Λ࡞Βͳ ͍ɻίϯϙʔωϯτࢦͳ CSS Λɻ • ͜ΕΛΔͱ͍͍ͩͨɺ৽نϖʔδՃͷͨͼʹ CSS Λه
͢Δࣄଶ͕ى͜Δɻ • .page-privacy Έ͍ͨͳΫϥεΛbodyΛॻ͔ͳ͍ͱͩΊͳ CSSͱ͔ɺଞͷϖʔδͰ͍͍ͨͱ͖ɺͲ͏͢Δͷʁ • ൚༻ੑͷ͋ΔύʔπΛΈ߹ΘͤͯɺHTML ΛΜͰ͍͚Δ ͷΛࢦ͢͠ɻ 2016.4.12 @WP-D Week Day 2 44
CSSཧ͢Δɻ 1. Ϧηοτɾnormalize 2. ϕʔεͷHTMLཁૉͷCSS 3. ϨΠΞτɺύʔπͳͲͷίϯϙʔωϯτͷCSS ͱ͍͏ॱʹৄࡉͷ͍ॱͰॻ͍͍ͯ͘ɻ 2016.4.12 @WP-D
Week Day 2 45
HTMLɺίϯςϯπʹґଘ͠ͳ͍ɻ • HTMLɾίϯςϯπ͕มΘͬͯมΘΒͳ͍Α͏ʹCSSઃ ܭ͢Δɻ • Ϋϥε໊ɺίϯςϯπʹґଘ͢ΔͷͰͳ͘ɺػೳʹ ର໋໊ͯ͢͠ΔɻχϡʔεΤϯτϦʔʹରͯ͠ɺ.news-entry ͱ໋໊ͯ͠ɺͦͷޙͦΕΛళฮհͰ͏͜ͱʹͳͬͨ Γɻɻɻʢ࣮ʣ 2016.4.12
@WP-D Week Day 2 46
ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͳ͍ɻ • αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ
͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ • ཁૉͱɺϨΠΞτͷͨΊͷ CSS ͔ͬ͠ΓׂɻઈରͰ αΠζॴΛࢦఆ͍ͯ͠Δͷཁҙɻ • ίϯςφʔͱίϯςϯπͷ͔ͬ͠Γɻ 2016.4.12 @WP-D Week Day 2 47
ηϨΫλʔͷڧ͞ՄೳͳݶΓऑ͘ɻ • ID ηϨΫλΘͳ͍ʂηϨΫλʔ͕ແବʹڧ͘ͳͬͯ ! important ࠈΛҾ͖ى͜͢ɻ·ͨɺIDηϨΫλʹɺϖʔ δϦϯΫͳͲͷׂ͋ΔͷͰίϯςϯπʹґଘ͕ͪ͠ɻ • .entry-body
h1 Έ͍ͨͳ͜ͱΓ͕ͪͰ͕͢ɺ͜͏͍ͬͨ CSS͕͋ͬͨΓ͢Δͱɺh1ʹΫϥεΛͯͯ...Έ͍ͨͳͱ͖ ʹ CSS ͕ద༻͞Εͳ͍ͷτϥϒϧ͕ɻɻɻ 2016.4.12 @WP-D Week Day 2 48
ཁૉʹґଘͨ͠ηϨΫλʔΘͳ͍ɻ • .comment .title, .entry .title ͷηϨΫλʔҰݟྑͦ͞͏ͩ ͚Ͳɺ.title ʹ CSS
͕͋ͨΒͳ͍ͳΜͯอূͳ͍͠ɺ.entry ͷதʹ .comment ͕ଘࡏͨ͠߹ͱ͔ɻɻɻ.comment- title, .entry-title ɺཁૉʹґଘ͠ͳ໋໊͍େࣄɻ • SMACSSͱ͔ɺBEMΛಋೖ͢Δͱָ͔ɻ 2016.4.12 @WP-D Week Day 2 49
ػೳɺίϯϙʔωϯτ͝ͱʹϑΝΠϧׂ͢Δ • Ұຕͷ CSS ϑΝΠϧʹΰϦΰϦॻ͍͍ͯ͘ͱɺͲ͏ͯ͠Ұ ͭͷػೳΛ࣮ݱ͢ΔͨΊͷ CSS͕ࢄͨ͠Γ͕ͪ͠ɻͳͷ Ͱɺػೳ͝ͱʹ CSS ϑΝΠϧΛׂ͢͠ɻ
• ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͯͳ͍͔ʁׂ͢ ͖͔ʁͷࢦʹͳΔɻ • Θͳ͍CSSΛൃݟ͍͢͠ɻ 2016.4.12 @WP-D Week Day 2 50
ຊจͳͲͷཁૉ͔ΒCSSΛॻ͍͍ͯ͘ɻ • Ϧηοτͷ͋ͱʹॻ͘ɺHTMLཁૉͷ CSS ͦͷαΠτͷ جຊͷσβΠϯɻ͜ΕΛ·͔ͣͬ͠Γ࣮͢Δɻຊจཝ༻ ʹɺ.main-contents h2 ͷ CSS
Λॻ͘ͷ࣮֬ʹ CSS Λෳ ࡶʹ͢Δɻ 2016.4.12 @WP-D Week Day 2 51
ΈΜͳͷຊಡΜͰɺ SMACSSͱ͔FLOCSS ͱ͔Ε͍͍Α!!! 2016.4.12 @WP-D Week Day 2 52
3. ৺ߏ͑ฤ 2016.4.12 @WP-D Week Day 2 53
ڧ͍৺Λ࣋ͱ͏ɻ • CSSΏΔ;Θݴޠɻ؆୯ʹյΕΔɻҰઃܭ͕ഁ͢Δ ͱɺͦͷ CSS ͷઃܭ͕৴༻Ͱ͖ͳ͘ͳΔɻ • Ϋιίʔυͷ͠Έɺٕज़ऀͱͯ͠ͷϓϥΠυॏཁɻ • ׂΕͨ૭ͷ๏ଇɺϘʔΠεΧτͷنଇ
2016.4.12 @WP-D Week Day 2 54
҆қͳίϐϖίʔυຑༀɻ • CSS ͕ແବʹ͘ͳͬͯɺւԽ͢ΔҰ൪ͷݩڟɻ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷͳ͍ͷ͔Λߟ͑Α͏ɻ • ίϐϖͨ͘͠ͳͬͨͱ͖ɺઃܭΛݟ͢νϟϯεɻ 2016.4.12 @WP-D
Week Day 2 55
RefactoringʂRefactoringʂRefactoringʂ • CSS Λॻ͘ͱ͖ɺσβΠϯ͕ϒϥβͰ࠶ݱͰ͖ͨʂͰऴ ΘΓʹ͠ͳ͍ɻઈରϦϑΝΫλϦϯά͢Δʂ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷΔ͜ͱɺҰͭͷίϯϙʔ ωϯτͷׂ͕େ͖͗͢Δέʔεଟʹଘࡏ͢Δɻ • CSS
์͓ͬͯ͘ͱ͙͢ʹෳࡶոحʹͳͬͯ͠·͏ͷͰɺৗ ʹγϯϓϧͳߏʹͳΔΑ͏ʹϦϑΝΫλϦϯά͠ͳ͕Β։ ൃ͍ͯ͘͜͠ͱɻ 2016.4.12 @WP-D Week Day 2 56
υΩϡϝϯτେࣄɻ • ͤΊͯɺϑΝΠϧׂͷϧʔϧɺ໋໊نͳͲυΩϡϝϯ τʹ͢ΔɻલͷઃܭͳΜ࣮ͯ֬ʹΕΔɻ • ΦϨΦϨઃܭͱ͔Ͳ͏ͤΕΔ͠มΘΔͷͰɺSMACSSͱ͔ FLOCSSͱ͔ͪΌΜͱυΩϡϝϯτͷ͋ΔͷΛ͏ͱ͍Ζ ͍Ζָɻ 2016.4.12 @WP-D
Week Day 2 57
ϦϑΝΫλϦϯάυΩϡϝϯτຖ ճΕͳ͍߹ͦ͜ɺͪΌΜͱͨ͠ ͷΛͭͬͯ͘ɺ͍ճͦ͏ɻ ͍ͭͰʹGithubͱ͔ʹஔ͍͓͍ͯͯOSSͱ͔ʹ͓ͯ͘͠ͱ͍Ζ͍ΖͤʹͳΕΔ͔ɻ 2016.4.12 @WP-D Week Day 2 58
·ͱΊ 2016.4.12 @WP-D Week Day 2 59
CSS ͕ੜ·Εͯ20ͪΐͬͱɺςʔϒϧϨΠΞτ͔Βͷస ͕ىͬͯ͜10͘Β͍ɻ·ͩ·ͩɺ͜Ε͔ΒมΘ͍ͬͯ͘Μͩ ͱࢥ͍·͢ɻ Γɺϓϩάϥϛϯάʹ͓͚Δઃܭͷϊϋ͔ͳΓೖͬ ͖͍ͯͯΔͷͰɺษڧͯ͠ΈΔͱɺ͍Ζ͍Ζཱͭࣝɾߟ͑ ͨํ͕खʹೖΓ·͢ɻϓϩάϥϛϯά͕ղΒͳͯ͑͘Δ͜ ͱଟ͍Ͱ͢ɻ ϓϩάϥϛϯάݪଇҰཡ -
Strategic Choice ΦϒδΣΫτࢦઃܭݪଇ - Strategic Choice 2016.4.12 @WP-D Week Day 2 60
ΏΔ;Θݴޠͳ CSS ౖΓ൵͠ΈΛ֮͑Δ͜ͱ͜Ε͔Β ଟ͍ͱࢥ͍·͕͢ɺWEBσβΠϯͷѪɺΤϯδχΞͱͯ͠ͷ ϓϥΠυΛ࣋ͬͯΓӽ͍͖͑ͯ·͠ΐ͏ɻ 2016.4.12 @WP-D Week Day 2
61
͓ΘΓɻ Follow Me! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB
Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 62