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
960
表の幅はどう決まる
表の幅決定の仕組みを解説します。
おばらつかさ
February 02, 2018
Tweet
Share
Other Decks in Design
See All in Design
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
330
Dreamia
elsh
0
130
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.9k
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
1.9k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
560
PdMを始めたUIデザイナーのリアルな課題
muture
0
750
Minuto de Aventura
olgastoryboard
0
160
Pizza Trail v2
jerfusart
0
120
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.3k
Baby Bear Genius
yvonnehsuanho
PRO
0
630
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
160
Ubie Vitalsの取り組み紹介
8845musign
0
650
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Documentation Writing (for coders)
carmenintech
65
4.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
124
18k
Speed Design
sergeychernyshev
22
460
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Side Projects
sachag
452
42k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
90
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Building Your Own Lightsaber
phodgson
101
6k
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*σβΠφʔΛืू͍ͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠