Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSレイアウト

 CSSレイアウト

Atsushi Tadokoro

May 21, 2014
Tweet

More Decks by Atsushi Tadokoro

Other Decks in Technology

Transcript

  1. ຊ೔ͷ಺༰ ‣ ϘοΫεϞσϧʹ͍ͭͯ ෮श  ! ‣ $44Ͱஈ૊ϨΠΞ΢τΛ͢Δ ‣ $44ͰϖʔδͷϑϨʔϜϫʔΫΛ࡞੒͢Δ

    ‣ ·ͣ͸γϯϓϧͳஈ૊ϨΠΞ΢τʹ௅ઓ ‣ ϔομʔ ‣ ίϯςϯτ ‣ αΠυόʔ ‣ ϑολʔ ‣ ϙϐϡϥʔͳͭͷํ๏ ‣ qPBU ‣ QPTJUJPO
  2. ϘοΫεϞσϧ ‣ ίϯςϯτ ‣ ཁૉͷ಺༰ͦͷ΋ͷ ! ‣ CPSEFS ‣ ཁૉΛऔΓғΉ࿮ઢ

    ! ‣ QBEEJOH ‣ ίϯςϯτͱϘʔμʔ·Ͱͷ༨ന ! ‣ NBHJO ‣ ྡ઀͢ΔଞͷϘοΫεཁૉͱϘʔμʔ·Ͱͷ༨ന
  3. ϘοΫεϞσϧ ‣ NBSHJOͱQBEEJOHͷ஋ͷઃఆ ‣ ༨നͷ஋͸ҰൠαΠζ FN QU QY ͳͲ Ͱࢦఆ͢Δ

    ‣ ෳ਺ͷ஋ΛεϖʔεͰ۠੾ͬͯ·ͱΊͯهड़Ͱ͖Δ ‣ ஋ͷهड़਺ ‣ ɿ্ԼࠨӈΛ·ͱΊͯઃఆ ‣ ɿ্Լɺࠨӈͷॱʹઃఆ ‣ ɿ্ɺࠨӈɺԼ ‣ ɿ্ɺӈɺԼɺࠨͷॱͰઃఆɻ ্͔Β࣌ܭ·ΘΓ
  4. ϘοΫεϞσϧ ‣ CPSEFSͷϓϩύςΟ ‣ ͭͷϓϩύςΟΛ࣋ͭ ‣ CPSEFSXJEUIɿ࿮ઢͷ෯ ‣ CPSEFSDPMPSɿ࿮ઢͷ৭ ‣

    CPSEFSTUZMFɿ࿮ઢͷछྨ ‣ OPOFɺTPMJEɺEPVCMFɺEPUUFEɺEBTIFEɺHSPPWFɺJOTFUɺPVUTFUɺSJEHF
  5. DMBTTͱJE ‣ DMBTTଐੑ ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮDMBTTIPHFʯͱ͍͏ଐੑͰࢦఆ͞ΕΔ ! ‣ JEଐੑ

    ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮJEIPHFʯͱ͍͏ଐੑͰࢦఆ͞ΕΔ ‣ ಉ͡JEଐੑ͸ͻͱͭͷ)5.-ϑΝΠϧͷதͰճͷΈ࢖༻Մ
  6. ϕʔεͱͳΔ)5.-ͷ࡞੒ <!DOCTYPE HTML> <html> <head> <title>CSSϨΠΞ΢τͷςϯϓϨʔτ</title> <meta charset="UTF-8" /> <link

    href="css/style.css" rel="stylesheet" media="all" /> </head> <body> <div id="header"> ... </div> <div id="sidebar"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> </body> </html>
  7. ํ๏"ɿαΠυόʔͷුಈԽ ‣ CPEZཁૉͷத਎ΛͭͷJEཁૉʹ෼͚Δ ....(ུ).... <body> <div id="header"> <p>ϔομʔ</p> </div> <div

    id="sidebar"> <p>αΠυόʔ</p> </div> <div id="content"> <p>ϝΠϯίϯςϯπ</p> </div> <div id="footer"> <p>ϑολʔ</p> </div> </body> ....(ུ)....
  8. ํ๏"ɿαΠυόʔͷුಈԽ ‣ TJEFCBSΛුಈԽ͢Δ #header { padding: 20px; background: #ccc; }

    ! #sidebar { float: right; width: 30%; background: #999; } ! #footer { padding: 20px; background: #ccc; }
  9. ํ๏"ɿαΠυόʔͷුಈԽ ‣ ϚʔδϯΛ௥Ճ #header { padding: 20px; background: #ccc; }

    ! #sidebar { float: right; width: 30%; background: #999; } ! #content{ margin-right: 32%; } ! #footer { padding: 20px; background: #ccc; }
  10. ํ๏#ɿμϒϧϑϩʔτ ‣ αΠυόʔͱϝΠϯίϯςϯπΛೖΕସ͑Δ ....(ུ).... <body> <div id="header"> <p>ϔομʔ</p> </div> <div

    id="content"> <p>ϝΠϯίϯςϯπ</p> </div> <div id="sidebar"> <p>αΠυόʔ</p> </div> <div id="footer"> <p>ϑολʔ</p> </div> </body> ....(ུ)....
  11. ํ๏#ɿμϒϧϑϩʔτ ‣ $44ͷมߋ ! ‣ DPOUFOUͷqPBUଐੑΛઃఆɿӈ SJHIU ʹ ‣ DPOUFOUͷ෯Λઃఆ

      ‣ TJEFCBSͷqPBUଐੑΛઃఆɿӈ SJHIU ʹ ‣ TJEFCBSͷ෯Λઃఆ   ‣ GPPUFSͷखલͰίϥϜઃఆΛΫϦΞ͢Δඞཁ͕͋Δ ‣ GPUUFSͷDMFBSଐੑΛઃఆɿCPUI
  12. ํ๏#ɿμϒϧϑϩʔτ #header { padding: 2%; background: #ccc; } ! #content{

    float: right; width: 70%; } ! #sidebar { float: right; width: 30%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }
  13. ํ๏#ɿμϒϧϑϩʔτ ‣ ͞ΒʹCPEZͷNBSHJOΛʹ͢Δ body { margin:0; } ! #header {

    padding: 2%; background: #ccc; } ! #content{ float: right; width: 70%; } ! #sidebar { float: right; width: 30%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }
  14. ํ๏#ɿμϒϧϑϩʔτ ‣ ֤ཁૉͷ༨ന NBSHJO QBEEJOH Λඍௐ੔ body { margin:0; }

    ! #header { padding: 2%; background: #ccc; } ! #content{ float: right; width: 66%; padding:2%; } ! #sidebar { float: right; width: 26%; padding: 2%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }