CSS - Liquid Layout

Transcript

1. ͰϨΠΞ΢τ͢Δ

2. ෯ͷϘοΫεΛฒ΂Δ
   ˠ
   ը໘෯ʹ߹ΘͤͨϨΠΞ΢τͰ͖Δ ϘοΫεʹରͯ͠෯Λࢦఆ͢Δ ฒ΂ΔࢦఆΛ͢Δ ࠷ॳ͸਌ʹରͯ͠ͷ෯ʹͳ͍ͬͯΔ ਌ʹରͯ͠෯Λ൒෼ʢʣʹઃఆ͔ͯ͠Β ฒ΂Δͱɺߦ͋ͨΓͭͣͭฒͿɻ
   ͜ͷߟ͑ํΛԠ༻͢Ε͹ɺ
   ͭ΍ͭͣͭฒ΂Δ͜ͱ΋Ͱ͖Δɻ΍ͬͯΈΑ͏ɻ w50p width

   : 50%; tab w100p ͞Βʹը૾ʹ͸
   ͦͷ਌ʹରͯ͠
   ͽͬͨΓʢʣͷ
   ෯ʹઃఆ͢Δ ਺ࣈͷޙʹQΛ෇͚Δͱʹల։͞ΕΔ

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

   ෯Λʹઃఆ͢Δɻ EJW
   DMBTTJUFN
   
   
   
   JNH
   TSDlIUUQT QOHz
   BMU
   EJW

4. ฒ΂ͨ΋ͷʹNBSHJOΛ͚ͭΔ ߹Θͤͯʹ͢Δͱ
   ϐολϦऩ·Δ .items width: 50%; .item .item width: 50%;

   .items ༨നΛ
   ͚ͭΔ width: 48%; .item width: 48%; .item margin: 1%; 1 + 48 + 1 + 1 + 48 + 1 100 ༨നΛؚΊͯ߹ΘͤͯʹͳΔΑ͏ʹ͢Δ

5. ฒ΂ͨ΋ͷʹ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ࠐͰʹͯ͘͠ΕΔΑ͏ʹͳΔɻ ͸Έग़͢ͱ
   ஈམͪ͢Δɻ

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