CSS入門2 ボックスモデルを理解する

Transcript

1. ܳज़৘ใԋशσβΠϯ 8FC
   
   ୈ̒ճɿ$44ೖ໳
   
   ̎
   ϘοΫεϞσϧΛཧղ͢Δ ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
   
2. ઌिͷ෮श
   $44ʹΑΔจࣈͷσβΠϯ
3. ઌिͷ෮श ‣ ͱΓ͋͑ͣɺ͜Ε͚ͩ͸Ա͍͑ͨʂ ϓϩύςΟʔ ஋ ಺༰ DPMPS ৭ͷ஋ ϑΥϯτͷ৭ CBDLHSPVOEDPMPS ৭ͷ஋ എܠͷ৭ GPOUTJ[F ௕͞ͷ஋ ϑΥϯτͷେ͖͞ GPOUXFJHIU ʙ
   
   OPSNBM
   CPME
   ϑΥϯτͷଠ͞ MJOFIFJHIU ௕͞ͷ஋ ߦؒͷେ͖͞ UFYUBMJHO MFGU
   DFOUFS
   MJHIU
   KVTUJGZ ߦἧ͑
4. ઌिͷ෮श ‣ ৭ͱ௕͞ͷ஋ ୯Ґ ஋ ৭ w ৭ͷ໊લ
   SFE
   CMVF
   ZFMMPX
   XIJUFFUD
   w ਐ਺Ͱ3(#ͷ஋
   
   ʙ
   ⒎⒎⒎ ௕͞ w FNɿจࣈ෼ͷେ͖͕͞FN
   w 
   ɿύʔηϯτࢦఆ
   w QUɿϙΠϯτ
   QU
   
   JO
   w QYɿϐΫηϧ
   ը໘্ͷ࠷খ୯Ґ
5. ϘοΫεϞσϧ
6. ϘοΫεϞσϧ ‣ $44Ͱ͸શͯͷཁૉΛ௕ํܗͷϘοΫεΛ୯Ґͱͯ͠ߟ͑Δ
   ‣ ϒϥ΢βͷը໘ͷதͰੵΈ໦Λ͍ͯ͠Δײ֮
   ‣ ͍··ͰֶΜͰ͖ͨ)5.-ͷ΄ͱΜͲλά ϒϩοΫϨϕϧ ཁૉ ͸ɺͦͷपғʹݟ͑ͳ͍௕ํܗͷϘοΫεΛ͍࣋ͬͯ ͨ
   ‣ ϘοΫεͷपғͷ༨നɺ࿮ઢɺഎܠʹ༷ʑͳϓϩύςΟΛ༩ ͑Δ͜ͱͰ༷ʑͳελΠϧΛ࣮ݱ͢Δ
7. ϘοΫεϞσϧ ‣ ྫ͑͹ɺ౦ژܳज़େֶͷτοϓϖʔδ΋ϘοΫε ௕ํܗ ͷ ू߹͔Βߏ੒͞Ε͍ͯΔ
8. ϘοΫεϞσϧ ‣ 8FCϖʔδͷ΄ͱΜͲͷཁૉ͸ɺϘοΫε ௕ํܗ ͷू߹͔ ΒͳΓ͍ͨͬͯΔ
   ‣ ͜ͷ࠷খ୯ҐΛ૊Έ߹ΘͤͯɺϨΠΞ΢τΛ͍ͯ͘͠
   ‣ ͜ͷ࠷খ୯ҐͷϘοΫεΛɺϘοΫεϞσϧͱ͍͏
   ! ‣ ॏཁͱͳΔཁૉ͸ͭʂ
   ‣ NBSHJO
   ‣ QBEEJOH
   ‣ CPSEFS
9. ϘοΫεϞσϧ ‣ ϘοΫεϞσϧ ཁૉͷ಺༰
   ίϯςϯτ NBSHJO QBEEJOH CPSEFS ྡ઀͢ΔϘοΫεͱͷڥք
10. ϘοΫεϞσϧ ‣ ίϯςϯτ
    ‣ ཁૉͷ಺༰ͦͷ΋ͷ
    ‣ CPSEFS
    ‣ ཁૉΛऔΓғΉ࿮ઢ
    ‣ QBEEJOH
    ‣ ίϯςϯτͱϘʔμʔ·Ͱͷ༨ന
    ‣ NBHJO
    ‣ ྡ઀͢ΔଞͷϘοΫεཁૉͱϘʔμʔ·Ͱͷ༨ന
    ! ‣ QBEEJOHɺNBSHJO
    ༨നͷαΠζΛௐ੔ͯ͠ɺϨΠΞ΢τΛ ੔͍͑ͯ͘
    ‣ CPSEFS
    ͷઢͷଠ͞ɺઢͷछྨɺ৭ɺΛௐ੔ͯ͠࿮ઢΛσβ Πϯ͢Δ
11. ϘοΫεϞσϧ ‣ NBSHJO
    QBEEJOH
    CPSEFS͸ɺ্ԼࠨӈΛݸผʹઃఆͰ͖Δ ϓϩύςΟ ద༻͞ΕΔ৔ॴ NBSHJOUPQ
    QBEEJOHUPQ
    CPSEFSUPQ ্ NBSHJOSJHIU
    QBEEJOHSJHIU
    CPSEFSSJHIU ӈ NBSHJOCPUUPN
    QBEEJOHCPUUPN
    CPSEFSCPUUPN Լ NBSHJOMFGU
    QBEEJOHMFGU
    CPSEFSMFGU ࠨ
12. ϘοΫεϞσϧ ‣ ্ԼࠨӈΛҰׅͯ͠ઃఆ͢Δ͜ͱ΋Մೳ
    ‣ ༨നͷ஋͸ҰൠαΠζ FN
    QU
    QY
    ͳͲ Ͱࢦఆ͢Δ
    ‣ ෳ਺ͷ஋ΛεϖʔεͰ۠੾ͬͯ·ͱΊͯهड़Ͱ͖Δ ஋ͷهड़਺ ઃఆ͞ΕΔํ޲  ্ԼࠨӈΛ·ͱΊͯઃఆ  ্Լɺࠨӈͷॱʹઃఆ  ্ɺࠨӈɺԼͷॱʹઃఆ  ্ɺӈɺԼɺࠨͷॱͰઃఆɻ ্͔Β࣌ܭ·ΘΓ
13. ϘοΫεϞσϧ ‣ CPSEFSͷϓϩύςΟʔ
    ‣ ෯
    XJEUI ɺ৭
    DPMPS ɺܗ
    TUZMF
    ΛઃఆͰ͖Δ ϓϩύςΟ ઃఆͰ͖Δ஋ CPSEFSXJEUI େ͖͞ͷ୯Ґ CPSEFSDPMPS ৭ͷ୯Ґ CPSEFSTUZMF OPOF
    EPUUFE
    EBTIFE
    TPMJE
    EPVCMF
    HSPPWF
    SJEHF
    JOTFU
    PVUTFU Ұׅࢦఆ XJEUI
    TUZMF
    DPMPS
    ͷॱͰઃఆ͢Δ
14. ΑΓৄࡉͳηϨΫλͷࢦఆ ‣ จ຺ηϨΫλ
    ‣ MJ
    FN
    \DPMPS
    ^
    ‣ MJ
    
    FN
    \DPMPS
    ^
    ‣ I
    
    Q
    \DPMPS
    ^
    ! ‣ DMBTTͱJE
    ‣ QOPUF
    \DPMPS
    SFE^
    ‣ QOPUF
    \DPMPSSFE^
    ! ‣ ٙࣅΫϥεηϨΫλ
    ‣ BMJOL
    \DPMPS
    G^
    ‣ BWJTJUFE
    \DPMPS
    ^
    ‣ BIPWFS
    \DPMPS
    G^
15. ΑΓৄࡉͳηϨΫλͷࢦఆ ‣ ࢠଙཁૉʹద༻
    ‣ ෳ਺ͷηϨΫλΛ൒֯εϖʔεͰ۠੾ͬͯྻڍ͢Δ
    ‣ ͋ΔಛఆͷཁૉλΠϓͷࢠଙཁૉͰ͋Δͱ͖ʹ͚ͩద༻͞ ΕΔ
    ! ‣ ௚઀ͷࢠཁૉʹ͚ͩద༻
    ‣ ෳ਺ͷηϨΫλΛͰ۠੾ͬͯྻڍ͢Δ
    ‣ ௚઀ͷࢠཁૉʹ͚ͩద༻͞ΕΔ
    ! ‣ ܑఋཁૉʹద༻
    ‣ ෳ਺ͷηϨΫλΛ Ͱ۠੾ͬͯྻڍ͢Δ
    ‣ ಉ͡਌ཁૉΛ࣋ͭʮܑఋʯཁૉʹ͚ͩద༻͞ΕΔ
16. DMBTTͱJE ‣ DMBTTଐੑ
    ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ
    ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮDMBTTIPHFʯͱ͍͏ଐ ੑͰࢦఆ͞ΕΔ
    ! ‣ JEଐੑ
    ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ
    ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮJEIPHFʯͱ͍͏ଐੑͰ ࢦఆ͞ΕΔ
    ‣ ಉ͡JEଐੑ͸ͻͱͭͷ)5.-ϑΝΠϧͷதͰճͷΈ࢖༻ Մ
17. ٙࣅΫϥεηϨΫλ ! ‣ ٙࣅΫϥεηϨΫλ
    ‣ ໊લ΍ଐੑʹ͸ؔ܎ͳ͘ɺঢ়گʹΑͬͯมԽ͢ΔηϨΫλ
    ‣ BཁૉͷϦϯΫઃఆ͕୅දత
    ‣ MJOL
    ˠະ๚໰ͷ63*΁ͷϦϯΫ
    ‣ WJTJUFE
    ˠ๚໰ࡁͷ63*΁ͷϦϯΫ
    ‣ BDUJDF
    ˠબ୒தͷϦϯΫ
    ‣ IPWFS
    ˠݱࡏϚ΢ε͕ͦͷ্ʹདྷ͍ͯΔཁૉ
18. ελΠϧͷઃܭ ‣ ޮՌతͳελΠϧͷઃܭ
    ‣ $44ಡΈࠐΈͷ༏ઌॱҐΛར༻ͯ͠؅ཧͷ͠қ͍ελΠϧΛ ઃܭ͢Δ
    ‣ αΠτશମͷڞ௨ελΠϧ
    ‣ ϓϩδΣΫτͷελΠϧ
    ‣ ͦͷจॻಛ༗ͷελΠϧ
    ‣ ಛఆͷཁૉݻ༗ͷελΠϧ
19. ग़ྗϝσΟΞʹԠͨ͡࢖͍Θ͚ ‣ ελΠϧγʔτΛදࣔ͢ΔϝσΟΞʹԠͯ͡ৼΓ෼͚Δ͜ͱ ͕Ͱ͖Δ
    ‣ MJOLཁૉͷNFEJBଐੑͰઃఆ͢Δ
    ‣ $44ͷ!NFEJBͱ͍͏ηϨΫλΛ༻͍ͯ΋ઃఆՄೳ $44Ҏ߱
    ! ‣ ϝσΟΞͷछྨ
    ‣ BMMɿશͯͷϝσΟΞʹద༻ σϑΥϧτ
    ‣ BVSBMɿԻ੠ಡΈ্͛ʹద༻
    ‣ IBOEIFMEɿ1%"ͳͲͷܞଳ୺຤ʹద༻
    ‣ QSJOUɿҹ࡮ग़ྗʹద༻
    ‣ TDSFFOɿҰൠతͳΧϥʔϞχλʹద༻
    ‣ UWɿςϨϏͳͲʹద༻
20. ϙδγϣχϯά ‣ ϘοΫεͷ෯ɾߴ͞΍ɺςΩετͷճΓࠐΈͳͲઃఆͰ͖Δ
    ‣ XJEUIɿϘοΫεͷίϯςϯτ෦෼ͷ෯
    ‣ ҰൠαΠζɺBVUP
    ‣ IFJHIUɿϘοΫεͷίϯςϯτ෦෼ͷߴ͞
    ‣ ҰൠαΠζɺBVUP
    ‣ qPBUɿςΩετͷճΓࠐΈͷઃఆ
    ‣ MFGU
    SJHIU
    OPOF
    ‣ DMFBSɿςΩεճΓࠐΈͷղআ
    ‣ MFGU
    SJHIU
    OPOF
    CPUI
    ‣ QPTJUJPO
    ‣ UPQ
    CPUUPN
    MFGU
    SJHIU
21. EJW
    ͱ
    TQBO ‣ EJWͱTQBOͰબ୒ൣғΛ·ͱΊΔ
    ‣ EJWཁૉ΍TQBOཁૉͰෳ਺ͷཁૉΛғΉ͜ͱʹΑͬͯɺҰఆ ͷൣғʹ·ͱΊͯελΠϧΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ
    ‣ ߴ౓ͳελΠϧࢦఆͷجຊͱͳΔ
    ‣ ϖʔδ಺ͷػೳͷԠͯ͡)5.-Λ۠෼෼͚͢Δ
    ‣ ϔομ
    ‣ ϑολ
    ‣ ϝχϡʔόʔ
    ‣ αΠυόʔ
    
    
    FUD
    ! ‣ ஈ૊ʹԠ༻
    ˠ
    ࣍िҎ߱ʹ