Layout with CSS - display : flex;

display : flex;

Transcript

1. $44ʹΑΔϨΠΞ΢τ
2. ͳͥϨΠΞ΢τ͕ॏཁ͔ʁ w΢ΣϒαΠτΛར༻͢Δਓ͸ԿΒ͔ͷ৘ใΛ୳͍ͯ͠Δɻ
   wͦͷ৘ใΛ୳͠΍͘͢͢Δͷ͕΢ΣϒσβΠφʔͷ࢓ࣄͰ͋Δɻ
   w୳͠΍͘͢͢ΔͨΊʹ͸ɺϨΠΞ΢τͷٕज़͕ඞཁͱͳΔɻ
3. IUUQT[P[PKQTQ Ұཡϖʔδ ৄࡉϖʔδ ྫ ཉ͍͠঎඼Λ
   ୳ͯ͠ɺ ৄ͘͠
   ݟΔɻ
   ങ͏ɻ
4. IUUQTXXXZPVUVCFDPNDIBOOFM6$4)QSYC5*8(,;[L3D"WJEFPT Ұཡϖʔδ ৄࡉϖʔδ ྫ ݟΔɻௌ͘ɻ ݟ͍ͨ
   ಈըΛ
   ୳ͯ͠ɺ
5. Ұཡϖʔδ Ϣʔβʔ͕
   ৘ใΛޮ཰Α͘
   ୳ͤΔΑ͏ʹɺ
   ۉҰʹฒ΂͍ͯΔɻ ࠓճ͸͜ͷΑ͏ͳ
   Ұཡϖʔδͷ࡞ΓํΛ
   ֶͼ·͢ɻ
6. ࡞Δͱ͖ͷߟ͑ํ w·ͣɺͭͷΞΠςϜʢ঎඼΍ಈըʣ͕ೖΔശΛ४උ͢Δ
   wശʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ
   wശΛ૿΍͢
   wശΛԣʹฒ΂Δ ͜ͷ͋ͱ۩ମతʹઆ໌͍͖ͯ͠·͢ɻ
7. ը૾ จࣈ ͭͷ
   ΞΠςϜ ͭͷΞΠςϜʢ঎඼΍ಈըͳͲʣ͸ը૾ͱจࣈͰߏ੒͞ΕΔ͜ͱ͕ଟ͍
8. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ
   ಺ശ จࣈͷೖΔ
   ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ ը૾ จࣈ
9. ശΛ૿΍͢ ը૾ จࣈ ը૾ ശ͸૿΍͢ͱɺ
   ԼͷํʹฒͿɻ
   ԣʹฒ΂Δʹ͸ʁ
10. ശΛԣʹฒ΂Δ ը૾ จࣈ ը૾ จࣈ ը૾ จࣈ ը૾ ·ͣɺฒ΂͍ͨ΋ͷΛ
    େ͖ͳശʹೖΕΔɻ
    ͦͷ͋ͱɺ
    େ͖ͳശʹରͯ͠
    ʮத਎Λԣʹฒ΂ͯʯ
    ͱ͍͏ࢦࣔΛ͢Δͱɺ
    ͜ͷΑ͏ʹฒΜͰ͘ΕΔɻ
    ˞ฒ΂͍ͨ΋ͷʹ
    ʮฒΜͰʯͱݴͬͯ΋
    ฒΜͰ͘Εͳ͍ͷͰ஫ҙ͠Α͏ɻ
    ͋͞ɺ͜͜·ͰͷखॱΛ
    )5.-ͱ$44Ͱදݱ͍͖ͯ͠·͢ɻ
11. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά .item ͱೖྗͯ͠λϒΩʔΛԡ͢ͱɺ <div class="item"></div> )5.-Ͱද͢ ശ DMBTTΛ࢖ͬͯശʹ໊લΛ෇͚Δɻ
    ޙʑͷελΠϦϯάͷͨΊɺ
    ശʹ͸Θ͔Γ΍໊͍͢લΛ෇͚Δɻ
    ໊લʹϧʔϧ͸ͳ͘ɺࣗ෼ͰܾΊΔɻ ֎ശʹʮJUFNʯͱ͍͏໊લΛ෇͚Α͏ ͱల։͞ΕΔɻ ͜ͷதʹɺ
    ͭͷ಺ശΛ࡞Δɻ Πϥετ͸
    IUUQTQVCMJDEPNBJOWFDUPSTPSH
    ͔Βμ΢ϯϩʔυͨ͠ஶ࡞ݖϑϦʔͷ΋ͷͰ͢ɻ Α͘ݟ͍ͯͩ͘͞ʂ͋ͨ·ʹυοτ͕෇͍͍ͯ·͢
12. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά <div class="item"> <div class="item-image"></div> <div class="item-text"></div> </div> )5.-Ͱද͢ ͜ͷ಺ശʹʮJUFNJNBHFʯͱ͍͏໊લΛ෇͚Α͏ ͜ͷ಺ശʹʮJUFNUFYUʯͱ͍͏໊લΛ෇͚Α͏ ͜ΕΒͷ
    ಺ശʹ
    ίϯςϯπΛ
    ೖΕΔɻ
13. ը૾ͱจࣈ͕ೖΔശΛ४උͯ͠ɺͦ͜ʹίϯςϯπʢը૾΍จࣈʣΛೖΕΔ ը૾ͷೖΔ಺ശ จࣈͷೖΔ಺ശ ͜ΕΒΛ·ͱΊͨ֎ശ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div> <div class="item-text"> λΠΨʔΤοά </div> </div> )5.-Ͱද͢ ͦΕͧΕͷ಺ശʹ
    ίϯςϯπΛೖΕΔɻ ͜Εͱಉ͡ߏ੒ͷΞΠςϜΛ
    ͋ͱͭ࡞੒͠Α͏ɻ
    ίϐϖͯ͠ɺίϯςϯπͷΈΛ
    ࠩ͠ସ͑Δͱ଎͘Ͱ͖Δɻ
14. ശΛ૿΍͢ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div> <div class="item-text"> λΠΨʔΤοά </div> </div> )5.-Ͱද͢ Ϩουϋοτ <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> ίϐϖͯ͠ίϯςϯπΛࠩ͠ସ͑
15. ശΛԣʹฒ΂Δ λΠΨʔΤοά <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div> <div class="item-text"> λΠΨʔΤοά </div> </div> <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> )5.-Ͱ
    ελΠϦϯάͷ४උ Ϩουϋοτ <div class="items"> </div> ฒ΂͍ͨ΋ͷΛେ͖ͳശʹೖΕΔ ऴྃλάΛ๨Εͳ͍Α͏ʹ͠Α͏ େശͷ໊લΛ෇͚Δɻ
    DPOUBJOFS΍
    XSBQQFSͰ΋ྑ͍ɻ
16. ശΛԣʹฒ΂Δ $44ͰϨΠΞ΢τ λΠΨʔΤοά Ϩουϋοτ .items { display: flex; } Ұ൪֎ͷେശʹରͯ͠ DMBTT໊΁ͷࢦࣔʹ͸
    ಄ʹυοτΛ෇͚Δɻ ʮத਎Λԣʹฒ΂ͯʯͱࢦࣔ df tab ԣʹฒΜͩʂ
17. <div class="item"> <div class="item-image"> <img src="*****1.png" alt=""> </div> <div class="item-text"> λΠΨʔΤοά </div> </div> <div class="item"> <div class="item-image"> <img src="*****2.png" alt=""> </div> <div class="item-text"> Ϩουϋοτ </div> </div> <div class="items"> </div> λΠΨʔΤοά Ϩουϋοτ w ରԠؔ܎Λཧղ͠Α͏ɻ
    w ߏ଄Λݟ΍͘͢͢ΔͨΊɺ)5.-ʹ͸൒֯εϖʔεͰΠϯσϯτΛೖΕΑ͏ɻ ਤͱ
    ίʔυͷ
    ରԠؔ܎
18. ల։લ ల։ޙ ԣʹฒ΂Δ df display : flex ંΓฦ͢ fxww flex-wrap : wrap; ௨ৗɺ͜ͷͭΛηοτͰࢦఆ͠·͢ɻ
    ͜ͷࢦఆΛ͢Δͷ͸ɺฒ΂͍ͨ΋ͷͰ͸ͳ͘ɺฒ΂͍ͨ΋ͷͷʮ਌ʯͰ͋Δ͜ͱʹ஫ҙ͠Α͏ɻ ઃఆํ๏ ശΛԣʹฒ΂Δ
19. ·ͱΊ wίϯςϯπ͕ೖΔശΛEJWλάͰද͢ɻ
    wEJWλάʹ͸ͦΕ͕ԿͰ͋Δ͔Θ͔ΔΑ͏ʹDMBTTͰ໊લΛ෇͚Δɻ
    wI΍Bλάʹ΋DMBTTͰ໊લΛ෇͚Δ͜ͱ͕Ͱ͖Δɻ
    wEJTQMBZ
    
    qFY
    Ͱͦͷ಺ଆʹ͋ΔശΛฒ΂Δ͜ͱ͕Ͱ͖Δɻ
    wqFYXSBQ
    
    XSBQ
    Ͱͦͷ಺ଆʹ͋ΔശΛંΓฦ͢͜ͱ͕Ͱ͖Δɻ
    w)5.-λάͷߏ଄͕ෳࡶʹͳΔͷͰɺίϐϖϛεʹ஫ҙ͠Α͏ɻ
    wDMBTT໊΍λάͷೖΕࢠؔ܎Λؒҧ͑ͨΓɺऴྃλά͕଍Γͳ͍৔߹ʹ͸ɺ͏·͍͖͘·ͤΜɻ ϏσΦΛݟͳ͕Β$PEF1FOͰ΍ͬͯΈΑ͏ʂ