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
1k
表の幅はどう決まる
表の幅決定の仕組みを解説します。
おばらつかさ
February 02, 2018
Tweet
Share
Other Decks in Design
See All in Design
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
690
The Spectacular Lies of Maps
axbom
PRO
1
200
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
840
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
CMS管理画面のアクセシビリティ
magi1125
8
2.3k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
7 Core Values of Round-L
wired888
0
730
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
Liquid Iron
mcduckyart
1
120
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Practical Orchestrator
shlominoach
189
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
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*σβΠφʔΛืू͍ͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠