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入門2 ボックスモデルを理解する
Search
Atsushi Tadokoro
May 14, 2014
Technology
0
340
CSS入門2 ボックスモデルを理解する
Atsushi Tadokoro
May 14, 2014
Tweet
Share
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.6k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
410
Processing.jsによるデータの可視化と生成的表現
tado
1
1.6k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
330
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.2k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.4k
TumblrでWebサイトを作成
tado
0
680
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2k
Other Decks in Technology
See All in Technology
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
AWSやJAWS-UGとの出会いを振り返る
yoyoyopg
1
210
AWS Observability 関連最新アップデート
o11yfes2023
0
100
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.6k
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
150
Observabilityジャーニーを実現するためのAWSサービス:OSS編
o11yfes2023
0
110
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
290
Dungeons and Dragons and Rails
joelq
0
220
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
1.8k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Automating Front-end Workflow
addyosmani
1357
200k
Designing with Data
zakiwarfel
96
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
4 Signs Your Business is Dying
shpigford
176
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Thoughts on Productivity
jonyablonski
60
3.9k
What's new in Ruby 2.0
geeforr
338
31k
Transcript
ܳज़ใԋशσβΠϯ 8FC ୈ̒ճɿ$44ೖ̎ ϘοΫεϞσϧΛཧղ͢Δ ݄ ౦ژज़େֶܳज़ใηϯλʔ ".$ ୲ɿాॴ३
ઌिͷ෮श $44ʹΑΔจࣈͷσβΠϯ
ઌिͷ෮श ‣ ͱΓ͋͑ͣɺ͜Ε͚ͩԱ͍͑ͨʂ ϓϩύςΟʔ ༰ DPMPS ৭ͷ ϑΥϯτͷ৭ CBDLHSPVOEDPMPS
৭ͷ എܠͷ৭ GPOUTJ[F ͞ͷ ϑΥϯτͷେ͖͞ GPOUXFJHIU ʙ OPSNBM CPME ϑΥϯτͷଠ͞ MJOFIFJHIU ͞ͷ ߦؒͷେ͖͞ UFYUBMJHO MFGU DFOUFS MJHIU KVTUJGZ ߦἧ͑
ઌिͷ෮श ‣ ৭ͱ͞ͷ ୯Ґ ৭ w ৭ͷ໊લ SFE CMVF
ZFMMPX XIJUFFUD w ਐͰ3(#ͷ ʙ⒎⒎⒎ ͞ w FNɿจࣈͷେ͖͕͞FN w ɿύʔηϯτࢦఆ w QUɿϙΠϯτ QUJO w QYɿϐΫηϧ ը໘্ͷ࠷খ୯Ґ
ϘοΫεϞσϧ
ϘοΫεϞσϧ ‣ $44ͰશͯͷཁૉΛํܗͷϘοΫεΛ୯Ґͱͯ͠ߟ͑Δ ‣ ϒϥβͷը໘ͷதͰੵΈΛ͍ͯ͠Δײ֮ ‣ ͍··ͰֶΜͰ͖ͨ)5.-ͷ΄ͱΜͲλά ϒϩοΫϨϕϧ ཁૉ ɺͦͷपғʹݟ͑ͳ͍ํܗͷϘοΫεΛ͍࣋ͬͯ
ͨ ‣ ϘοΫεͷपғͷ༨നɺઢɺഎܠʹ༷ʑͳϓϩύςΟΛ༩ ͑Δ͜ͱͰ༷ʑͳελΠϧΛ࣮ݱ͢Δ
ϘοΫεϞσϧ ‣ ྫ͑ɺ౦ژܳज़େֶͷτοϓϖʔδϘοΫε ํܗ ͷ ू߹͔Βߏ͞Ε͍ͯΔ
ϘοΫεϞσϧ ‣ 8FCϖʔδͷ΄ͱΜͲͷཁૉɺϘοΫε ํܗ ͷू߹͔ ΒͳΓ͍ͨͬͯΔ ‣ ͜ͷ࠷খ୯ҐΛΈ߹ΘͤͯɺϨΠΞτΛ͍ͯ͘͠ ‣ ͜ͷ࠷খ୯ҐͷϘοΫεΛɺϘοΫεϞσϧͱ͍͏
! ‣ ॏཁͱͳΔཁૉͭʂ ‣ NBSHJO ‣ QBEEJOH ‣ CPSEFS
ϘοΫεϞσϧ ‣ ϘοΫεϞσϧ ཁૉͷ༰ ίϯςϯτ NBSHJO QBEEJOH CPSEFS ྡ͢ΔϘοΫεͱͷڥք
ϘοΫεϞσϧ ‣ ίϯςϯτ ‣ ཁૉͷ༰ͦͷͷ ‣ CPSEFS ‣ ཁૉΛऔΓғΉઢ ‣
QBEEJOH ‣ ίϯςϯτͱϘʔμʔ·Ͱͷ༨ന ‣ NBHJO ‣ ྡ͢ΔଞͷϘοΫεཁૉͱϘʔμʔ·Ͱͷ༨ന ! ‣ QBEEJOHɺNBSHJO༨നͷαΠζΛௐͯ͠ɺϨΠΞτΛ ͍͑ͯ͘ ‣ CPSEFSͷઢͷଠ͞ɺઢͷछྨɺ৭ɺΛௐͯ͠ઢΛσβ Πϯ͢Δ
ϘοΫεϞσϧ ‣ NBSHJO QBEEJOH CPSEFSɺ্ԼࠨӈΛݸผʹઃఆͰ͖Δ ϓϩύςΟ ద༻͞ΕΔॴ NBSHJOUPQ QBEEJOHUPQ CPSEFSUPQ
্ NBSHJOSJHIU QBEEJOHSJHIU CPSEFSSJHIU ӈ NBSHJOCPUUPN QBEEJOHCPUUPN CPSEFSCPUUPN Լ NBSHJOMFGU QBEEJOHMFGU CPSEFSMFGU ࠨ
ϘοΫεϞσϧ ‣ ্ԼࠨӈΛҰׅͯ͠ઃఆ͢Δ͜ͱՄೳ ‣ ༨നͷҰൠαΠζ FN QU QY ͳͲ Ͱࢦఆ͢Δ
‣ ෳͷΛεϖʔεͰ۠ͬͯ·ͱΊͯهड़Ͱ͖Δ ͷهड़ ઃఆ͞ΕΔํ ্ԼࠨӈΛ·ͱΊͯઃఆ ্Լɺࠨӈͷॱʹઃఆ ্ɺࠨӈɺԼͷॱʹઃఆ ্ɺӈɺԼɺࠨͷॱͰઃఆɻ ্͔Β࣌ܭ·ΘΓ
ϘοΫεϞσϧ ‣ CPSEFSͷϓϩύςΟʔ ‣ ෯ XJEUI ɺ৭ DPMPS ɺܗ TUZMF
ΛઃఆͰ͖Δ ϓϩύςΟ ઃఆͰ͖Δ CPSEFSXJEUI େ͖͞ͷ୯Ґ CPSEFSDPMPS ৭ͷ୯Ґ CPSEFSTUZMF OPOF EPUUFE EBTIFE TPMJE EPVCMF HSPPWF SJEHF JOTFU PVUTFU Ұׅࢦఆ XJEUITUZMFDPMPSͷॱͰઃఆ͢Δ
ΑΓৄࡉͳηϨΫλͷࢦఆ ‣ จ຺ηϨΫλ ‣ MJFN\DPMPS^ ‣ MJFN\DPMPS^ ‣ I Q\DPMPS^
! ‣ DMBTTͱJE ‣ QOPUF\DPMPSSFE^ ‣ QOPUF\DPMPSSFE^ ! ‣ ٙࣅΫϥεηϨΫλ ‣ BMJOL\DPMPSG^ ‣ BWJTJUFE\DPMPS^ ‣ BIPWFS\DPMPSG^
ΑΓৄࡉͳηϨΫλͷࢦఆ ‣ ࢠଙཁૉʹద༻ ‣ ෳͷηϨΫλΛ֯εϖʔεͰ۠ͬͯྻڍ͢Δ ‣ ͋ΔಛఆͷཁૉλΠϓͷࢠଙཁૉͰ͋Δͱ͖ʹ͚ͩద༻͞ ΕΔ ! ‣
ͷࢠཁૉʹ͚ͩద༻ ‣ ෳͷηϨΫλΛͰ۠ͬͯྻڍ͢Δ ‣ ͷࢠཁૉʹ͚ͩద༻͞ΕΔ ! ‣ ܑఋཁૉʹద༻ ‣ ෳͷηϨΫλΛ Ͱ۠ͬͯྻڍ͢Δ ‣ ಉ͡ཁૉΛ࣋ͭʮܑఋʯཁૉʹ͚ͩద༻͞ΕΔ
DMBTTͱJE ‣ DMBTTଐੑ ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ)5.-ͷλάʹʮDMBTTIPHFʯͱ͍͏ଐ ੑͰࢦఆ͞ΕΔ ! ‣
JEଐੑ ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ)5.-ͷλάʹʮJEIPHFʯͱ͍͏ଐੑͰ ࢦఆ͞ΕΔ ‣ ಉ͡JEଐੑͻͱͭͷ)5.-ϑΝΠϧͷதͰճͷΈ༻ Մ
ٙࣅΫϥεηϨΫλ ! ‣ ٙࣅΫϥεηϨΫλ ‣ ໊લଐੑʹؔͳ͘ɺঢ়گʹΑͬͯมԽ͢ΔηϨΫλ ‣ BཁૉͷϦϯΫઃఆ͕දత ‣ MJOLˠະ๚ͷ63*ͷϦϯΫ
‣ WJTJUFEˠ๚ࡁͷ63*ͷϦϯΫ ‣ BDUJDFˠબதͷϦϯΫ ‣ IPWFSˠݱࡏϚε͕ͦͷ্ʹདྷ͍ͯΔཁૉ
ελΠϧͷઃܭ ‣ ޮՌతͳελΠϧͷઃܭ ‣ $44ಡΈࠐΈͷ༏ઌॱҐΛར༻ͯ͠ཧͷ͠қ͍ελΠϧΛ ઃܭ͢Δ ‣ αΠτશମͷڞ௨ελΠϧ ‣ ϓϩδΣΫτͷελΠϧ
‣ ͦͷจॻಛ༗ͷελΠϧ ‣ ಛఆͷཁૉݻ༗ͷελΠϧ
ग़ྗϝσΟΞʹԠ͍ͨ͡Θ͚ ‣ ελΠϧγʔτΛදࣔ͢ΔϝσΟΞʹԠͯ͡ৼΓ͚Δ͜ͱ ͕Ͱ͖Δ ‣ MJOLཁૉͷNFEJBଐੑͰઃఆ͢Δ ‣ $44ͷ!NFEJBͱ͍͏ηϨΫλΛ༻͍ͯઃఆՄೳ $44Ҏ߱
! ‣ ϝσΟΞͷछྨ ‣ BMMɿશͯͷϝσΟΞʹద༻ σϑΥϧτ ‣ BVSBMɿԻಡΈ্͛ʹద༻ ‣ IBOEIFMEɿ1%"ͳͲͷܞଳʹద༻ ‣ QSJOUɿҹग़ྗʹద༻ ‣ TDSFFOɿҰൠతͳΧϥʔϞχλʹద༻ ‣ UWɿςϨϏͳͲʹద༻
ϙδγϣχϯά ‣ ϘοΫεͷ෯ɾߴ͞ɺςΩετͷճΓࠐΈͳͲઃఆͰ͖Δ ‣ XJEUIɿϘοΫεͷίϯςϯτ෦ͷ෯ ‣ ҰൠαΠζɺBVUP ‣ IFJHIUɿϘοΫεͷίϯςϯτ෦ͷߴ͞ ‣
ҰൠαΠζɺBVUP ‣ qPBUɿςΩετͷճΓࠐΈͷઃఆ ‣ MFGU SJHIU OPOF ‣ DMFBSɿςΩεճΓࠐΈͷղআ ‣ MFGU SJHIU OPOF CPUI ‣ QPTJUJPO ‣ UPQ CPUUPN MFGU SJHIU
EJWͱTQBO ‣ EJWͱTQBOͰબൣғΛ·ͱΊΔ ‣ EJWཁૉTQBOཁૉͰෳͷཁૉΛғΉ͜ͱʹΑͬͯɺҰఆ ͷൣғʹ·ͱΊͯελΠϧΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ ‣ ߴͳελΠϧࢦఆͷجຊͱͳΔ ‣ ϖʔδͷػೳͷԠͯ͡)5.-Λ͚۠͢Δ
‣ ϔομ ‣ ϑολ ‣ ϝχϡʔόʔ ‣ αΠυόʔFUD ! ‣ ஈʹԠ༻ˠ࣍िҎ߱ʹ