CSS - Liquid Layout

CSS - Liquid Layout

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

June 26, 2020
Tweet

Transcript

  1. ͰϨΠΞ΢τ͢Δ

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

    : 50%; tab w100p ͞Βʹը૾ʹ͸ ͦͷ਌ʹରͯ͠ ͽͬͨΓʢʣͷ ෯ʹઃఆ͢Δ ਺ࣈͷޙʹQΛ෇͚Δͱʹల։͞ΕΔ
  3. )5.-ͷ਌ࢠͷؔ܎Λཧղ͠Α͏ JNH͔ΒݟͯɺJUFN͸਌ʹ͋ͨΔɻ ʮ਌͸ࢠΛแΉʯͱ֮͑Α͏ɻ .item img .item img width: 100%; ਌ʹͽͬͨΓ߹ΘͤΔʹ͸

    ෯Λʹઃఆ͢Δɻ EJWDMBTTJUFN JNHTSDlIUUQT QOHzBMU 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[JOHCPSEFSCPYΛઃఆ͓ͯ͜͠͏ * { box-sizing: border-box; } Λ๯಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺ͢΂ͯͷཁૉʹରͯ͠ద༻͞ΕΔɻ