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
表の幅はどう決まる
Search
おばらつかさ
February 02, 2018
Design
3
940
表の幅はどう決まる
表の幅決定の仕組みを解説します。
おばらつかさ
February 02, 2018
Tweet
Share
Other Decks in Design
See All in Design
モデル・デザイン入門
akitsugu7935
0
460
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
620
The Fight
euralisw
0
110
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
600
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
Designing UIs without a UI designer
strongeron
0
120
Sociotechnical design for software and human systems
xinyao
2
480
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Building Applications with DynamoDB
mza
88
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Making Projects Easy
brettharned
108
5.5k
The Pragmatic Product Professional
lauravandoore
24
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Code Review Best Practice
trishagee
54
15k
What the flash - Photography Introduction
edds
64
11k
The Cult of Friendly URLs
andyhume
74
5.7k
Clear Off the Table
cherdarchuk
83
310k
Transcript
දͷ෯Ͳ͏ܾ·Δ IUNMK8FCϓϥοτϑΥʔϜ෦ୈճษڧձ
ࣗݾհ w גࣜձࣾϐΫηϧάϦου w ݱࡏ6*σβΠφʔΛ໊͍ͬͯΔ w ࢴഔମͷࠂσβΠϯΛ͙Β͍ͬͯ·ͨ͠ w 8FCؔ࿈ͷܦݧ͙Β͍ w
ϐΫηϧάϦουͰओʹ6*ઃܭͱը໘σβΠϯ w ࢴͷ͔࣌Β࡞ۀʹ"EPCF*MMVTUSBUPSΛͬͯ·͢ ͓Β͔ͭ͞ !TBVDFSKQ
ॻ੶ w ϊϯσβΠφʔζɾσβΠϯϒοΫ<ୈ൛> ຊޠσβΠϯαϯϓϧ ղઆ w վగ൛8FCσβΠφʔͷͨΊͷK2VFSZೖ σβΠϯαϯϓϧ ղઆ
8FCΞϓϦ࡞ͬͨΓͯ͠·͢ w)6& K2VFSZ w-JWF.E 7VFKT $ISPNF&YUFOTJPO wࣾ༻ͷ8FCΞϓϦ 7VFKT
'JSFCBTF wࣾ༻ͷ4MBDLίϚϯυ 4MBDL $MPVE'VODUJPOT 'JSFCBTF
ࠓͷ༰ σβΠφʔ͞ΜΛରʹͯ͠ɺ දͷ෯ܾఆͷΈΛऔΓ্͛·͢
͍͖ͳΓಓͳͷͰ͕͢ʜ
##ͷϨεϙϯγϒࣄ
w #$ϞόΠϧϑΝʔετ͕ͩʜ w اۀͰͷར༻ϊʔτ1$σεΫτοϓ1$͕ओྲྀ w ϞόΠϧͷΈͰۀΛ݁ͤ͞Δͷ͍͠ w σεΫτοϓϑΝʔετ ϝΠϯ
ը໘ଆʹͲΜͳཁٻ͕͋Δ͔
ϨεϙϯγϒରԠͷӨڹ ࢁͷਓ͕ͻͱͭͷ͍ํͱ͍͏ΑΓɺͻͱΓͷਓ͕ࢁͷ͍ํͱͳΔ
w ༻ײʹมԽ͕Ͱʹ͍͘ͷʹ w XJOEPXαΠζ w ཁૉྔ w ݖݶ w ͝ͱͷֶशίετΛݮΒ͍ͨ͠
ϨεϙϯγϒରԠͷӨڹ ͝ͱͷϑΟοτײΑΓֶशࡁΈ͍উखͷ࠶ར༻
ϨεϙϯγϒରԠͷӨڹ ྫ͑มԽͷܹ͍͠ϨΠΞτΛආ͚Δͱ͔
ͳͷͰɺ࠾༻͠ʹ͍͘ػೳ͕͋Δ
ߦͱྻ͕ΈมΘΔදΈ
w ҰཡੑΛ٘ਜ਼ʹ͍͢͠ w ߦྻೖΕସΘΔͱ࠶ֶश͕ඞཁʹͳΔ w पลཁૉͷҐஔ͕มԽͯ͠͠·͏ w େɺ࣮͕େมʹͳΔ w େɺอक͕େมʹͳΔ
w όάΛੜΈ͕ͪ w ޙ͔Βͷํมߋ͕͍͠ w DPMTQBO SPXTQBO͋ΔͱͭΒ͍ ߦͱྻ͕ΈมΘΔදΈ
ͦΕΑΓදͷڍಈΛѲ͍ͨ͠
w ҙ֎ͱࢥ͍௨ΓʹͳΒͳ͍͜ͱ͕ଟ͍ w ͳΜͱͳ͘ʮͰ͖ΔͩΖ͏ʯͰσβΠϯ͕ͪ͠ w ༰͕ՄมʹͳΔͱ࠷ऴతͳ༧ଌ͕͠ʹ͍͘ w ςʔϒϧɺΘΓͱ͏ ͍ͬͯΔΑ͏ͰΒͳ͍
͋Γ͕ͪͳ͜ͱʜ
w ͬ͘͟ΓΔ͚ͩͰҧ͏ w σβΠφʔ͕ཧղ͢Δ͜ͱͰϝϦοτ͕ w ݁Ռ͕༧Ͱ͖ΔͷͰσβΠϯͷ෯͕͕Δ w ࣮ऀͱͷձ͕εϜʔζʹ w ఆ֎ͷࣄଶͱ͍͏ͷΛݮΒͤΔ
w ΑΓྑ͍ͷ͕Ϣʔβʔʹಧ͖͘͢ͳΔ ςʔϒϧͱྑ͘ͳΖ͏ σβΠφʔ͕Ұา౿ΈࠐΜͰΈΔ
෯ܾఆͷΈ
w ෯ܾఆͷܭࢉํ๏ʹݻఆͷ༷͋Γ·ͤΜ w )5.-༷ʹਪ͞ΕΔͻͱͭͷྫ͕ࡌ͍ͬͯΔ w ϒϥβϕϯμʔଆͷࡋྔͰΞϧΰϦζϜΛ࠾༻Ͱ͖Δ w ͨͩɺ࣮ࡍͷ݁ՌΛൺΔͱ΄΅͓ͳ͡ܭࢉ݁ՌͱͳΔ w ࠓճɺͦͷਪྫͰղઆ
લఏ
w දΈʹͭͷϞʔυ͕͋Δ w UBCMFMBZPVUͷBVUPͱpYFE w ಛผͳࢦఆΛ͠ͳ͚ΕBVUPͱͳΔ w pYFEࢦఆΛ͠ͳ͍ͱ༗ޮʹͳΒͳ͍ BVUPͱpYFE ·ͣେ͖ͳ͔Ε
BVUPͱpYFE େ͖͘ҧ͏෦
table-layout: fixed;
w ؆୯ w ηϧͻͨ͢ΒۉʹׂΔ w ηϧʹXJEUIࢦఆ͕͋ΕɺͦΕʹै͍ɺΓۉʹ w ηϧ෯͕ڱ·ͬͨ࣌ͷ༰ՄೳͳݶΓંΓฦ͢ w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒςΩετ͕ηϧΛಥ͖ൈ͚Δ
w αϯϓϧ pYFEͷ߹
table-layout: auto;
w ͍͜͠ w ηϧ෯͕ڱ·ͬͨ࣌ͷ༰ՄೳͳݶΓંΓฦ͢ w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒද͕ྖҬΛಥ͖ൈ͚Δ w ෯ܭࢉʹΑׂͬͯΓৼΒΕΔ w αϯϓϧ
BVUPͷ߹
Ͱɺྻͷ෯ܭࢉ
w ·ͣશͯͷηϧʹ͓͍ͯ࠷খ෯ͱ࠷େ෯Λࢉग़͢Δ w ද͕࠷খαΠζͰೖΒͳ͚Εಥ͖ൈ͚Δ w ද͕࠷େαΠζͰೖΔͳΒͦΕͰೖΕΔ w ંΓฦͯ͠ೖΔͳΒఔΑ͍෯ΛׂΓৼͬͯೖΕΔ w ྖҬͷ༨Γʢ8ʣྖҬͷ෯දͷ࠷খ෯
w දͷมԽྔʢ%ʣදͷ࠷େ෯දͷ࠷খ෯ w ֤ྻͷมԽྔʢEʣྻͷ࠷େ෯ྻͷ࠷খ෯ w ֤ྻʹ8ʸ%ʷEͨ͠ΛׂΓͯΔ େ·͔ͳྲྀΕ
ͳΔ΄ͲɺΘ͔ΒΜɻ
࠷খ෯ͱ࠷େ෯ͷαϯϓϧ
8ʸ%ʷE
None
None
None
None
None
None
None
w ྖҬͷ෯ͷ༨ΓΛɺ༰ͷมԽྔʹԠׂͯ͡Γ͍ͯͯΔ w ςΩετྔ͕ଟ͍΄Ͳ෯͕͘ͳΔ w ݫີʹ࠷খͱ࠷େͷมԽྔͰ෯ׂ͕ΓৼΒΕΔ w มԽྔ͕গͳ͍ηϧʹڱ͍෯ w มԽྔ͕ଟ͍ηϧʹ͍෯
·ͱΊΔͱʜ
·ͱΊΔͱʜ
࠷ޙʹɺ͞Βʹ͏Ұา
w ΈΛͬͯͬͺΓ࣮ࡍʹಈ͔͢ͷ͕ཧత w ΈΛΔͷʮμϝ͔ʯʹහײʹͳΔͨΊ w ࣮ࡍʹͲ͏ͳΔ͔ΛσβΠϯஈ֊Ͱ͔֬ΊΒΕΔͱ҆৺ w ෦తʹͰ͍͍ͷͰ࡞ͬͯΈΔͱͲ͏ͳΔ͔͕Θ͔Δ w ࣮ࡍͷಈ࡞͕ݕূ͞ΕͨσβΠϯ࣮ऀ҆৺
w +4'JEEMFͱ͔$0%&1&/ͱ͔͕खܰ ࣮ࡍʹಈ͘ͷͰ֬ೝ มͳදΈʹͳΓͦ͏ͱ͍͏༧ײ͕ͨ͠Βɺ࣮ࡍʹ֬ೝ͢Δͷ͕ۙಓ
ΑΓৄ͍͠ใʜ ϐΫηϧάϦουͰ༗ྉͷٕज़ใ৴Λ͍ͯ͠·͢ ࠓճհͨ͠༰ͷΑΓৄ͍͠هࣄ͋Γ·͢
6*σβΠφʔืू͍ͯ͠·͢ ϐΫηϧάϦουͰҰॹʹಇ͍ͯ͘ΕΔ 6*σβΠφʔΛืू͍ͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠