広島フロントエンド勉強会 Vol. 1 『Flexboxを使いこなす』

Transcript

1. 'MFYCPYΛ࢖͍͜ͳ͢ $PEF$PEF Ҫ্୓

2. Ҫ্୓ w ޿ౡϑϩϯτΤϯυษڧձओ࠵ w $44/JUFJO)*304)*."࣮ߦҕһձ෭ҕһ௕ w 8&#506$).&&5*/(ड෇ͷਓ $PEF$PEF ͜Μͳਓ

3. w 'MFYCPYͷ֓ཁ w 'MFYCPYͰศརͳ͜ͱ w ϓϩύςΟ w γϣʔτϋϯυ w 'MFYCPYͷ࢖͍Ͳ͜Ζ

   w Φεεϝͷษڧ๏ w ·ͱΊ ໨࣍

4. 'MFYCPYͷ֓ཁ ˞ਖ਼໊ࣜশ$44'MFYJCMF#PY-BZPVU.PEVMF

5. ΠϯλʔϑΣʔεઃܭ༻ʹ࠷దԽ͞Εͨ $44ϘοΫεϞσϧ ೥͝Ζ͔Β͋ͬͨɻ ೥࢓༷มߋɻ ೥࢓༷มߋɻ ͦΕʹΑΓɺόʔδϣϯ͚ͩͰͳ͘ ϒϥ΢β͝ͱͰ΋࣮૷ʹࠩҟ͕͋Δɻ

6. ˞*&ʹόά͋Γ IUUQXXXDPOJGFSKQJF@DIFDLIUNM 1)14&44*%BDEDTOCEJEIFBUE $BO*VTF

7. 'MFYCPYͰศརͳ͜ͱ

8. w ߦͰԣฒͼ w ԣฒͼʹͳͬͨཁૉͷߴ͞Λἧ͑Δ w ෳ਺ཁૉͷఱ஍தԝ഑ஔ w ϦΩουϨΠΞ΢τ ϓϩύςΟΛ૊Έ߹ΘͤͨΓɺ +BWB4DSJQUʹཔ͍ͬͯͨΑ͏ͳ഑ஔ͕؆୯ʹͰ͖Δ

9. ϓϩύςΟ

10. Ұॹʹ஋Λೖྗͯ͠ࢼͯ͠Έ·͠ΐ͏ IUUQHPPHMD98TF

11. EJTQMBZGMFY ·ͣ͸͡Ίʹ ਌

12. qFYEJSFDUJPO w SPX w DPMVNO w SPXSFWFSTF w DPMVNOSFWFSTF ࢠཁૉ

    'MFYJUFN ͷ഑ஔΛܾΊ·͢ ਌

13. qFYXSBQ w OPXSBQ w XSBQ w XSBQSFWFSTF ࢠཁૉͷંΓฦ͠Λઃఆ͠·͢ ਌

14. KVTUJGZDPOUFOU w GMFYTUBSU w GMFYFOE w DFOUFS w TQBDFCFUXFFO w

    TQBDFBSPVOE ਌ཁૉͷਫฏํ޲Λج४ʹࢠཁૉ഑ஔ͠·͢ ਌

15. BMJHOJUFNT w GMFYTUBSU w GMFYFOE w DFOUFS w TUSFUDI w

    CBTFMJOF ਌ཁૉͷਨ௚ํ޲Λج४ʹࢠཁૉ഑ஔ͠·͢ ਌

16. BMJHODPOUFOU w GMFYTUBSU w GMFYFOE w DFOUFS w TUSFUDI w

    CBTFMJOF w TQBDFCFUXFFO w TQBDFBSPVOE ਌ཁૉͷਨ௚ํ޲Λج४ʹෳ਺ߦࢠཁૉΛ഑ஔ͠·͢ ਌

17. qFYHSPX w ੔਺ 
 
 
 ਺஋ʹΑͬͯԣ෯Λ෼഑
 
 େ͖͍ํ͕ɺ޿͘ͳΔɻ

    ࢠཁૉͷ৳ͼΔഒ཰Λܾఆ͠·͢ ࢠ

18. qFYHSPXͷαΠζܭࢉ qFYHSPX qFYHSPX QY QY QY QY QY QY

19. qFYTISJOL w ਖ਼ͷ੔਺ 
 
 
 ਺஋ʹΑͬͯԣ෯Λ෼഑
 
 େ͖͍ํ͕ɺ޿͘ͳΔɻ


    
 
 ਌ཁૉ͔Β͸Έग़࣌͢ͷΈػೳ
 
 
 ྫ਌QY ࢠQY 
 
 ɹ൪໨ͷΈGMFYTISJOL ࢠཁૉͷॖΉഒ཰Λܾఆ͠·͢ ࢠ

20. qFYCBTJT w ਖ਼ͷ੔਺ BVUP ࢠཁૉͷ࠷ॳͷαΠζΛݩʹ ओ࣠ํ޲αΠζͷॳظ஋Λܾఆ͢Δ ˞ओ࣠ํ޲
 qFYEJSFDUJPOͷ஋ ࢠ ˞όά͋Γ


    *&Ͱ͸ɺCPYTJ[JOHCPSEFSCPYͷܭࢉΛߦͬͯ͘Εͳ͍

21. BMJHOTFMG ࢠཁૉͷ੔ྻΛBMJHOJUFNTͰͷࢦఆΑΓ༏ઌͤ͞Δ ࢠ w GMFYTUBSU w GMFYFOE w DFOUFS w

    TUSFUDI w CBTFMJOF

22. PSEFS ࢠཁૉͷฒͿॱ൪Λܾఆ͠·͢ w ਖ਼ͷ੔਺ ˞)5.-ࣗମ͕ೖΕସΘΔΘ͚Ͱ͸ͳ͍఺ʹ஫ҙ ࢠ

23. γϣʔτϋϯυ

24. qFYqPX qFYEJSFDUJPOͱqFYXSBQͷγϣʔτϋϯυ w OPXSBQ w XSBQ w XSBQSFWFSTF w SPX

    w DPMVNO w SPXSFWFSTF w DPMVNOSFWFSTF qFYEJSFDUJPO qFYXSBQ ਌

25. qFY qFYHSPX qFYTISJOL qFYCBTJTͷγϣʔτϋϯυ qFYHSPX qFYTISJOL qFYCBTJT w ਖ਼ͷ੔਺ w

    ਖ਼ͷ੔਺ w ਖ਼ͷ੔਺ ࢠ

26. ஫ҙ఺ w GMPBU΍DMFBS΍WFSUJDBMBMJHO͸GMFYΞΠςϜʹӨڹ͠ͳ͍ w DPMVNOSFWFSTF͸GJSTUMJOF GJSTUMFUUFSͳͲͷٙࣅཁૉ ͸దԠ͞Εͳ͍ w SFWFSTF PSEFS͸)5.-ࣗମ͕ೖΕସΘΔΘ͚Ͱ͸ͳ͍

27. 'MFYCPYͷ࢖͍Ͳ͜Ζ

28. ϝχϡʔϘλϯ

29. ϕʔεϨΠΞ΢τ

30. ΧϥϜ

31. Φεεϝͷษڧ๏

32. 'MFYCPY1MBZHSPVOE w 'MFYCPYͷ࣮ݧ͕Ͱ͖·͢ɻ

33. '-&9#09'30((: w 'MFYCPYΛήʔϜײ֮Ͱ༡ͼͳ͕Βֶ΂·͢ɻ

34. ·ͱΊ

35. ·ͱΊ w ΋͏࢖ͬͯ΋͍͍ஈ֊ʹདྷ͍ͯΔ͸ͣ
 
 ΋͏࢖͍ͬͯΔਓ΋͍Δ͸ͣ w 'MFYCPYͷಛੑ͕͋Δ 'MFYCPYΛཧղͯ͠ɺָΛ͠·͠ΐ͏

36. /&95 $44(SJE-BZPVU.PEVMF &EHF *&ͷΈ࣮૷ (PPHMF$ISPNF΋ࢼݧతʹ࣮૷ ઃఆඞཁ