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
990
表の幅はどう決まる
表の幅決定の仕組みを解説します。
おばらつかさ
February 02, 2018
Tweet
Share
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
700
太田博三(@usagisan2020)
otanet
0
220
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
1k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
160
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
340
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
250
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
130
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
200
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
100
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Optimizing for Happiness
mojombo
376
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Gamification - CAS2011
davidbonilla
80
5.1k
The Cult of Friendly URLs
andyhume
78
6.2k
A designer walks into a library…
pauljervisheath
205
24k
Speed Design
sergeychernyshev
25
760
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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*σβΠφʔΛืू͍ͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠