Upgrade to Pro — share decks privately, control downloads, hide ads and more …

表の幅はどう決まる

 表の幅はどう決まる

表の幅決定の仕組みを解説します。

おばらつかさ

February 02, 2018
Tweet

Other Decks in Design

Transcript

  1. දͷ෯͸Ͳ͏ܾ·Δ
    IUNMK8FCϓϥοτϑΥʔϜ෦ୈճษڧձ

    View Slide

  2. ࣗݾ঺հ
    w גࣜձࣾϐΫηϧάϦου
    w ݱࡏ͸6*σβΠφʔΛ໊৐͍ͬͯΔ
    w ࢴഔମͷ޿ࠂσβΠϯΛ೥͙Β͍΍ͬͯ·ͨ͠
    w 8FCؔ࿈ͷܦݧ͸೥͙Β͍
    w ϐΫηϧάϦουͰ͸ओʹ6*ઃܭͱը໘σβΠϯ
    w ࢴͷ࣌୅͔Β࡞ۀʹ͸"EPCF*MMVTUSBUPSΛ࢖ͬͯ·͢
    ͓͹Β͔ͭ͞
    !TBVDFSKQ

    View Slide

  3. ॻ੶
    w ϊϯσβΠφʔζɾσβΠϯϒοΫ<ୈ൛>

    ೔ຊޠσβΠϯαϯϓϧղઆ
    w վగ൛8FCσβΠφʔͷͨΊͷK2VFSZೖ໳
    σβΠϯαϯϓϧղઆ

    View Slide

  4. 8FCΞϓϦ࡞ͬͨΓ΋ͯ͠·͢
    w)6&

    K2VFSZ

    w-JWF.E

    7VFKT$ISPNF&YUFOTJPO

    wࣾ಺༻ͷ8FCΞϓϦ

    7VFKT'JSFCBTF

    wࣾ಺༻ͷ4MBDLίϚϯυ

    4MBDL$MPVE'VODUJPOT'JSFCBTF

    View Slide

  5. ࠓ೔ͷ಺༰
    σβΠφʔ͞ΜΛର৅ʹͯ͠ɺ
    දͷ෯ܾఆͷ࢓૊ΈΛऔΓ্͛·͢

    View Slide

  6. ͍͖ͳΓ࿬ಓͳͷͰ͕͢ʜ

    View Slide

  7. ##ͷϨεϙϯγϒࣄ৘

    View Slide

  8. w #$͸ϞόΠϧϑΝʔετ͕ͩʜ
    w اۀͰͷར༻͸ϊʔτ1$΍σεΫτοϓ1$͕ओྲྀ
    w ϞόΠϧ୺຤ͷΈͰۀ຿Λ׬݁ͤ͞Δͷ͸೉͍͠
    w σεΫτοϓϑΝʔετ
    ϝΠϯ୺຤

    View Slide

  9. ը໘ଆʹ͸ͲΜͳཁٻ͕͋Δ͔

    View Slide

  10. ϨεϙϯγϒରԠ΁ͷӨڹ
    ୔ࢁͷਓ͕ͻͱͭͷ࢖͍ํͱ͍͏ΑΓ΋ɺͻͱΓͷਓ͕୔ࢁͷ࢖͍ํͱͳΔ

    View Slide

  11. w ࢖༻ײʹมԽ͕Ͱʹ͍͘΋ͷʹ
    w XJOEPXαΠζ
    w ཁૉྔ
    w ݖݶ
    w ୺຤͝ͱͷֶशίετΛݮΒ͍ͨ͠
    ϨεϙϯγϒରԠ΁ͷӨڹ
    ୺຤͝ͱ΁ͷϑΟοτײΑΓֶशࡁΈ࢖͍উखͷ࠶ར༻

    View Slide

  12. ϨεϙϯγϒରԠ΁ͷӨڹ
    ྫ͑͹มԽͷܹ͍͠ϨΠΞ΢τΛආ͚Δͱ͔

    View Slide

  13. ͳͷͰɺ࠾༻͠ʹ͍͘ػೳ͕͋Δ

    View Slide

  14. ߦͱྻ͕૊ΈมΘΔද૊Έ

    View Slide

  15. w ҰཡੑΛ٘ਜ਼ʹ͠΍͍͢
    w ߦྻೖΕସΘΔͱ࠶ֶश͕ඞཁʹͳΔ
    w पลཁૉͷҐஔ͕มԽͯ͠͠·͏
    w େ఍ɺ࣮૷͕େมʹͳΔ
    w େ఍ɺอक͕େมʹͳΔ
    w όάΛੜΈ͕ͪ
    w ޙ͔Βͷํ਑มߋ͕೉͍͠
    w DPMTQBO SPXTQBO͋ΔͱͭΒ͍
    ߦͱྻ͕૊ΈมΘΔද૊Έ

    View Slide

  16. ͦΕΑΓ΋දͷڍಈΛ೺Ѳ͍ͨ͠

    View Slide

  17. w ҙ֎ͱࢥ͍௨ΓʹͳΒͳ͍͜ͱ͕ଟ͍
    w ͳΜͱͳ͘ʮͰ͖ΔͩΖ͏ʯͰσβΠϯ͕ͪ͠
    w ಺༰͕ՄมʹͳΔͱ࠷ऴతͳ༧ଌ͕͠ʹ͍͘
    w ςʔϒϧɺΘΓͱ࢖͏
    ஌͍ͬͯΔΑ͏Ͱ஌Βͳ͍

    View Slide

  18. ͋Γ͕ͪͳ͜ͱʜ

    View Slide

  19. w ͬ͘͟Γ஌Δ͚ͩͰ΋ҧ͏
    w σβΠφʔ͕ཧղ͢Δ͜ͱͰϝϦοτ͕
    w ݁Ռ͕༧૝Ͱ͖ΔͷͰσβΠϯͷ෯͕޿͕Δ
    w ࣮૷ऀͱͷձ࿩͕εϜʔζʹ
    w ૝ఆ֎ͷࣄଶͱ͍͏ͷΛݮΒͤΔ
    w ΑΓྑ͍΋ͷ͕Ϣʔβʔʹಧ͖΍͘͢ͳΔ
    ςʔϒϧͱ஥ྑ͘ͳΖ͏
    σβΠφʔ͕Ұา౿ΈࠐΜͰΈΔ

    View Slide

  20. ෯ܾఆͷ࢓૊Έ

    View Slide

  21. w ෯ܾఆͷܭࢉํ๏ʹ͸ݻఆͷ࢓༷͸͋Γ·ͤΜ
    w )5.-࢓༷ʹ͸ਪ঑͞ΕΔͻͱͭͷྫ͕ࡌ͍ͬͯΔ
    w ϒϥ΢βϕϯμʔଆͷࡋྔͰΞϧΰϦζϜΛ࠾༻Ͱ͖Δ
    w ͨͩɺ࣮ࡍͷ݁ՌΛൺ΂Δͱ΄΅͓ͳ͡ܭࢉ݁ՌͱͳΔ
    w ࠓճ͸ɺͦͷਪ঑ྫͰղઆ
    લఏ

    View Slide

  22. w ද૊Έʹ͸ͭͷϞʔυ͕͋Δ
    w UBCMFMBZPVUͷBVUPͱpYFE
    w ಛผͳࢦఆΛ͠ͳ͚Ε͹BVUPͱͳΔ
    w pYFE͸ࢦఆΛ͠ͳ͍ͱ༗ޮʹͳΒͳ͍
    BVUPͱpYFE
    ·ͣ͸େ͖ͳ෼͔Ε໨

    View Slide

  23. BVUPͱpYFE
    େ͖͘ҧ͏෦෼

    View Slide

  24. table-layout: fixed;

    View Slide

  25. w ؆୯
    w ηϧ͸ͻͨ͢Βۉ౳ʹׂΔ
    w ηϧʹXJEUIࢦఆ͕͋Ε͹ɺͦΕʹै͍ɺ࢒Γ͸ۉ౳ʹ
    w ηϧ෯͕ڱ·ͬͨ࣌ͷ಺༰͸ՄೳͳݶΓંΓฦ͢
    w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒςΩετ͕ηϧΛಥ͖ൈ͚Δ
    w αϯϓϧ
    pYFEͷ৔߹

    View Slide

  26. table-layout: auto;

    View Slide

  27. w ΍΍͍͜͠
    w ηϧ෯͕ڱ·ͬͨ࣌ͷ಺༰͸ՄೳͳݶΓંΓฦ͢
    w ંΓฦ͠Ͱ͖ͳ͘ͳͬͨΒද͕ྖҬΛಥ͖ൈ͚Δ
    w ෯͸ܭࢉʹΑׂͬͯΓৼΒΕΔ
    w αϯϓϧ
    BVUPͷ৔߹

    View Slide

  28. Ͱɺྻͷ෯ܭࢉ

    View Slide

  29. w ·ͣશͯͷηϧʹ͓͍ͯ࠷খ෯ͱ࠷େ෯Λࢉग़͢Δ
    w ද͕࠷খαΠζͰೖΒͳ͚Ε͹ಥ͖ൈ͚Δ
    w ද͕࠷େαΠζͰೖΔͳΒͦΕͰೖΕΔ
    w ંΓฦͯ͠ೖΔͳΒఔΑ͍෯ΛׂΓৼͬͯೖΕΔ
    w ྖҬͷ༨Γʢ8ʣྖҬͷ෯දͷ࠷খ෯
    w දͷมԽྔʢ%ʣදͷ࠷େ෯දͷ࠷খ෯
    w ֤ྻͷมԽྔʢEʣྻͷ࠷େ෯ྻͷ࠷খ෯
    w ֤ྻʹ8ʸ%ʷEͨ͠஋ΛׂΓ౰ͯΔ
    େ·͔ͳྲྀΕ

    View Slide

  30. ͳΔ΄ͲɺΘ͔ΒΜɻ

    View Slide

  31. ࠷খ෯ͱ࠷େ෯ͷαϯϓϧ

    View Slide

  32. 8ʸ%ʷE

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. w ྖҬͷ෯ͷ༨ΓΛɺ಺༰ͷมԽྔʹԠׂͯ͡Γ౰͍ͯͯΔ
    w ςΩετྔ͕ଟ͍΄Ͳ෯͕޿͘ͳΔ
    w ݫີʹ͸࠷খͱ࠷େͷมԽྔͰ෯ׂ͕ΓৼΒΕΔ
    w มԽྔ͕গͳ͍ηϧʹ͸ڱ͍෯
    w มԽྔ͕ଟ͍ηϧʹ͸޿͍෯
    ·ͱΊΔͱʜ

    View Slide

  41. ·ͱΊΔͱʜ

    View Slide

  42. ࠷ޙʹɺ͞Βʹ΋͏Ұา

    View Slide

  43. w ࢓૊ΈΛ஌ͬͯ΋΍ͬͺΓ࣮ࡍʹಈ͔͢ͷ͕ཧ૝త
    w ࢓૊ΈΛ஌Δͷ͸ʮμϝ͔΋ʯʹහײʹͳΔͨΊ
    w ࣮ࡍʹͲ͏ͳΔ͔ΛσβΠϯஈ֊Ͱ͔֬ΊΒΕΔͱ҆৺
    w ෦෼తʹͰ΋͍͍ͷͰ࡞ͬͯΈΔͱͲ͏ͳΔ͔͕Θ͔Δ
    w ࣮ࡍͷಈ࡞͕ݕূ͞ΕͨσβΠϯ͸࣮૷ऀ΋҆৺
    w +4'JEEMFͱ͔$0%&1&/ͱ͔͕खܰ
    ࣮ࡍʹಈ͘΋ͷͰ֬ೝ
    มͳද૊ΈʹͳΓͦ͏ͱ͍͏༧ײ͕ͨ͠Βɺ࣮ࡍʹ֬ೝ͢Δͷ͕ۙಓ

    View Slide

  44. ΑΓৄ͍͠৘ใ͸ʜ
    ϐΫηϧάϦουͰ͸༗ྉͷٕज़৘ใ഑৴Λ͍ͯ͠·͢
    ࠓճ঺հͨ͠಺༰ͷΑΓৄ͍͠هࣄ΋͋Γ·͢

    View Slide

  45. 6*σβΠφʔืू͍ͯ͠·͢
    ϐΫηϧάϦουͰ͸Ұॹʹಇ͍ͯ͘ΕΔ
    6*σβΠφʔΛืू͍ͯ͠·͢

    View Slide

  46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide