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

Transcript

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

   View Slide

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

   View Slide

3. Ͳͬͪʁ
   -FTTUIBOYPSY
   

   View Slide

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

   View Slide

5. ͳͥʁ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ιʔείʔυ
   
   ࠨଆʹςΩετ͕ೖΓ·͢ɻࠨଆʹςΩετ͕ೖΓ·͢ɻ………
   ӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻ………
   ӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻӈଆʹςΩετ͕ೖΓ·͢ɻ………
   
   
   

   View Slide

10. .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 Slide

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

    View Slide

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

    View Slide

13. $MBTTJD&EJUPSJTBOPGpDJBM8PSE1SFTTQMVHJO BOEXJMM
    CFGVMMZTVQQPSUFEBOENBJOUBJOFEVOUJMBUMFBTU
    PSBTMPOHBTJTOFDFTTBSZ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide