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
Kazuyoshi Goto
December 01, 2017
Design
1
91
エンジニアも知れば幸せなCSS基礎
TOWN BASH 2017/11 公開
https://town.connpass.com/event/71098/
Kazuyoshi Goto
December 01, 2017
Tweet
Share
More Decks by Kazuyoshi Goto
See All by Kazuyoshi Goto
成功体験を伝えよう。
kazuyoshigoto
0
70
エンジニアこそ知っておきたいUX思考
kazuyoshigoto
1
600
Twitchと連動したMastodonのBotを作った
kazuyoshigoto
0
230
スマホのセンサーをJavaScriptで遊ぶ
kazuyoshigoto
0
420
ノンエンジニアのMastodon手探り構築記
kazuyoshigoto
0
100
Uploaded Webレイアウトの歴史と新時代「Grid」
kazuyoshigoto
0
120
InstagramとWordPressを軸に越境サイトを作った話
kazuyoshigoto
0
140
モバイル表示を超速にする「AMP」を試してみた
kazuyoshigoto
0
150
PSVR未だ買えないのでついカッとなって作ることを続けた話
kazuyoshigoto
1
200
Other Decks in Design
See All in Design
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
500
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
130
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
510
NAHO SHIMONO_Portfolio2025
nahohphp
0
840
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
650
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.3k
Liquid Iron
mcduckyart
1
110
CMS管理画面のアクセシビリティ
magi1125
6
1.8k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
A better future with KSS
kneath
239
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
Why Our Code Smells
bkeepers
PRO
337
57k
GraphQLとの向き合い方2022年版
quramy
48
14k
Embracing the Ebb and Flow
colly
86
4.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
ΤϯδχΞΕͤͳ $44جૅ ޙ౻ྑ
ࣗݾհ ޙ౻ྑ $*ࣄۀ෦ ,B[VZPTIJ(PUP
ࠓճͷର 8FCσβΠϯɾϑϩϯτʹڵຯͷ͋Δਓ ϑϩϯτ͔ΒΜ͚Ͳ৮ΔՄೳੑͷ͋Δਓ ࣮$44ΛงғؾͰίϐϖͯ͠Δਓ
$44ͱ
$BTDBEJOH4UZMF4IFFUT ΧεέʔςΟϯάελΠϧγʔτ Σϒϖʔδͷݟӫ͑Λ੍ޚ͢Δݴޠɻ )5.-ͱซͤͯΘΕΔɻ
ͳͥ$44Λ͏ͷ͔ )5.-ͷΈͰଟগݟӫ͑Λ੍ޚͰ͖Δ͕ɺ ϝϯςφϯεੑ͕͍͘ճ͠ޮ͔ͳ͍ɻ ·ͨ)5.-ຊདྷͷจॻߏΛଛͳ͏ͨΊɺ $44Λ͏ɻ
$44ͷه๏
Q\GPOUTJ[FQY^ ʲηϨΫλʔʳ ελΠϧΛద༻ͤ͞Δରɻ ྫQλάͯ͢Λରʹ͢Δɻ ʲϓϩύςΟʳ ద༻͢ΔελΠϧͷ༰ɻ ྫϑΥϯταΠζΛQYʹ͢Δɻ
Q\ GPOUTJ[FQY NBSHJOQY DPMPS ^ ϓϩύςΟෳॻ͚Δɻ ϓϩύςΟؒηϛίϩϯ Ͱ۠Δɻ
ηϨΫλʔͷछྨ
)5.- Q\DPMPSG^ EJW\DPMPSG^ Q EJW\GPOUXFJHIUCPME^ Q͍ଠࣈQ EJW੨͍ଠࣈEJW ηϨΫλʔΛΧϯϚ Ͱ۠Δͱ ෳͷରʹಉ͡ελΠϧΛద༻Ͱ͖Δɻ
֊Խ ΧεέʔσΟϯά VMMJ\DPMPSG^ PMMJ\DPMPSG^ VM MJVMҎԼͷMJ͍ࣈMJ VM PM MJPMҎԼͷMJ੨͍ࣈMJ PM
ηϨΫλʔΛεϖʔεͰ۠Γ࿈ͶΔͱ ରΛߜΕΔɻʢΧεέʔσΟϯάʣ
DMBTT SFE\DPMPSG^ EJWCMVF\DPMPSG^ QDMBTTSFE ΫϥεSFEͰࣈ Q EJWDMBTTCMVF EJWʹΫϥεCMVFͰ੨ࣈ Q QDMBTTCMVF
ԿมΘΒͳ͍Αɻ TQBO EJWλάʹΫϥεCMVFΛ༩ͨ࣌͠ʹ ελΠϧΛద༻͢Δɻ υοτ ͱ͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ
*%ʢඇਪʣ JEOBNF\DPMPS^ QJEJEOBNF άϨʔͷࣈʹͳΔΑɻ Q )5.-ͷ্༷ɺ*%ϖʔδʹ͔ͭ͑͠ͳ͍ɻ Ϋϥεͱར༻ײมΘΒͳ͍͕൚༻ੑ͕͘ɺ*%+BWB4DSJQUͰѻ͏͜ͱ ଟ͍ͨΊɺׯবΛආ͚ΔҙຯͰ$44ΫϥεͷΈ͏͜ͱ͕·͍͠ɻ γϟʔϓ
ͱ͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ
ಛघͳηϨΫλʔ
YIPWFSʢϚεΦϯʣ BIPWFS\DPMPSG^ BISFG ΧʔιϧͤΔͱ͘ͳΔΑ B
Y ZʢYͱྡ͢ΔZʣ I Q\DPMPSG^ IλΠτϧI Q͍จࣈQ Qී௨ͷจࣈQ
YZʢYԼͷZʣ EJWQ\DPMPSG^ Qී௨ͷจࣈQ EJW Q͍จࣈQ Q͍จࣈQ TFDUJPO Qී௨ͷจࣈQ TFDUJPO EJW
YdZʢYͷޙͷZʣ IdQ\DPMPSG^ IλΠτϧI Qී௨ͷจࣈQ Qී௨ͷจࣈQ Iݟग़͠I Q͍จࣈQ Q͍จࣈQ
YpSTUDIJMEʢ࠷ॳͷཁૉʣ QpSTUDIJME\DPMPSG^ Q͍จࣈQ Qී௨ͷจࣈQ EJW Q͍จࣈQ Qී௨ͷจࣈQ EJW
YMBTUDIJMEʢ࠷ޙͷཁૉʣ MJMTUDIJME\DPMPSG^ VM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ MJ͍จࣈMJ VM PM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ
MJ͍จࣈMJ PM
YpSTUMFUUFSʢ࠷ॳͷҰจࣈʣ QpSTUMFUUFS\DPMPSG^ Q͍จࣈQ Q͍จࣈQ
·ͩෳࡶͳͷ͋Γɺ ηϨΫλʔԞ͕ਂ͍ɻ
$44ͷద༻ํ๏ छྨ
)5.-λάʹॻ͘ ϋʔυίʔσΟϯά/( Ұ࣌తʹදࣔΛ੍ޚ͢Δ߹ʹ +BWB4DSJQUͰ%0.Λૢ࡞ͯ͠ ͏͜ͱ͕ଟ͍ɻ QTUZMFDPMPSG ͍ࣈʹͳΔΑɻ Q
TUZMFλάʹॻ͘ ϋʔυίʔσΟϯάඇਪɻ ͦͷϖʔδ͚ͩͰద༻͍ͤͨ͞ ελΠϧ͕͋Δ࣌ʹ͏ɻ TUZMF SFE\DPMPSG^ CMVF\DPMPSG^ TUZMF QDMBTTSFEࣈQ QDMBTTCMVF੨ࣈQ
˞ಛఆ݅Ͱڀۃతʹ͜Ε͕ϕετͳ߹
DTTϑΝΠϧΛಡΈࠐΉ جຊͷద༻ํ๏ɻ )5.-ͱ$44ͷཧΛ͠ɺ αΠτશମͷελΠϧΛҰݩ ཧͰ͖ΔͨΊɻ MJOLSFMTUZMFTIFFUISFGTUZMFDTT
$44ͷཧղࠩͰΑ͋͘Δ൵ܶ )5.-ʹΛͬͯ͠·͏ मਖ਼͞Εͨ$44ͷॴ͕͔Β ͣमਖ਼͕େมˍෛ࠴Խ ΤϯδχΞ͕)5.-͞ΘΕΔঢ়گ͕ओͳݪҼɻ Engineer Designer
$44ϒϥβ͝ͱʹ ղऍ͕ҧ͏
ԕ͍ੲɺང͔൴ํͷۜՏܥͰʜ ۜՏதͷδΣμΠ σβΠφʔ ͕ ఇࠃ܉ .JDSPTPGU ͷ։ൃͨ͠ σεɾελʔ *& ͱಆ͍ͬͯͨɻ
*&ͷѱຐͷΑ͏ͳ$44όά σβΠφʔୡΛ͍ۤͷఈʹ ୟ͖མͱͨ͠ͷͩͬͨʜ
σΟεϓϨΠղऍͷࠩ ༨നͷղऍͷࠩ จࣈͷॲཧͷࠩ ͑ΔηϨΫλͷࠩ ͑ΔϓϩύςΟͷࠩ ϑΥʔϜύʔπͷ σβΠϯͷࠩ ͦͦະରԠ όά FUD
͜Μͳ͚࣌͋ͬͨͲɺ ݱ͍ͩͿվળ͞Εͨɻ
༏ੜ ਖ਼͘͠ݴ͏͜ͱΛฉ͍ͯ͘ΕΔɻ ࣇ ੲΑΓϚγ͚ͩͲϠϯνϟͳɻ
ΫϩεϒϥβνΣοΫ͕ඞཁ
ݱͷ$44Ͱ ٻΊΒΕΔ͜ͱ
ʲ࠷ॏཁʳϨεϙϯγϒରԠ ಉҰ)5.-ͷΣϒϖʔδΛɺσΟεϓϨΠαΠζʹ ΑͬͯϨΠΞτΛ࠷దԽͤ͞Δٕज़ɻ
!NFEJBTDSFFOBOE NBYXJEUIQY \ QYҎԼͷ࣌ʹద༻͞ΕΔελΠϧ CPEZ\ GPOUTJ[FQY ^ DMBTTOBNF\ NBSHJOQY ^
^
$44Ξχϝʔγϣϯ ০ͷΈͳΒͣɺ6*ͷΠϯλϥΫγϣϯ Ԡ ʹར༻ ͢Δ͜ͱͰརศੑΛߴΊΔɻ
DMBTTOBNF\ BOJNBUJPOCMJOLTJOpOJUF ^ !LFZGSBNFTCMJOL\ \PQBDJUZ^ \PQBDJUZ^ \PQBDJUZ^ ^
͜͏ͨ͠දࣔͷ੍ޚ +BWB4DSJQUΛ͏ΑΓૣ͍ͯܰ͘ɻ
͞Βʹ
$44% Ґஔ੍ޚͱΞχϝʔγϣϯΛۦ͠$44Ͱ%ۭؒΛ࡞Δٕ๏ɻ ࣮༻ੑʜ·͋ඍົͱ͍͏͔ʜ
$44͚ͩͰग़དྷΔ͜ͱଟ͍ɻ +BWB4DSJQU͏લʹࢼͯ͠ΈΑ͏ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ