Tweet
Tweet

Slide 1

Slide 1 text

ͰϨΠΞ΢τ͢Δ

Slide 2

Slide 2 text

෯ͷϘοΫεΛฒ΂Δˠը໘෯ʹ߹ΘͤͨϨΠΞ΢τͰ͖Δ ϘοΫεʹରͯ͠෯Λࢦఆ͢Δ ฒ΂ΔࢦఆΛ͢Δ ࠷ॳ͸਌ʹରͯ͠ͷ෯ʹͳ͍ͬͯΔ ਌ʹରͯ͠෯Λ൒෼ʢʣʹઃఆ͔ͯ͠Β ฒ΂Δͱɺߦ͋ͨΓͭͣͭฒͿɻ ͜ͷߟ͑ํΛԠ༻͢Ε͹ɺ ͭ΍ͭͣͭฒ΂Δ͜ͱ΋Ͱ͖Δɻ΍ͬͯΈΑ͏ɻ w50p width : 50%; tab w100p ͞Βʹը૾ʹ͸ ͦͷ਌ʹରͯ͠ ͽͬͨΓʢʣͷ ෯ʹઃఆ͢Δ ਺ࣈͷޙʹQΛ෇͚Δͱʹల։͞ΕΔ

Slide 3

Slide 3 text

)5.-ͷ਌ࢠͷؔ܎Λཧղ͠Α͏ JNH͔ΒݟͯɺJUFN͸਌ʹ͋ͨΔɻ ʮ਌͸ࢠΛแΉʯͱ֮͑Α͏ɻ .item img .item img width: 100%; ਌ʹͽͬͨΓ߹ΘͤΔʹ͸ ෯Λʹઃఆ͢Δɻ EJWDMBTTJUFN JNHTSDlIUUQT QOHzBMU EJW

Slide 4

Slide 4 text

ฒ΂ͨ΋ͷʹNBSHJOΛ͚ͭΔ ߹Θͤͯʹ͢Δͱ ϐολϦऩ·Δ .items width: 50%; .item .item width: 50%; .items ༨നΛ ͚ͭΔ width: 48%; .item width: 48%; .item margin: 1%; 1 + 48 + 1 + 1 + 48 + 1 100 ༨നΛؚΊͯ߹ΘͤͯʹͳΔΑ͏ʹ͢Δ

Slide 5

Slide 5 text

ฒ΂ͨ΋ͷʹCPSEFSͱQBEEJOH༨നΛ͚ͭΔͱ͖ʹ΍͓ͬͯ͘͜ͱ box-sizing : content-box; box-sizing : border-box; σϑΥϧτ͸ͪ͜Β ͪ͜Βʹมߋ͢ΔͨΊͷઃఆΛ͢Δ .items width: 50%; .item .items width: 50%; .item .item ίϯςϯπͷ෼ʹՃ͑ͯɺ QBEEJOH΍CPSEFSͷ෼͕૿͑ΔͨΊ͸Έग़ͯ͠͠·͏ɻ width: 50%; .item QBEEJOH΍CPSEFSࠐͰʹͯ͘͠ΕΔΑ͏ʹͳΔɻ ͸Έग़͢ͱ ஈམͪ͢Δɻ

Slide 6

Slide 6 text

ৗʹCPYTJ[JOHCPSEFSCPYΛઃఆ͓ͯ͜͠͏ * { box-sizing: border-box; } Λ๯಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺ͢΂ͯͷཁૉʹରͯ͠ద༻͞ΕΔɻ