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

非フロントエンジニアが爆速でVuetifyを使うためにキャッチした6つのこと

kimukei
December 17, 2019

 非フロントエンジニアが爆速でVuetifyを使うためにキャッチした6つのこと

bootstrapなどのUIフレームワークに明るくない人(私)がVuetifyを速攻で使っていけるようにキャッチアップしたことをまとめました。

主に以下のことについて言及しています
1. mt-md-2 ← こういうやつ
2. row, col, offset
3. d-flex, justify
4. v-select
5. v-date-picker
6. Vuetifyのバージョン

kimukei

December 17, 2019
Tweet

Other Decks in Programming

Transcript

  1. ඇϑϩϯτΤϯυΤϯδχΞ
    ͕ര଎Ͱ7VFUJGZΛ࢖͏ͨΊ
    ʹΩϟονͨͭ͠ͷ͜ͱ

    View full-size slide

  2. ࣗݾ঺հ
    w ໊લ໦ଜܚ
    w ৽ଔ೥໨
    w -*'6--)0.&`4ݟ͑Δෆಈ࢈Ձ஋ IUUQTMJGVMMIPNFT
    JOEFYKQ

    w 3VCZPO3BJMT TJOBUSB K2VFSZ "84 4FMFOJVN &&

    w /P4DIPPM IUUQTOPTDIPPMBTJB

    w -BSBWFM /VYUKT 7VFUJGZ

    View full-size slide

  3. 7VFUJGZΛ࢖͏ͨΊʹ
    Ωϟονͨͭ͠ͷ͜ͱ

    View full-size slide

  4. NUNEˡ͜͏͍͏΍ͭ
    SPX DPM P⒎TFU
    EqFY KVTUJGZ
    WTFMFDU
    WEBUFQJDLFS
    7VFUJGZͷόʔδϣϯ

    View full-size slide

  5. .mt-md-2ˡ͜Ε

    View full-size slide

  6. NNBSHJO
    QQBEEJOH
    .mt-md-2

    View full-size slide

  7. t: top
    b: bottom
    l: left
    r: right
    x: *-left and *-right
    y: *-top and *-bottom
    a: all
    .mt-md-2 IUUQTWVFUJGZKTDPNKBTUZMFT
    TQBDJOH

    View full-size slide

  8. CSFBLQPJOU
    .mt-md-2

    View full-size slide

  9. CSFBLQPJOU
    UIJTWVFUJGZCSFBLQPJOU
    ͰΞΫηεͰ͖Δ

    View full-size slide

  10. O
    QY
    ͸Oͱ΋ॻ͚Δ
    BVUP΋࢖͑Δ
    .mt-md-2

    View full-size slide

  11. ͳΜͰͷഒ਺

    View full-size slide

  12. ը໘͸ͷഒ਺Ͱग़དྷ͍ͯΔ
    ࢀߟ7FDUPS7JEFP4UBOEBSET

    View full-size slide

  13. ͷഒ਺Ͱ૊·Εͨͷ
    ͕ྑ͍σβΠϯ

    View full-size slide

  14. SPX DPM P⒎TFU

    View full-size slide

  15. WSPX
    WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM
    SPXʢߦʣͷதʹDPMʢྻʣ͕͋Δ

    View full-size slide

  16. WSPX
    DPMݸ
    WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM
    ݸͷDPMʢྻʣ͔ΒͳΔ

    View full-size slide

  17. WSPX
    WDPM
    DPMT
    P⒎TFU
    WDPM
    DPMT
    P⒎TFU
    P⒎TFUͰ࢝·ΓҐஔΛ੍ޚ

    View full-size slide

  18. CSFBLQPJOUΛࢦఆͯ͠Ϩεϙϯγϒͳ഑ஔʹ

    View full-size slide

  19. EqFY KVTUJGZ

    View full-size slide

  20. EqFY
    w Eͱ͸EJTQMBZ
    w EqFYEJTQMBZqFY
    w E\CSFBLQPJOU^qFYͱ͔΋Ͱ͖Δ

    View full-size slide

  21. KVTUJGZ
    w KVTUJGZTUBSU

    w KVTUJGZDFOUFS

    w KVTUJGZFOE

    w KVTUJGZTQBDFCFUXFFO

    w KVTUJGZTQBDFBSPVOE

    View full-size slide

  22. ഑ஔͷجຊ

    View full-size slide

  23. දࣔ
    ˠ
    ˠ
    ˠ
    ѻ͍͍ͨ

    View full-size slide

  24. WNPEFM࢖ͬͯϩδοΫ
    ͪ͝Όͪ͝Όॻ͔ͳ͍

    View full-size slide

  25. ΦϒδΣΫτʹ
    UFYUͱWBMVFΛ༻ҙ͢Ε͹0,

    View full-size slide

  26. ࢀরϓϩύςΟ໊͸
    ઃఆͰ͖Δ

    View full-size slide

  27. WTFMFDU͕៉ྷʹ✨

    View full-size slide

  28. ஀ੜ೔ೖྗϑΥʔϜ
    ࡞Ζ͏

    View full-size slide

  29. CJSUIEBZQJDLFSͳ͍Α

    View full-size slide

  30. CJSUIEBZQJDLFSͳ͍Α
    σϑΥϧτͰ೥ͷબ୒͔Β࢝·Γɺ೔෇ൣғΛ੍ݶ͠ɺ೔෇
    Λબ୒ͨ͠ޙʹϐοΧʔϝχϡʔΛด͡Δͱɺ׬ᘳͳ஀ੜ೔
    ϐοΧʔʹͳΓ·͢ɻ
    CZެࣜ

    View full-size slide

  31. WEBUFQJDLFSΛ
    ΧελϚΠζ͢Δ

    View full-size slide

  32. w ೔ຊޠରԠ
    w ೔෇ͷʮ೔ʯ͸औΔ
    w ೥͔Βબ୒
    w ࠷ॳʹ೥Λબ୒͢Δͱ͖ɺ೥͔ΒʹͳΔΑ͏ʹɹ
    ʢWNPEFMʹॳظ஋Λ༩͑ͯ΋ղܾͰ͖ͳ͍ʣ
    w ೔෇ൣғ੍ݶ
    w ೔෇Λબ୒ͱಉ࣌ʹQJDLFSΛด͡Δ

    View full-size slide

  33. Ͱ΋ͳΜͱ͔

    View full-size slide

  34. ৭ʑ͍͡Γ·͢

    View full-size slide

  35. ௕͍ͷͰޙͰهࣄʹ
    ·ͱΊ·͢

    View full-size slide

  36. 7VFUJGZͷόʔδϣϯ

    View full-size slide

  37. 7VFUJGZͷόʔδϣϯ
    w όʔδϣϯ͸ྑ֬͘ೝ͢΂͠
    w WW݁ߏഁյతͳมߋ͕ଟ͍
    w ϚΠφʔόʔδϣϯݻ༗ͷόά͕͋ͬͨΓ͢Δ
    w Wʹ্͛ͯͳ͍ͳΒ
    w 7VFUJGZͰ͸ͳ͘2VBTBSʹʢ.JHSBUJOHGSPN
    7VFUJGZUP2VBTBSʣ

    View full-size slide

  38. ٧·ͬͨΒόʔδϣϯ
    ͍ٙ·͠ΐ͏

    View full-size slide

  39. -5ͳͲొஃػձΛืू͍ͯ͠·͢
    ͓༠͍͋Ε͹ߦ͖·͢
    !,.3@·Ͱ
    ˣ࣋ͪωλˣ
    3VCZPO3BJMT -BSBWFM /VYUKT
    7VFUJGZ "84

    View full-size slide

  40. ΑΖ͓͘͠ئ͍͠·͢ʂ

    View full-size slide