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

今更だけどGutenbergに触れてみよう

Koji Kuno
October 19, 2019

 今更だけどGutenbergに触れてみよう

Koji Kuno

October 19, 2019
Tweet

More Decks by Koji Kuno

Other Decks in Programming

Transcript

  1. ࠓߋ͚ͩͲ
    (VUFOCFSHʹ৮ΕͯΈΑ͏
    ೥݄೔ʢ౔ʣ
    ΈΜͳͷ৿͗;ϝσΟΞίεϞε͓ͲΔελδΦ
    0MFJO%FTJHOٱ໺ߊ࢘

    View full-size slide

  2. ࣗݾ঺հ
    w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ
    w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠ
    βʔ
    w $PEFS%PKPذෞνϟϯϐΦϯ
    w άϥϑΟοΫσβΠϯग़਎8FCؔ࿈
    ձࣾۈ຿ྺ͸ͳ͠
    w 8FC͸ಠֶ8PSE1SFTTྺ೥Ҏ

    w PMFJOEFTJHODPO!0MFJO@KQ

    View full-size slide

  3. Ͳͬͪʁ
    -FTTUIBOYPSY

    View full-size slide

  4. Ͳͬͪʁ
    6TJOH#MPDL&EJUPSPS$MBTTJD

    View full-size slide

  5. YʢϒϩοΫΤσΟλʣΛ࢖Θͳ͍
    Α͘ฉ͘ཧ༝
    w όʔδϣϯΞοϓͯ͠ίϯςϯπ͕յΕΔͷ͕ා͍
    w ΫϥγοΫΤσΟλʹ׳Ε਌͠ΜͰ͍Δ͔Β

    View full-size slide

  6. όʔδϣϯΛ্͛ͯ΋
    ίϯςϯπ͸յΕ·ͤΜ
    ࣮ݧͯ͠Έ·͢ʂ

    View full-size slide

  7. ҎԼͷ৚݅ͰݻఆϖʔδΛ࡞Γ·͢
    w 8PSE1SFTT
    w ݻఆϖʔδͷςΩετΤσΟλͰ)5.-Λهड़
    w ΧελϚΠβ಺௥Ճ$44ʹͯΦϦδφϧ$44௥Ճ

    View full-size slide

  8. ιʔείʔυ

    ࠨଆʹςΩετ͕ೖΓ·͢ɻࠨଆʹςΩετ͕ೖΓ·͢ɻ………
    ӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻ………
    ӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻ………


    View full-size slide

  9. .body-wrap {
    display: flex;
    justify-content: space-between;
    }
    .body-wrap .left,
    .body-wrap .right {
    width: 45%;
    border: 5px solid #ccc;
    padding: 15px;
    }
    .body-wrap .left p,
    .body-wrap .right p {
    margin-bottom: 2em;
    }
    .body-wrap .left p:last-child,
    .body-wrap .right p:last-child {
    margin-bottom: 0;
    }

    View full-size slide

  10. %&.0
    ͜ͷ··8PSE1SFTTͷόʔδϣϯΛ
    ࠷৽൛ʹͯ͠Έ·͠ΐ͏

    View full-size slide

  11. ΫϥγοΫΤσΟλ͸೥຤ʹΞοϓσʔ
    τ͕ऴྃ༧ఆ

    View full-size slide

  12. $MBTTJD&EJUPSJTBOPGpDJBM8PSE1SFTTQMVHJO BOEXJMM
    CFGVMMZTVQQPSUFEBOENBJOUBJOFEVOUJMBUMFBTU
    PSBTMPOHBTJTOFDFTTBSZ

    View full-size slide

  13. XJMMCFGVMMZTVQQPSUFEBOE
    NBJOUBJOFEVOUJMBUMFBTU PS
    BTMPOHBTJTOFDFTTBSZ
    ͜ΕΛͲ͏ಡΉ͔

    View full-size slide

  14. (VUFOCFSHͷ׆༻ํ๏
    w γϣʔτΧοτϑϧ׆༻
    w ϒϩοΫϓϥάΠϯΛ׆༻

    View full-size slide

  15. γϣʔτΧοτҰཡ
    IUUQTKBXPSEQSFTTPSHHVUFOCFSHIBOECPPLGBR

    View full-size slide

  16. ϒϩοΫϓϥάΠϯͷ঺հ
    FEJUPSTLJU

    View full-size slide

  17. ৭ʑͱࢼͯ͠ΈΑ͏ʂ

    View full-size slide